DDODI TIL 🚀

custom hook을 사용해보고 싶은데, 정확히 어떤 개념인지 와닿지 않아서 간단하게 공식 문서를 읽어봤다. 커스텀 훅이란? 제목에 먼저 답을 하자면 커스텀 훅은 함수다. 내부에서 다른 hook을 호출하는 함수를, 우리는 커스텀 훅이라고 부른다. 여기서 다른 hook이라 함은 우리가 자주 사용하는 useState, useEffect 등을 일컫는다. 즉 Custom hook은 함수이며, 일반 함수와의 차이점은 내부에서 다른 hook을 호출할 수 있다는 점이다. 💁🏻‍♂️ : 앗 그렇다면 일반함수에서는 hook을 호출 할 수 없는 것인가요? ➡️ 그렇다. 일반 함수에서는 hook을 호출할 수 없다. 리액트 공식문서를 살펴보면, hook을 사용할 때 두 가지 규칙이 존재한다. 1. React 함수의 최상위 ..

https://meoweundi.tistory.com/20 remote에 push한 커밋은 rebase 하시면 안됩니다(꼬인 git 푼 기록) 드디어 정상적인 방법들로 꼬인 git을 풀어냈다 우하하 문제 상황 정리(순서대로) 1. local/feature/modal을 remote에 push 2. origin/feature/modal ➡️ origin/master pull request 3. 다른 팀원이 다른 브랜치.. meoweundi.tistory.com 위 글에서 가졌던 의문의 올바른 해답을 찾았다. 👩🏻‍💻 문제 상황 정의 로컬 브랜치를 local/[브랜치명], 원격 저장소의 브랜치를 remote/[브랜치명]으로 지칭하겠다. local/feature 브랜치에서 작업 중이고, remote/featur..

드디어 정상적인 방법들로 꼬인 git을 풀어냈다 우하하 문제 상황 정리(순서대로) 1. local/feature/modal을 remote에 push 2. origin/feature/modal ➡️ origin/master pull request 3. 다른 팀원이 다른 브랜치에서 작업 후 origin/master로 merge pr에서 받은 피드백을 반영해 local/feature/modal 브랜치에서 코드를 수정하고자 했다. 그 전에 동료의 작업을 pull 받기 위해 local/master로 이동, git pull origin master 을 실행했다. 이후 다시 local/feature/modal 브랜치로 돌아와, pull 받은 이후의 커밋부터 작업을 진행하기 위해 local/master에 대해 reba..

폼 제출 후 응답이 올 때까지 로딩 화면을 띄워보자. 🎈 기존 방식 보통 React에서 로딩 화면을 구현한다면 아래와 같은 방식일 것이다. function LoginPage() { const [loading, setLoading] = useState(null); return ( {loading && } ) } submit 버튼 클릭 ➡️ setLoading(true) ➡️ loading의 상태가 바뀌어 리렌더링 발생, 로딩 UI가 화면에 띄워짐 그러나 react-hook-form을 사용한 경우 해당 방식을 사용할 수 없다. react-hook-form 사이트에 들어가보면, react-hook-form은 form 영역을 제외한 다른 영역의 re-render를 방지하는 기능을 제공한다고 적혀있다. 이때문에 ..

