코드노트

이번 프로젝트에서 Next.js를 사용하기로 했다. Next를 사용하기로 한 이유는?- 현재 프로젝트는 생각보다 규모가 크다. 페이지도 많다. 간편하게 사용할 수 있는 next 라우팅을 사용하기로 했다. - SEO 최적화, 프론트엔드에서 중요하게 작용하는! 메타데이터를 쉽게 설정할 수 있고, 페이지별로 지정할 수 있기 때문에 안쓸이유가 없었다. - 리액트세계에만 있었던 사람이라면 Next세계로 들어오는 순간 다양한 렌더링 방식에서도 감탄을 하게 되는거 같다. 초기에 긴 로딩시간이 해결되지 않았다면 정적 파일을 제공하여 사이트의 성능도 높이고 로딩 속도도 높일 수 있다. - 프레임워크임에도 React 기반으로 어려움없이 사용할 수 있다. 그외 등등... 아무튼! 이번 글에 주제인 React-Query를 사..

Static Routing - 정적 라우팅- 정해진 폴더명에 맡게 path값이 결정app ㄴ 폴더명 ㄴ page.tsx // 페이지 명으로 폴더안에 page이름으로 만든다. ㄴ layout.tsx // 레이아웃 navbar 설정- navbar는 현재 같은 경로에 나타난다.app ㄴ 폴더명 ㄴ page.tsx // 페이지 명으로 폴더안에 page이름으로 만든다. ㄴ layout.tsx // 중첩 레이아웃 navbar 설정 ㄴ layout.tsx // 최상위 navbar- 중첩으로 나오게하려면 product/pageName 으로 진행되며, 중첩 폴더 페이지 안에 layout을 만들어줘야한다. function ProductsLayout({ children }: { children: React.ReactNode..

Next.js - 웹 어플리케이션을 만들기 위한 프레임워크 * 리액트는 자바스크립트를 이용하여 UI를 만드는 라이브러리 (Single Page Application, Cleant Side Rendering) - 리액트를 기반으로한 프레임워크 (리액트로 웹앱을 개발하는데 리액트로만으로는 힘든 다른 많은 것들을 가능하게 해 준다.) - by Vercel - Server-Side Rendering, Static Site Generation 그럼 라이브러리와 프레임워크는 무엇이 다를까? - 라이브러리 : 특정한 문제를 해결하기 위한 툴( 상태관리 툴, Routing, UI ) - 프레임워크 : 정해진 골격안에서 룰에 맞춰 코드를 작성해야 한다. 다양한 솔루션들이 정해져 있다. Next.js의 6가지 원칙 - 복..

개인프로젝트 이후 이번 프로젝트는 2023.05.01 ~ 2023.05.15 2주간 진행했다. 이번 팀프로젝트는 프론트엔드와 백엔드가 같이하는 프로젝트였다. 개인프로젝트 회고는 추후에 따로 남기도록해야겠다..리팩토링도 진행해야하는데 시간이 부족하다.. 이번 프로젝트도 팀장을하게되었다. 부족하지만 잘따라와준 팀원들 너무 고생했다.. GitHub - kjungit/smash-teams-FE Contribute to kjungit/smash-teams-FE development by creating an account on GitHub. github.com 백엔드와 협업은 처음이였고. 생각했었던것만큼 쉽지않았던것 같다. 처음이기도 했지만 기획 디자인부터 시작해서 처음부터 같이 시작하다보니 백엔드가 구현되고나서..

리액트를 하면서 항상 고민하게되는 부분은 상태관리인거 같다. 이번 팀 프로젝트를 진행하면서 리덕스를 사용하지않고 ReactQuery와 Zustand를 통해 상태관리를 하기로 하였다. 두 상태관리 라이브러리의 차이와 목적에 대해서 정리해보려고 한다. 프론트엔드에서 상태관리에 있어서 가장 처음 만나게된건 리덕스였다. 리덕스를 하게되면서 전역관리를 알게되고 redux-toolkit, redux-saga, redux-thunk 등등 미들웨어도 사용했다. 리액트 상태관리는 리덕스? - 컴포넌트끼리 상태값을 직접 소통하게된다면 컴포넌트 재사용에 있어서도 좋지 않으며, 불필요한 리렌더링이 발생하거나 코드들도 복잡해지게된다. - 리덕스로 상태관리를 할때 장점도 있었지만 단점들이 있었다. 먼저 리덕스에 대해서 정리해보자..

