프로젝트 - 선행 학습, 배운점, 어려웠던점, 회고
1.React Hook
강사님이 강의에서 여러 Hooks를 사용함에 있어 Hooks 별로 어떤 기능을 가지고 있는지 알지 못해 강의 내용을 이해하지 못하고 넘어가는 경우가 많았음웹 사이트를 제작함에 있어 Hook에 대해서 제대로 알아야 상황에 맞게 적절한 Hook을 사용할 수 있기 때문에Ho
2.프로그래머스 데브코스 프론트엔드 팀 프로젝트 회고
1월 4일부터 20일 까지 언성 히어로 프로젝트를 진행했다. 길지 않은 기간이였지만 팀원들끼리 밤을 새고 힘든 시간을 보내다보니 막상 이 기간이 짧게 느껴지지는 않았다. 이번 프로젝트를 통해 많은 것을 배웠고 고생한 팀원들에게 감사하다라는 말로 글을 시작해보려고 한다.
3.JS 비동기 역사
비동기 작업을 위해 Promise, async, await을 자주 사용하는데 이 기술들에 대한 기본 개념 숙지와 더불어 역사라는 단어가 나온 만큼 왜 기술에 있어 변화가 있어야 하는지 알고 싶었다.특정 기술을 도입한 이유를 안다는 것은 이전 기술의 개념과 문제점, 현재
4.CSR, SSR 및 SPA, MPA
https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/ https://tech.weperson.com/wedev/frontend/csr-ssr-spa-mpa-
5.React Query
https://tanstack.com/query/v4/docs/react/reference/useQuery https://abangpa1ace.tistory.com/m/263 https://techblog.woowahan.com/6339/ => 우아한 형제들 Cl
6.Next.js 프로젝트 초기 세팅(CNA 부터 폴더 생성까지, With TS)
팀 프로젝트를 진행하면서 초기세팅을 담당하게 되었다. 프로젝트의 세팅과 전체적인 부분을 다뤄야 한다는 생각에 두려움이 있었지만 다른 분들의 블로그 및 이전 프로젝트에서 초기세팅 관련 github commit 내역을 참고해 어렵지 않게 할 수 있었다. 해당 글은 next
7.Next.js 프로젝트 Vercel로 배포 및 CI/CD 구축
현재 프로젝트를 진행하기 전 2번의 협업 시에 배포 및 CI/CD 작업을 다른 분이 해주셨다. 개인적으로 배포와 CI/CD 구축 작업을 경험해보고 싶어서 내가 해보겠다고 팀원들에게 이야기하고 작업을 진행했다.🔎 어떤 배포 서비스를 사용해야 할까??Next.js로 구축
8.Next.js + TanStack Query로 페이지 이동 시 데이터 전달하기
SP3가 끝나갈 때 쯤 프론트, 백엔드 전체 회의를 하던 중에 독서 모임 수정페이지 제작이 필요할 것 같다는 의견이 나왔다. 해당 페이지를 누가 제작할 것 인지 회의를 했고 다른 팀원 분들의 잔여 작업이 있는 것 같아서 내가 맡기로 했다.처음에는 독서 모임 상세 페이지
9.Next.js + TS 프로젝트에 Google Analytics 이식하기
사용자 요구사항을 고려해 웹 사이트를 개발했지만 사용자의 Needs를 충족시키지 못하면 운영 및 유지/보수의 필요성을 느끼지 못할 것이다. 필자는 위에서 언급한 Needs를 충족시키기 위해서는 사용자 수, 웹 사이트에 머무르는 시간, 이탈률과 같은 데이터가 필요하다고
10.TS에서 객체 순회 시 Type Error 해결하는 방법
독서 모임 개설 및 수정 페이지에서 Form 제작을 맡게 되었다. 모든 정보가 입력이 되어야만 submit 버튼이 활성화 되도록 해야했다. 그러기 위해서는 입력 데이터 객체 순회를 통해 모든 데이터를 check 해야했는데 그 과정에서 발생한 Error 및 해결 방법을
11.Infinity Scroll 리스트 아이템 데이터 수정 안되는 문제(Feat. useInfiniteQuery, fetchNextPage, hasNextPage)
독서 모임 조회페이지를 무한 스크롤로 구현한 상태였다. 독서 모임 수정 페이지를 작업하다 독서 모임 조회페이지에서 마지막 아이템이 render 되는 위치(스크롤 최하단)의 아이템들은 수정이 되지 않는 문제를 발견했다. 어떤 문제가 발생했고 그 문제를 어떻게 해결하였는지
12.비 로그인 유저가 유저 전용페이지에 url을 통해 접근 시 막기(Next.js 프로젝트)
소셜 로그인을 구현한 후에 로그인 유무에 따라 사용자의 볼 수 있는 화면을 허용 및 제한하는 작업을 진행하기로 했다. 로그인 Modal Redner 제작, 비 로그인 유저 url 접근 금지 작업이 있었고 오늘은 비 로그인 유저 url 접근 금지 작업을 왜 진행했고 어떻
13.[Next.js] 프로젝트에서 성능 최적화 하기(feat. LCP 소요시간 개선)
웹 사이트 MVP 제작을 완료한 후 리팩토링 및 최적화 작업을 진행했다. 성능, 검색 엔진, 렌더링 최적화 등이 있고 가장 먼저 성능 최적화를 도전해보기로 했다. 해당 작업을 진행한 이유와 결과물을 포스팅 하려한다!해당 블로그에서 언급한"월마트(Walmart)는 페이지
14.[Next.js] 검색 페이지에서 발생한 오류 해결
담당 페이지였던 도서 검색 페이지를 제작 후 다양한 상황에서 사용해보며 오류들과 사용자 입장에서 불편할 수 있는 것들을 찾는 시간을 가졌다. 어떤 문제가 발생하였고 어떻게 해결하였는지 포스팅 하려한다! 다른 페이지 갔다 왔을 때 input에 입력한 검색어 유지안됨검색
15.useInfiniteQuery로 무한 스크롤 구현하기(feat. TanStack Query)
도서 검색 페이지에서 특정 keyword로 검색 시 keyword와 연관성이 있는 도서가 render 되도록 구현해야 했다. 더 나아가 무한 스크롤을 기능을 통해 스크롤을 내릴 때 마다 새로운 도서가 render 되도록해야 했다. 오늘은 useInfinityQuery를
16.다락책방 팀 프로젝트 회고
5월부터 7월까지 2달간 팀 프로젝트를 진행하였다. 기술 및 커뮤니케이션과 관련해 더 성장하고 싶었고 개인적으로 이번 프로젝트를 통해 구현하고 싶었던 기능을 구현함으로써 FE 개발자로 다양한 경험과 지식을 얻고 싶었다. 👉 웹 사이트 소개다락책방은 독서를 좋아하는 사