코드노트

어떻게 보면 마지막 파이널 프로젝트를 위해 부트캠프를 시작한것인지도 모르겠다. 부트캠프를 통해서 협업을 경험하기위해 온것인 만큼, 기업과의 연계를 통해 실제 현업에서 어떻게 프로세스가 진행되고 실제 기획부터 참여하며 협업을 통한 경험을 얻고 싶었다. 결과적으로는 협업을 하기는 했지만 정말 매운맛 프로젝트 경험을 하게 되었다. 담당 멘토님 또한 현업에 가게 되더라도 이정도로 매운맛을 보지는 않을것이니 걱정하지마라고 하셨다... 그만큼 열악한 상황에서 우리들은 큰 사건사고없이 프로젝트를 마무리할 수 있었다. 이번 프로젝트에서도 팀장을 하게 되었다. 일정 조율 및 프로젝트 진행을 하면서도 부족한 점들이 많이 있었지만 1인분이상을 해주며 마무리까지 완주한 우리 프론트엔드 팀들에게 박수👏🏻를 쳐주고 싶다. 특히 ..

이번 팀 프로젝트에서 리액트쿼리를 사용하고있다. 팀프로젝트를 하면서 공통된 로직들을 줄이는게 가장 좋다고 생각이 들었고, 로직구현이 완료되고 API 연동 작업을 하면서 에러핸들링에 있어서 팀원들끼리 상의를 하여 나온 공통 에러 핸들링! 공통 에러 핸들링을 구현하면서 만난 문제들 1. trt catch를 사용하면 useMutation에서 onSuccess에서 에러가 잡힌다. 2. useQuery에서는 onSuccess, onError를 사용할 수 없다. - 공식문서에서 나오길 무한루프이슈때문에 더 이상 사용할 수 없다고 한다...ㅜㅜ 우리는 axios를 사용하면서 then이 아닌 try catch를 사용하기로 컨벤션을 정하였고, 에러핸들링을 하면서 문제들이 생겼다. 그렇게 구글링을 했지만 try catch..

이번 프로젝트에서 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)을 받으며, 두번째 인자인 배열의 요소의 값이 업데이트 될 때만 콜백 함수를..