본문 바로가기

전체 글102

[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.
개인프로젝트 포트폴리오 사이트 제작 - 기획 개인프로젝트로 포트폴리오 사이트 제작을 하며 해보고 싶었던 개발을 마음껏 해보기로 했다! 2주 2023.06.01 ~ 2023.06.14 1. 스크롤링으로 정보를 세로로 쭉 볼 수 있는 사이트 레이아웃 구현 2. 상단 탭 Home, About, Skills, Project, Contact, Blog -> 각각 클릭 시 스크롤 이동 + smooth 애니메이션 3. 리스트 형식 3가지로 구현하기 (캐러셀 / 모달 등) 4. Next.js 적용하기 https://www.freecodecamp.org/news/15-web-developer-portfolios-to-inspire-you-137fb1743cae/ 15 Web Developer Portfolios to Inspire You One of the to.. 2023. 5. 30.

티스토리툴바