내배캠

※ Zustand? - Zustand는 리덕스의 복잡함과 너무 많은 보일러 플레이트를 극복하기 위해 나온 전역 상태관리 라이브러리로, 현재 낮은 러닝커브로 많이 사랑받고 있다. 그에 맞게 설치와 사용법도 무척 간단하다. 1. 설치npm i zustand 2. 사용법import { create } from 'zustand'// 함수를 넣어 객체를 리턴const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 })),}))function Counter() { const { count, inc } = useStore() return ( {count} one up ..

이번 과제는 일부러 props-drilling → context api → redux 순으로 점차 리팩토링을 해나가는 과제였다. 전역 상태 라이브러리로 Zustand만 써보았기 때문에 리팩토링을 하면서 context api나 redux 사용법을 익혀나갈 수 있었다, 특히나 컴포넌트나 파일 구조를 더 깔끔하게 짜고 싶어 이리저리 많이 찾아보았는데 그렇게 썩 만족스러운 로직이 구현된 것 같지 않다. 그래도 처음 과제를 받고 어떻게 이걸 구현하지 싶어 열심히 노력한 부분도, 과제가 끝나고 보면 아쉬움이 남는 걸 보니 프로젝트를 통해 어느 정도 보는 시야가 넓어진 것 같은 느낌이다! 이번 주차는 10일동안 useEffect, useCallback, useMemo 같은 hook 뿐만 아니라 router v6에 r..

내배캠 챌린지반 과제로 데스크톱 메모앱을 보고 만든 프로젝트를 최대한 똑같이 만들어보는 걸 내주셨다.메모 앱의 기능 구현 자체는 어떻게 동작할지 보자마자 감은 왔는데, 처음 써보는 redux와 함께하니 어떤 방식으로 상태를 넘겨받고 사용할지 조금 헤맸다. 그래도 이번 프로젝트 덕분에 막막했던 리덕스 사용법을 어느 정도 익힐 수 있어서 다행이다. 전에 Zustand를 써본 경험이 있어서 그런지, 상태관리 하나하는데 만들어야 할 기본 보일러 플레이트 구조가 더욱 복잡하게 느껴졌고 '이래서 개발자들이 다른 전역상태 라이브러리를 따로 만들었겠구나란 생각이 절도 들었다. Styled-components도 제대로 써본 경험은 많지 않은데 이번 기회를 통해 많이~많이 써보았다. 태그에 ID를 쓸지, Class를 쓸지..

리액트 숙련주차 강의를 열심히 듣고, 과제에 열심히 적용한 날. 전체적인 UI를 구성했기 때문에 특별한 트러블 슈팅도 별로 없었다.  ※ 테두리, 사이즈 재조절, 클릭시 border 없애는 방법 // css 내 적용 border: none; resize: none; outline: none;  ※ Context API가 있음에도 Redux로 Global state를 관리하면 좋은 이유(강의 내용)1.성능 최적화 => Context Api는 Provider 하위의 모든 컴포넌트를 리렌더링 하게 할 수 있습니다. 상태가 변경될 때마다 관련된 모든 컴포넌트가 불필요하게 업데이트 되는 것을 막기 위해 복잡한 최적화가 필요합니다. 반면, Redux는 상태 변경 시 관련된 컴포넌트만 선택적으로 업데이트할 ..

몇 시간 동안 피카츄랑 노니깐, 내적 친밀감이 부쩍 올라갔다...피카츄 놀이터 만들기평소에 많이 하던 홈페이지를 구성하는 것과 다르게 이벤트 핸들러를 다루는 과제라 처음 봤을 때는 '어떻게 구현할까?' 고민을 많이 했었다. 여러 폴더 구조도 고민해 보고, 어떻게 컴포넌트를 나눌까도 열심히 고민해 보는 시간을 가져 의미 넘쳤던 과제! 과제를 구현하면서 질문거리도 많이 생겼는데, 주말이라 물어볼 튜터님이 안계신다 ㅠㅠ 구글링이나 gpt를 통해서도 명확하게 나오지 않아 튜터님께 질문드리고 정리해 봐야겠다. 아래는 github README.md에 적었던 후기🔎 후기- 과제 목표였던 useState와 props 기능에 충실해서 완성하려 노력했습니다.- 만약 실제 게임이었다면 어떻게 컴포넌트를 나눌지 고민해 보았..

React 입문주차 개인 과제인 TodoList를 제출하니, 아래와 같이 튜터님께 피드백이 도착했다!확실히 input의 변화를 onChange로 감지하면서 '아 입력할 때마다 input의 값을 실시간으로 가져오는구나'라고만 생각했지 매번 리렌더링이 일어난다고 생각해보지 않았던 것 같다. 부분적으로 작은 범위의 리렌더링이라 신경쓰지 못했던 것 같고, 피드백에서 언급해주시지 않았다면 계속 이 방법대로 썼을 것 같은데 새로운 방법을 알게 되었다.(피드백 최고..!)  ※ 코드 개선하기1. 개선 전 코드에 onChange와 value를 사용 2. 개선 후 코드useRef를 이용해 의 값을 가져온 코드useRef는 DOM 요소에 접근하는데 사용되며, 이렇게 생성된 객체는 값이 변경되어도 컴포넌트가 다시 리렌더링하..

오늘 3시에 진행된 챌린지반 수업에서는 튜터님이 직접 todolist 과제를 구현하는 것을 실시간으로 볼 수 있었다. 매번 강의로 편집된 프로젝트만 보다가 이렇게 실시간으로 시니어 개발자가 코드를 작성할 때 어떤 순서로, 어떤 기능을 우선적으로 개발하는지 알 수 있어 굉장히 유익했다.  ※ 실시간 세션 중 알게 된 지식들1. 변수명은 F2로 바꾸기변수에 F2를 누르게 되면, 변수명을 바꿀 수 있는 창이 뜨는데 이걸 통해 동일한 변수명을 동시에 바꿀 수 있음2. useRef 사용useRef는 값이 변경되어도 리렌더링이 일어나지 않아, 보존하고 싶은 값을 넣어 둘 수 있음DOM 요소에 접근하고 싶을 때 사용됨useRef의 값은 그 자체에 들어있는 게 아닌 current에 담겨 있음const titleRef ..

- React 입문 강의 중 한 번 더 리마인드가 필요한 내용 정리  1. Javascript 런타임 환경 런타임? 프로그래밍 언어가 구동(running)되는 환경(environment)런타임 환경은 크게 브라우저와 node 환경으로 나뉨// 아래 파일을 브라우저에서 실행하면 정상작동 하지만, node 환경에서 실행하면 오류가 발생// test.jsfunction printAlert() { alert('이 함수는 브라우저 환경에서만 실행됩니다.');}printAlert(); 2. React Children의 사용children은 props 중 하나로, 자식 컴포넌트로 정보를 전달하는 방법컴포넌트 태그 안에 적는게 아닌, 컴포넌트의 opening 태그와 closing 태그 사이의 내용이 childre..