본문 바로가기

Web dev39

Todo 앱 구현하기 1. (회원가입, 로그인) 배포링크 Gyuri's Todo App wanted-pre-onboarding-frontend-liard.vercel.app 깃허브 리포지터리 링크 GitHub - ImGyuriKim/wanted-pre-onboarding-frontend Contribute to ImGyuriKim/wanted-pre-onboarding-frontend development by creating an account on GitHub. github.com 원티드 프리온보딩 지원 과제로 Todo앱을 구현하게 되었다. 백엔드 API는 주어지는 상황이었고, API 문서를 참고하여 - 회원가입 - 로그인 - todo CRUD 이렇게 크게 3가지를 구현하는 과제였다. 먼저, 그 중 회원가입과 로그인 기능을 구현한 과정을 기록해보고.. 2023. 6. 13.
[Next.js] Next/Image로 이미지 최적화하기 더 나은 UX를 위해 프로젝트에서 이미지 로딩을 어떻게 다루는게 좋을지 궁금했다. Next.js 에서 이미지를 최적화하는 방법에는 크게 3가지가 있다. 1. lazy loading 2. 사이즈 최적화 3. layout shift 방지하기 (이 모든 걸 잘 다루고 있는 카카오 기술블로그의 글을 참고했다 - https://fe-developers.kakaoent.com/2022/220714-next-image/) Next/Image를 활용한 이미지 최적화 | 카카오엔터테인먼트 FE 기술블로그 조지영(esme) 무언갈 빠르게 좋아합니다. 그래서 변화가 빠른 FE 개발이 적성에 잘 맞습니다. fe-developers.kakaoent.com -> lazy loading은 이전에도 배웠던 개념이다. 페이지에 접근할.. 2023. 6. 2.
TMDB API 이용하여 프론트엔드 페이지네이션 구현하기 - 로직 구상 이전 무한스크롤 구현에 이어, 이번에는 데이터를 사용자가 연속하여 조회하는 다른 방식인 페이지네이션을 구현해보기로 했습니다. 무한스크롤 구현 시 사용했던 TMDB 데이터 API를 그대로 사용하였습니다. 해당 데이터는 page라는 값이 있고 한 page 당 20개의 영화 리스트를 불러오는 형태입니다. 본격적으로 코드를 작성하기에 앞서, 어떠한 로직으로 페이지네이션을 구현할 수 있는지 정리해보았습니다. 1. 한 페이지 당 20개의 영화 데이터를 4X5 형태로 보여주는 화면 구성하기. - 필요한 설정값: currentPage, totalCount, pageCount, limit currentPage: 현재 페이지 totalCount: 총 데이터의 갯수 pageCount: 화면에 나타날 페이지 갯수 limit:.. 2023. 6. 1.
[Next.js] 서버 컴포넌트 vs. 클라이언트 컴포넌트 (feat.공식문서) Next.js 프로젝트를 드디어 시작했습니다! 기본 개념들을 익힌 후, 개인 포트폴리오 사이트를 Next.js로 개발해보려고 합니다. 우선, 천천히 공식 문서를 뜯어보며 배운 개념들을 정리해보겠습니다. 1. 서버 컴포넌트 vs. 클라이언트 컴포넌트 - Next.js는 서버 사이드 렌더링을 쉽게 해주는 리액트 프레임워크입니다. 기본적으로 app 파일에 들어있는 컴포넌트들은 서버 단에서 렌더링됩니다. (= 서버 컴포넌트 by default) 그러나, 이벤트 리스너나 상태, 라이프 사이클과 관련된 이펙트들은 클라이언트 단에서 관리해주는 것이 필요합니다. 이렇게 특수하게 클라이언트에서 해야 하는 작업들이 있는 컴포넌트의 경우, 파일 최상단에 "use client" 를 입력해주어 클라이언트 컴포넌트로 관리해야 합.. 2023. 5. 31.

티스토리툴바