일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 자바스크립트 문제풀이
- stack문제
- leetcode문제풀이
- 프론트엔드
- 자바스크립트 문제
- NPM
- leetcode
- 타입스크립트
- 리액트
- 자바스크립트코딩테스트
- Next
- JS
- HTML
- 자바스크립트 알고리즘
- 자바스크립트 알고리즘 문제
- JavaScript
- 자바스크립트 연결리스트
- lodash
- 자바스크립트
- 객체 프로퍼티
- 제로베이스
- 자바스크립트 문제 풀이
- 프로그래머스
- Next.js13
- 알고리즘문제풀이
- Baekjoon
- 리액트쿼리
- next13
- CSS
- til
- Today
- Total
목록Code note (218)
코드노트
LocalStorage, sessionStorage는 사용해봤지만 CacheStorage는 사용해볼 경험이 없었다. 현재 원티드 프리온보딩 인턴십에 참여하면서 매주 과제를 하고 있는데 4주차 과제에서 라이브러리 없이 API호출별로 로컬에 캐싱을 구현하는게 구현 목표중에 있었다. 검색을 할때마다 검색어에 맞는 요청URL별로 응답값을 캐싱하여야 한다. 지금까지 여러 프로젝트를 하면서 axios, react-query를 사용하면서 캐싱이 되도록 사용했었는데 라이브러리 없이...? 방법을 찾던 중 CacheStorage를 사용하여서 캐싱시키는 방법을 사용하기로 했다. 여기서 알고 넘어가야하는 것 HTTP 캐싱 - 이전에 가져온 리소스들을 재사용함으로써 네트워크 트래픽을 줄여 리소스를 보여주는데 필요한 시간을 줄..
현재 진행하고 있는 사이트에서 푸터 컴포넌트를 넣었다. 모든 페이지에서 보여주지 않고 특정 페이지에서는 보여주지 않게 하고 싶었다. Next.js 13버전을 사용하고 있었고, 서버컴포넌트를 사용하려고 했지만 현재경로를 가져오려면 클라이언트 컴포넌트를 사용해야했다. 푸터는 변화가 없기 때문에 특정 페이지의 path만 얻어올 수 있으면 SSR을 사용하는게 맞다고 판단하였다. 그럼 어떻게 SSR에서 use 훅을 사용하지 않고 들고올 수 있을까? [Next 13] Server Component + Layout.tsx - Can't access the URL / Pathname · Issue #43704 · vercel/next.js Verify canary release I verified that the is..
어떻게 보면 마지막 파이널 프로젝트를 위해 부트캠프를 시작한것인지도 모르겠다. 부트캠프를 통해서 협업을 경험하기위해 온것인 만큼, 기업과의 연계를 통해 실제 현업에서 어떻게 프로세스가 진행되고 실제 기획부터 참여하며 협업을 통한 경험을 얻고 싶었다. 결과적으로는 협업을 하기는 했지만 정말 매운맛 프로젝트 경험을 하게 되었다. 담당 멘토님 또한 현업에 가게 되더라도 이정도로 매운맛을 보지는 않을것이니 걱정하지마라고 하셨다... 그만큼 열악한 상황에서 우리들은 큰 사건사고없이 프로젝트를 마무리할 수 있었다. 이번 프로젝트에서도 팀장을 하게 되었다. 일정 조율 및 프로젝트 진행을 하면서도 부족한 점들이 많이 있었지만 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를 통해서 에러를 핸들링 할 수 있다. - 쉽게말하면 렌더링 또는 하위 구성 요소..