function App() { this.contents = []; } App(); App 함수를 선언하고 this.contents로 contents라는 상태를 관리 하고자 했는데, 아래와 같은 에러가 발생했다. this키워드를 이해하지 못해 발생한 에러였다. this 키워드의 의미 this는 기본적으로 자신이 속해 있는 객체를 지칭한다. const person = { sayHi() { console.log(this); // person 객체를 가르킨다. } } 따라서 전역함수에서의 this는 window 객체를 의미한다. 전역 scope에서 함수를 선언하면 window 객체에 추가되기 때문이다. 다만 strict mode일 때 전역함수에서 this를 사용하면 undefined가 출력된다. 위 에러가 발생..

내가 가장 자신 없는 것, 가장 부족하다고 느끼는 것들을 정리해보자. 첫째, Vanilla JavaScript 실력 둘째, 확장성, 재사용성이 좋은 코드를 작성하는 능력 셋째, 서비스 유지보수 경험 단기간에 어떻게든 되게 만들어야 하는 프로젝트들 위주로 해온 탓이다. 덕분에 안 되는 걸 되게 하는 능력은 키울 수 있었지만, 이제는 한계에 부딪힌 것 같다. 정말 많은 개발자 분들이 바닐라 자바스크립트의 중요성을 강조하신다. 우아한테크코스와 프로그래머스 데브매칭 이 둘이 바닐라 자바스크립트 과제를 내주는 것만 봐도 그 중요성을 알 수 있다. 그런데 나는 React 위주의 개발을 해온 터라, 자바스크립트 만을 이용해 앱을 만들어 본 적이 없다. 그렇지만 이제 피할 수 없다. 해야 한다. 1번은 2번과도 연결된..

문벅스 강의의 요구사항을 직접 구현 해보며 느낀 내 코드의 전반적인 문제점 요구 사항 // TODO: localStorage에 저장 // - [] localStroage에 메뉴 데이터를 저장한다. // - [] 새로고침을 하면 localStorage에 저장되어 있던 메뉴 데이터를 불러온다. // TODO: 품절 표시 기능 // - [] 메뉴의 품절 버튼 클릭 이벤트를 받고, 이벤트 발생 시 품절 상태를 변경한다.(toggle) 내 코드 const toggleSoldOutMenu = (e) => { const $menuElement = e.target.closest("li"); const menuId = parseInt($menuElement.dataset.menuId, 10); const $menuNam..

함수의 용도는 기본적으로 반복되는 코드를 줄이는 것이다. FE 개발에 있어 함수의 리턴 값에는 크게 두 종류가 있다. 연산의 결과 UI 요소 이 중 오늘은 두번째 경우에 대해 이야기를 해보려고 한다. 첫번째 패턴의 경우 의식하지 않아도 곧잘 사용한다. 그러나 두번째 패턴의 경우 우리에게 익숙한 수학적 함수의 개념과 다소 차이가 있기 때문에, 사고방식을 의식적으로 확장하지 않으면 활용하기 어렵다. 함수가 값을 리턴하는 것은 단순히 연산의 결과값을 도출하는 게 아니다. 함수의 호출 부분이 리턴 값으로 대체된다는 것을 의미한다. 즉, 특정 UI 요소가 반복된다면 우리는 이를 여러 번 작성하는 대신 UI를 리턴하는 함수를 활용할 수 있다. 함수를 호출한 부분에 우리가 원하는 UI가 들어올 것이다. ❗️유사한 코..

2022.05.14 velog에 작성했던 글입니다 러닝 어플인 만큼 정보가 실시간으로 바뀌어야 한다. 실시간이라기 보다는 초 단위로 바뀌어야 한다는 말이 더 적합하긴 하겠다. 아무튼 대표적인 실시간 정보는 '사용자가 달린 시간'이다. 시간을 기준으로 계산해주어야 하는 값들이 존재하기 때문에(ex 페이스, 칼로리) 이 값을 잘 관리해줘야 한다 😊 ... 구현 목표 ⏰ 아래 이미지의 타이머를 구현하고자 했다. 1초씩 증가해야 하고, 바뀐 값이 화면에도 바로 반영되어야 한다. 사용자가 일시정지 버튼을 누르면 시간 증가도 멈춰야 한다. 러닝을 재개하면 일시정지 버튼 누르기 전 시간에서 다시 1초씩 증가해야 한다. 기본 타이머 구현 useInterval이라는 custom Hook을 사용했다. 리액트의 기본 Hoo..

🧸 🚂 🎈 새로운 토이 프로젝트에서 사용할 css 방식을 결정하기 위해 직접 여러 가지 방식들을 조사하고 장단점을 비교해 봤다! 🙋🏻‍♂️ 🎈 고려한 선택지 css module css preprocessor(scss) css-in-js(styled-components) 컴포넌트를 직접 제작해보고 싶었기 때문에 Tailwind CSS, Bootstrap, Material UI 등의 CSS Framework는 고려하지 않았다. ❗️ 기존 css가 가지는 문제점 가장 큰 문제점은 바로 중복된 클래스명에 있다. css는 global scope를 가지기 때문에, 클래스명이 중복될 경우 원치않는 곳에 스타일이 적용되는 문제가 발생할 수 있다. 이를 해결하기 위해서는 결국 클래스명을 점점 더 구체적으로 지을 수 밖에..