JS에서 try/catch를 사용한 것 처럼 리액트에서 에러를 다루는 ErrorBoundary를 사용해보려고 한다. class문법으로 생긴걸 보고 정이 가지 않았지만.. 왜 ErrorBoundary를 사용해야할까? try/catch - 코드 블록 내에서 발생하는 오류를 처리한다. - 이벤트 핸들러, 비동기 코드, ssr 등등에서 try/catch를 사용한다. ErrorBoundary - 우리는 React를 통하여 컴포넌트를 사용하여 구현한다. 여기서 컴포넌트중 하나가 에러가 발생하게 되면? 한곳에서 발생하게 되는 에러때문에 App은 멈추게 될것이다. - try/catch를 사용했던것처럼 리액트에서는 Error Boundary를 통해서 에러를 핸들링 할 수 있다. - 쉽게말하면 렌더링 또는 하위 구성 요소..

타입스크립트 열거형 - 의미있는 상수 자료를 정의할 수 있다! (문서화 시킬 수 있다.) - 키를 값에 할당하며 순서가 없는 집합이자 자료구조이다. - enum 키워드 + PascalCase 를 조합하여 생성한다. - 계산된 값을 사용할 수 있다. -> 타입스크립트가 알아서 추론한다. 순자형 열거 interface처럼 할당없이 객체를 선언하는것처럼 만들 수 있다. - Gold에 100을 주고 컴파일된 타입스크립트를 보면 값을 주지 않은 Silver, Bronze도 101, 102의 값을 가지고 있는걸 볼 수 있다. - interface는 값으로 사용할 수 없지만 enum은 값으로 사용이 가능하다. console.log를 찍어보면 객체가 나온걸 볼 수 있다. - 그 외에도 객체처럼 사용이 가능하다. - 아..

useMemo가 아니라 React.memo? memo는 useMemo만 있는게 아니였나.. 했지만 React.memo도 있었다.. 쉽게말하면 불필요한 컴포넌트 렌더링을 방지하는 훅! 그럼 useMemo와는 어떻게 다를까? React.memo와 useMemo, useCallback을 모두 정리해보려고 한다. useMemo const value = useMemo(() => { return 함수() }, [item]) ------------------------ const value = useMemo(() => { return 함수() }, []) - 첫 번째 인자는 콜백함수를 받는다. 두번 째 인자는 의존성 배열(Dependency)을 받으며, 두번째 인자인 배열의 요소의 값이 업데이트 될 때만 콜백 함수를..

useReducer - useState처럼 State를 생성하고 관리할 수 있는 도구이다. - useState와 달리 여러개의 복잡한 상태관리가 필요할 때 사용하자 - 유지보수도 편하다! useState를 통하는 상태 관리... 여러 핸들러를 하나의 함수로 사용할 수 있다. 서로 연관되어 있는 복잡한 상태들을 하나의 객체로 관리할 수 있다. - 1개의 요소에서 여러가지 상태변화들을 관리한다면 useReducer를 사용하자 - 다른 상태값에 의존하여 상태값을 변경하는 경우에도 useReducer를 사용 하자 / 리덕스를 사용하자 const [state, dispatch] = useReducer(reducer, initialState); const [state, dispatch] = useReducer(re..

자바스크립트에서도 반복되는 로직들을 함수로 만들어서 사용했듯이 리액트에서도 컴포넌트 단위로 만들다보면 반복되는 로직이 발생한다. input Validation 같은 예를 볼 수 있을 것 같다. 이번에 진행중인 프로젝트중에서 form control 중에서 컴포넌트 안에 사용되는 함수가 많다보니 코드가 너무 길어졌다. 관련하여 custom hook를 적용해보는걸 기록해보려고 한다. 리액트 공식문서에도 form관련 라이브러리를 보여주지만 사용하는 값들을 반환해주는것들이 비슷하다보니 이해하고 넘어가면 도움이 될것 같다. 사용하는 방법은 간단하다. function use만들이름 () { // ... } - use를 앞에 붙여주고 함수이름을 만들면 리액트훅처럼 사용할 수 있다. Custom Hooks 사용전 코드 ..