⚙️ Next 블로그 개발일지 ⚙️
1.Next.js 블로그 개발하기 - 0 (구상)
CSR 블로그 개발일지CSR블로그를 Next.js로 다시 만들것이다.목표는 다음과 같다.Next.js로 다시 만드려는 가장 큰 이유이다.React는 SPA(Single Page Application)로 동작하기 때문에 검색 엔진 최적화가 어렵다. 그렇기 때문에 Next
2.Next.js 블로그 개발하기 - 1 (SSR & SEO)
SSR Next.js는 SSR을 쉽게 구현할 수 있는 프레임워크다. Next.js에서 SSR을 구현하기 위해서는 다음과 같은 작업이 필요하다. 라우팅 파일(pages 폴더) pages 폴더는 Next.js에서 라우팅을 설정하는 곳이다. pages 폴더에 파일을 생성하
3.Next.js 블로그 개발하기 - 2 (컬러테마)
컬러테마는 Chakra UI의 extendTheme를 이용할것이다. header에서 색상을 변경하는 컴포넌트를 만들어준다. LightColor,DarkColor,HeaderBackgroundColor를 리턴하는 함수를 만들어서 컬러테마가 필요한 컴포넌트에 useEf
4.Next.js 블로그 개발하기 - 3 (모바일 화면 구현)
useMediaQuery 모바일 컴포넌트를 구현하는 방법은 여러가지 있다. 나는 Chakra UI의 useMediaQuery를 이용하여 모바일 뷰인지 아닌지를 판단하여 화면에 맞는 컴포넌트를 렌더링해주는 방법을 선택했다. 우선, useMediaQuery hook을 i
5.Next.js 블로그 개발하기 - 4 (로딩 컴포넌트 구현)
Chakra UI를 이용하여 로딩 컴포넌트를 구현할것이다.useMediaQuery 훅을 사용하여 모바일 화면에서는 로딩 아이콘을 오른쪽 상단, 데스크톱 화면에서는 오른쪽 하단에 보여주도록 구현한다.로딩 아이콘은 Spinner 컴포넌트를 사용하여 구현하였다.zIndex를
6.Next.js 블로그 개발하기 - 5 (배포 후 문제점 수정)
배포 후 문제점 확인 내 블로그 사이트를 Vercel로 배포해보고 여러가지를 고민해보았고, 여러가지 문제들을 마주했다. 내가 사용자라면? 모바일 UI가 불편하다. 모바일 페이지 나는 잘 안쓰겠지만 개발자라면 만들어줘야지~ 라는 나쁜 마음으로 만든 화면이기에 당연히 사
7.Next.js 블로그 개발하기 - 6 (END)
느낀점 Next.js는 정말 좋은 것 같다. React에 SSR을 구현하는게 정말 대단하게 느껴진다. Next.js의 appDirectory가 더 안정화되고 더 많이 사용되었으면 한다. Nested Layout이나 app 폴더의 라우팅 방식이 너무 마음에 들었지만 배포
8.Next.js 블로그 개발하기 - 7 (페이징)
페이지 진입 시 모든 노트 데이터를 불러와 화면에 보여줬기 때문에 로딩 속도가 느려지는 문제가 발생했다.이 문제를 해결하기 위해 페이징(Paging) 기능을 구현해야 했다. 페이징 기능은 데이터를 일정한 크기로 나누어서 특정 페이지에서 해당하는 데이터만 가져오는 방식으
9.Next.js 블로그 개발하기 - 8 (최적화)
블로그 에서 이미지 파일을 사용할 때, 기존에는 Chakra UI의 Image 컴포넌트에 CSS 스타일링을 직접 해주었었다. 그러나 이미지 파일이 로딩에 가장 많은 시간이 소요되는 것을 깨달았고, lazyLoading과 이미지 최적화를 위해 next-image로 변경하