4.1 처음으로 Next UI를 사용해보게 되었다 참고로 Next UI를 처음 셋팅할 때부터 약간 문제가 있었는데 공식문서에서 빼먹은 부분때문이었다 ㅠㅠ Tailwind.config.js 에서 const { nextui } = require("@nextui-org/react"); 이 한 줄을 빼먹어서 적용 안됐던 것..! ㅎㅎ 공식문서는 역시 꼼꼼히 봐야한다. 첫 번째 문제 해결 1) 상황 (next js - app router 사용 중) 그리고 Next UI 를 통해 Tabs 를 모든 페이지 레이아웃에서 헤더로서 적용시켜보려고 했다 https://nextui.org/docs/components/tabs Tabs Tabs organize content into multiple sections and al..

The not-found file is used to render UI when the notFound function is thrown within a route segment. Along with serving a custom UI, Next.js will return a 200 HTTP status code for streamed responses, and 404 for non-streamed responses. Good to know: In addition to catching expected notFound() errors, the root app/not-found.js file also handles any unmatched URLs for your whole application. This ..

0319 next.js 심화프로젝트 팀장님과 함께 프로젝트 초기 셋팅을 하면서 Next.js 프로젝트를 생성했다. 강의에서 배운건 npx create-next-app 명령어 였지만, 이후 튜터님은 yarn add 등으로 라이브러리를 설치하셨고 ㅠㅠ 이런 경우 package.lock.json 과 yarn.lock 모두 생겨서 충돌이 있지않을까 우려되었담.. (그전에 충돌이 나서 지운 적이 있었기 때문에..) 물론 이전에도 yarn create 로 할 때 yarn 에서의 문제가 있어 npx create 를 권고하셨었지만 다들 yarn 을 많이 쓰고 있기도 하고.. ! 그래서 yarn create next-app 을 해보기로 했다. 🪄 1. yarn 으로 create next-app 하는 방법 알아보기 1) ..

24.3.15 🫧 배운 Next.js의 개념을 토대로 간단히 만든 To Do List 프로젝트 기간: 3.12 ~ 3.15 인데, 사실 구현자체는 빨리 끝냈던 거 같다. (근데 그 뒤에 json-server - vercel 배포를 시도하다가 오류가 나고... localhost를 127.0.0.1로 바꿔보다가 CORS 에러를 접해서 ㅠㅠ 이를 해결해보고있는 중이다.. ) 0) 홈 메인 페이지 1) About 페이지 SSG로, (fetch 옵션 - force-cache, 혹은 설정 안해도 됨) 만들어 build 시의 데이터로 고정되어 렌더링. 회사정보에 대한 데이터를 가져와서 보여준다. (companyInfo - image, name, description) * 서버 컴포넌트이기 때문에, 바로 json-se..

3.14

Next.js 과제를 하며 SSG 렌더링으로 About 페이지를 만들어야 했다. (회사 소개 페이지) 그런데 테스트를 위해 npm run dev (yarn dev) 로 로컬 서버를 통해 확인하다가, DB 데이터 (json-server 의 db.json) 를 변경했는데 (과제에선 json-server 를 활용 - 원래 BaaS이지만 이 과제에선 임의로 DB로 삼아서 쓰고있다) 변경된 데이터가 반영되지 않았다 .. 😥 이는 SSG 렌더링 특성 상 force-cache 로 캐시가 저장되어 유지되기 때문인데, 간단히 캐시 파일 삭제하는 법을 알아보자. 저번 글에서도 정리했지만, SSG를 다시 설명해보자면 🪨 SSG (Static Site Generation) 웹 렌더링 방식은 빌드 타임때 미리 페이지를 렌더링 ..

0312 !

0311 ✍️ 🔮 Next.js 의 기본 소개 Vercel에서 React.js를 기반으로 만든, 웹 개발을 위한 프레임워크 Route Handler를 통해 백엔드를 다룰 수 있어, 풀 스택 웹 개발이 가능 + 여기서 프레임워크란? 개발자가 기능 구현에만 집중할 수 있게 필요한 모든 프로그래밍적 재원을 지원하는 '기술의 조합'으로, 별도의 셋팅을 개발자가 할 필요 없이 프레임워크가 다 알아서 해줘서 편리하게 개발할 수 있다! Ex ) Next.js, 혹은 JS기반 웹 FE SPA 프레임워크들인 Vue.js, Augular.js 등) + 이에 반해 라이브러리는 공통 기능의 모듈화가 이루어진 프로그램의 집합. 개발자의 별도 셋팅이 필요하며, 프레임워크보다 기능적으로 부족하다고 할 수 있다. 예를 들어, Rou..