솔미는 성장중

문제 상황 백엔드와 야놀자 기업 과제 프로젝트를 진행하게 되었다. 2주라는 짧은 프로젝트였기에 모든 과정이 빠르게 진행되어야 했다. ＼（〇_ｏ）／ 초반 ERD작업, API설계, 디자인 시안 제작, 기획 등 빠르게 진행되었다! 모든 것이 착착 진행되나 싶었으나 문제가 생겼다.. 퍼블리싱을 다 끝냈는데도 불구하고 API를 만드는 작업은 아주 초반 단계였던 것이다. 그렇다고 손놓고 있을 수는 없겠다라는 생각에 붕 뜬 시간에 무엇을 할 수 있을지 알아보았다. ✨ 그러다가 알게 된 MSW ! ✨ MSW 작동방식 1. 라이브러리를 설치하면 브라우저에 Service Worker을 등록한다. 2. Service Worker는 브라우저에서 이루어지는 실제 네트워크 요청들을 가로채 복사해서 실제 서버가 아닌 클라이언트 사..

Reducer 함수를 사용하는 이유 컴포넌트가 복잡해지면 컴포넌트의 state가 업데이트되는 상황을 한눈에 파악하기 어려울 수 있다. 따라서 Reducer를 이용해 state를 관리하면 state 로직의 양을 줄이고, 복잡성을 줄일 수 있다. (접근하기 쉽게 한 곳으로 모아주는 역할) useState에서 useReducer로 마이그레이션 하는 방법 1. state 설정을 action들의 전달로 바꾸기 2. reducer 함수 작성하기 3. 컴포넌트에서 reducer 사용하기 1. state 설정을 action들의 전달로 바꾸기 dispatch 함수에 넣어준 객체를 “action”이라고 한다. 일반적으로 무슨 일이 일어났는지 에 대한 최소한의 정보를 포함한다. (type에 string으로 작성) 예시) f..

UI를 요청하고 제공하는 3단계 1. 렌더링 촉발 - 렌더링이 일어나는 이유 : 1. 컴포넌트의 첫 렌더링일 때 : 2. 컴포넌트의 state가 업데이트된 경우 2. 컴포넌트 렌더링 - React에서 컴포넌트를 호출한다 : 1. 컴포넌트의 첫 렌더링일 때 ▶ 루트 컴포넌트 호출 : 2. 컴포넌트의 state가 업데이트된 경우 ▶ state 업데이트에 의해 렌더링이 발동된 함수 컴포넌트 호출 ▶ 함수가 새로운 JSX스냅샷 반환 ▶ 반환된 스냅샷과 일치하도록 화면을 업데이트 - 중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 재귀적으로 과정 반복 - 렌더링 시 주의사항 : 동일한 입력에는 동일한 출력이! : 이전 state를 변경하면 안된다! 3. DOM에 커밋 ..

문제 상황 오히려 컴포넌트를 나눴더니 성능이 떨어진다? 이것은 렌더링이 최적화되어있지 않기 때문이다. props가 변화하는 곳만 렌더링 해주면 되는데 전부 다 렌더링하고 있는 경우 이런 현상이 발생한다. 해결법 React.memo 컴포넌트를 React.memo()로 둘러싸면 컴포넌트를 메모이징한다. props가 바뀌지 않은 컴포넌트는 새롭게 렌더링되지 않고 메모이징 된 내용을 재사용한다. 언제 사용하면 좋을까? - 새로 업데이트를 잘 시키지 않아도 되는 컴포넌트 예시 const List = React.memo(({ posts, testFunction }) => { console.log("List Component"); return ( {posts.map((post) => ( ))} ); }); useCa..

📌 프레임워크 vs 라이브러리 프레임워크 : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 (Vue.js와 Angular는 프레임워크.) 라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것 프레임워크 ⊃ 라이브러리 여러개 📌 React : 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리 (라우팅(페이지 이동), 상태 관리, 테스트 등은 다른 라이브러리를 사용해서 react에서 가능하게 하는 것이다!) 장점 1. 상대적으로 배우기 쉬운 라이브러리 2. 여러 기능들을 위해 만들어져 있는 라이브러리 환경 3. 많은 기업들의 사용으로 검증됨 📌 React 컴포넌트 리액트로 이루어진 앱을 이루는 최소 단위. 여러 컴포넌트가 모여 웹 앱이 만들어진다. ex) 검색 컴포넌트, 포스트 컴포넌트,..