React

아토믹 디자인은 틀(페이지)과 부품(컴포넌트) 2가지 수준으로 나워 UI를 파악하는 개념이다

referencehttps://www.youtube.com/watch?v=HYgKBvLr49c

referencehttps://www.youtube.com/watch?v=aSAGOH2u2rs응집도를 세부적으로 나누면 기능 / 순차 / 통신 / 시간 / 절차 / 논리 / 우연 으로 나눌 수 있다.앞에 있는 응집도를 가지는 것이 뒤에 있는 응집도를 가지는 것

bind 를 사용해야하는 이유는 무엇일까요? JavaScript에서 클래스 메서드는 기본적으로 바인딩 되어 있지 않다. class 필드 내부 메서드에 바인딩하지 않는다면 내부 메서드를 호출할 때 this는 undefined가 된다. 이것은 React만의 특수 동작이

add 함수는 stateful function 이다.여기서 문제는 foo 변수가 global scope에 위치하고 있으므로 foo 변수를 직접적으로 변경할 수 있는 문제가 있다.이 문제를 해결하기 위해 HOC 를 만들면 된다.이렇게 하면 stateful function

컴포넌트의 lifecycle은 3단계로 이루어져 있다. Mounting Updating Unmounting Mounting React가 처음 컴포넌트를 렌더링할 때 제일 먼저 useState(), useReducer()의 첫번째 인자로 함수를 실행하는 구문을 넣으

create react app을 하지 않고 직접 npm 모듈들을 설치해서 앱을 만드는 이유는 보통 불필요한 모듈들을 설치하지 않기 위해서라고 들었다. 그러나 CRA를 막상 해보면 설치되는 모듈들은 생각보다 적다. 그렇다면 CRA를 하는 것이 더 적은 모듈들을 설치해서

우선 ContextAPI는 무엇인가? 보통 ContextAPI와 전역 상태관리 라이브러리를 많이 비교한다. 사실이 두 개는 같은 비교군이 아니다. ContextAPI를 전역 상태 관리 툴이라고 오해할 수 있지만 Context는 실제로 아무것도 관리하지 않는다. 단순

UI 로직과 비즈니스 로직을 분리하는 것은 상당히 강조되어왔던 사항이다. React에서는 hook을 통해 관심사를 분리할 수 있다. 상당히 간단하다. 1.Team을 보여주는 컴포넌트를 작성 `

리펙터링을 하는 방법은 개인마다 차이가 있을 것이다.

해당 프로젝트 https://github.com/woowacourse-teams/2022-levellog 리펙터링을 진행하면서 항상 느끼는 것이지만 좋은 리펙터링의 결과는 불편함에서 나온다고 생각한다. 코드에 대한 불편함을 느껴야 리펙터링을 하는 의미를 느낄 수 있고

해당 프로젝트 https://github.com/woowacourse-teams/2022-levellog 도입전 해당 화면 일단 코드를 한번 보자. 컴포넌트의 구조는 State Waterful방식으로 최상단 페이지 컴포넌트에서 모든 API 요청을 응답받고 그에

서론 리액트로 개발을 하다가 가장 하위 컴포넌트인 Button 컴포넌트를 개발하다가 해당 버튼으로 내려오는 props와 children을 클릭 핸들러 함수로 전달하기 위해 Button 컴포넌트에서 분기 처리를 하다가 Button 컴포넌트의 복잡도가 올라가는 문제를 해