나는 오늘도 멋있다

1. 모든 행동에는 목표를 정하고 근거가 있어야 한다. 2. 문제가 발생하면 해결이 아닌 원인을 찾아야 한다. 3. 다른사람의 관점을 고려해야한다. 학습목적 상태관리와 함께 자주들었던 Context API를 들었을때는 전역상태관리 할때 쓰이는것 아닌가? 라는 생각만을 가지고 있었다. 보통 "가벼운 프로젝트에서 사용하기좋다", "좀더 큰프로젝트에서는 다른 상태관리 라이브러리" 라는 글들을 보았다. 왜그럴까? 사용법을 알아아보고 그에 대한 이유를 알아보자. 모든내용은 내가 추측한 것이아닌 공식문서의 내용을 토대로 하며, 요약 타이틀에만 나의 의견을 반영한다. Context API란? Context API는 React에서 제공하는 기능으로, 컴포넌트 간에 Props를 통해 명시적으로 정보를 전달하지 않고도 하..

목적 부트캠프 과정의 두번째 과제로 HTML과 CSS 만으로 Youtube의 홈부분을 flex로 구조를 잡는 과제였다. Flex는 항상 써왔다. 그래도 Flex의 각 속성에 대해 좀더 깊이이해하고 쓰자는 생각으로 이글을 작성한다. Flex란? 주로 CSS Flexbox 레이아웃을 만들때 사용되는 속성으로, 웹페이지의 레이아웃을 효율적으로 설계하고, 요소들을 유연하게 배치하기 위한 CSS 기술이다. Flex의 속성들 Flex의 Container는 부모요소를 뜻하고, Item은 자식요소를 뜻한다. Container 속성 속성명 설명 단위 속성 dispaly 부모요소를 Flexbox 컨테이너로 만든다. flex, inline-flex justify-content 주축의 요소들을 정렬한다. flex-start,..

1. 모든 행동에는 목표를 정하고 근거가 있어야 한다. 2. 문제가 발생하면 해결이 아닌 원인을 찾아야 한다. 3. 다른사람의 관점을 고려해야한다. 학습목적 React의 hook은 각목적에 맞게 쓰이고 자주 사용되는 hook들이 있다 useState는 상태변경, useEffect는 side Effect 등 말이다. 그중 useReducer은 명칭은 익숙하지만 사용해본적이 없다. Redux에서도 reducer함수에 따라 상태를 업데이트 하는데, Redux와 관계가 있는건가? 하는 궁금증으로 학습을하게 되었다. useReducer란? 여러 상태 업데이트가 많은 구성요소는 상태관리를 하기가 힘들수도 있다. 이런 복잡한 구성 요소의 상태를 하나의 함수로 관리하여, 단일 컴포넌트 내의 복잡한 상태들을 구조화하여 ..

프론트 공부를 하는 도중 백엔드에도 관심이 생겨서 프론트와 백엔드를 같이 공부할겸에 백엔드 부트캠프 과정중 첫번째 과제다. 목적에 맞는 컴퓨터 사양을 맞추는것인데, 이과제의 목적은 이렇다. "모든 행동에 목표를 정하고 근거를 정해 행동한다는 원칙" "문제가 발생하면 해결에 집착하지 말고 원인을 찾는다는 원칙" "개발을 할 때는 꼭 다른 사람의 관점을 고려해야 한다는 원칙" 위의 원칙을 이해하기위해 진행되는 과제다. 과제에 대한 조건은 어떤 용도로 사용할 것 인지? 게임용이면 어떤게임인지? 디자인툴용이면 어떤 디자인툴 용도인지? CPU, GPU, MainBoard, RAM, Power, Case, SSD 등을 포함하여 63만원 이내로 맞출것! 주어진 부품들중 제외 할 부품이 있다면 왜 제외 했는지? 해당부..

React.memo란? 부모로 부터 전달받은 Props의 상태변경이 일어나지 않았을때 불필요한 렌더링을 방지하는 API 오직 Props 변화에만 의존하는 최적화 방법 React.memo 왜 사용해야할까? React의 함수형 컴포넌트에서 상태가 변했을경우 컴포넌트는 리렌더링이 발생한다. 문제는 자식의 상태는 변경되는것이 없는 상황에서 부모컴포넌트의 상태가 변경됨으로써 자식은 불필요한 렌더링이 발생한다. 그렇기에 해당 자식이 부모에게 받는 props의 상태가 동일하다면 자식을 렌더링 하지 않도록 할수 있다. React.memo 구문 const ComponentName = memo(Component) Component: 부모에게 Props를 받는 컴포넌트 React.memo 동작방식 부모에게 받는 Props가..

useCallback이란? React에서 성능 최적화를 위해 사용되는 hook중 하나로, 함수자체를 메모제이션(memoization)하여 불필요한 함수 재생성을 방지하여 렌더링성능(불필요한 렌더링 방지)을 향상시킨다 useCallback 왜 사용해야할까? React의 함수형 컴포넌트는 해당 컴포넌트가 렌더링될 때마다 모든 내부 변수 및 함수가 초기화되기 때문에 함수또한 재생성을 하게된다. 여기서 함수는 참조타입을 가지므로 렌더링마다 다른 참조 주소를 가지게 되는데, 이러한 이유로 재생성 되는것을 useCallback을 통하여 최초 렌더링시에 참조주소를 유지를 하고, 이전함수를 사용하는 것 이다. useCallback 구문 useCallback(memooizationFunctuin,[dependencies..

useMemo란? React에서 성능 최적화를 위해 사용되는 hook중 하나로, 이전에 계산된 함수호출 결과값을 메모제이션(memoization) 하여 불필요한 계산을 방지하여 렌더링성능(불필요한 렌더링 방지)을 향상시킨다 메모제이션(memooization): 이전에 계산된 값을 캐싱하여 동일한 입력에 대해 다시 계산을 수행하지않고 저장된 값을 반환 useMemo 왜 사용해야 할까? React의 함수형 컴포넌트는 해당 컴포넌트가 렌더링될 때마다 모든 내부 변수 및 함수가 초기화되기 때문에, 컴포넌트 내부에서 무거운 작업을 하여 값을 반환하는 함수가 있을때, 자주 변경되지않는 값이 렌더링마다 해당 함수를 호출하여 값을 반환하는것은 무의미한 반복 작업이다. useMemo는 이전에 계산된 결과값을 메모리에서꺼..