1. App Router Next.js 13 이상은 App Router를 지원한다. src/app 폴더 아래에 원하는 경로에 해당하는 폴더를 생성하면 URL의 Path가 된다. 이때 폴더 안에는 반드시 page.tsx 컴포넌트가 존재해야 한다. 이점을 이용해서 VSCODE에서 라우터 정보를 한눈에 확인할 수 있다. App Router 방식은 폴더가 경로가 되기 때문에 별도의 라우터 코드가 존재하지 않는다. 이 점은 매우 편리하지만 프로젝트의 규모가 커지면 라우터를 한눈에 확인하기가 어렵다. 2. 라우터 한눈에 보기 VSCODE에서 Ctrl + p 키를 누르면 상단에 검색창이 활성화된다. page를 입력하면 [그림 1]과 같이 라우터 정보를 한눈에 확인 가능하다. 프로젝트의 크기가 커질수록 라우터가 복잡해..

1. OAuth가 아닌 자체 인증 인가 로그인 기능을 구현하고 싶은데...? 소셜로그인 기능을 활용하는 OAuth가 아닌 자체적으로 인증하고 인가하는 로그인 기능을 구현하고 싶었다. NextAuth는 OAuth 뿐만 아니라 Credentials라는 기능을 제공해 자체적인 인증, 인가도 구현할 수 있다. 그런데 App Router에 적용하는 방법에 대한 자료는-아직까지는-잘 보이지 않았다. 그러다가 아주 유용한 튜토리얼을 발견하게 되었다. 2. App Router에서 NextAuth Credentials를 이용한 자체 인증 인가 로그인 구현 아래 링크는 App Router에서 NextAuth를 이용한 로그인 구현 튜토리얼 1편이다. NextAuth 사용법 1편 - Setup, Credentials : ht..

이 내용은 유튜버 제로초님의 Next.js 13 App Router를 이용한 X.com 클론코딩 동영상 강의(2023년) 내용을 실습하면서-나름대로-정리한 글이다. 1. Next.js 장점 권한 설정을 App Router 미들웨어로 쉽게 할 수 있게 되었다. CSR의 경우 클라이언트에서 자바스크립트 코드를 다운로드하여야 한다는 측면에서 성능상 불리할 수 있다. 반면 SSR은 서버에서 완성된 html을 보내주기 때문에 유리한 성능을 낼 수 있다. 하지만 그만큼 서버 부담이 증가하기 때문에 Next.js에서 캐시를 적극적으로 활용한다. 2. 클론코딩 2.1. 클론코딩의 장점 우수한 서비스를 소스로 만드는 것을 경험할 수 있다. 정말 귀찮아서 안하고 싶은 기능을 핑계 대지 않고 경험할 수 있다. 하기 싫어도 ..

1. 이미지 파일을 저장하려고 하는데... mind-ar 라이브러리를 이용해 증강 현실 콘텐츠를 제공하는 프로젝트를 개발하고 있다. 타깃 이미지를 사용자 단말기의 카메라로 스캔하면 3D 모델 캐릭터가 렌더링 되어야 한다. 타깃 이미지는 사용자 단말기의 카메라로 촬영도 가능하지만 단말기의 저장소에 있는 이미지를 업로드도 가능하도록 구현하고 있다. Node.js에서 파일을 업로드할 때 multer라는 라이브러리를 사용했었다. Next.js 13의 App Router로 프로젝트를 진행하고 있는데 여기에서도 multer를 사용해야지라고 생각하고 시도했는데 Route Handlers를 이용한 API에서는 express의 라우터 설정 방법과 달라 코드의 변경이 필요했다. 2. fs.writeFile을 이용해-외부 ..

이 포스팅은 인프런의 "[손에 익는 Next.js] 공식 문서 훑어보기"를 학습하면서 필요한 내용을 정리한 것이다. 이 강의는 Next.js 13 버전에 대한 것으로서 새로운 라우팅 시스템인 App Router,  서버 컴포넌트(Server Component), 데이터 페칭(Data Fetching), 캐싱(Caching) 그리고 재검증(Revalidating)을 다룬다.1. 문제 해결 과정에서 탄생JavaScript > 복잡한 요구사항, 다양해진 브라우저의 종류 > jQuery > UI 요소들에 사용되는 데이터 관리 어려움 > AngularJS > 양방향 데이터 바인딩이 효과적이었지만 프로젝트가 크고 복잡할수록 복잡도가 급격하게 증가 > React.js > 단반향 바인딩으로 복잡한 문제 해결했지만 CS..

이 글은 2023년 웹 개발교육 WEB TECH SEMINAR의 강의를 학습하고-개인적으로 중요하다고 생각한 부분을-정리한 내용이다. 1. Next.js 개발 환경 구축하기(1주차) 😉 1주차 강의 링크 1.1. a태그와 SPA a태그는 기본적으로 페이지를 새로고침하기 때문에 SPA의 이점을 살릴 수 없다. 따라서 a태그 대신 Link를 이용하면 된다. 😉 a태그가 페이지를 새로고침하는 것을 확인하는 방법: 콘솔에서 로그 찍은 상태에서 a태그 클릭, 로그가 사라지면 페이지가 변경된 것임을 알 수 있다. 😉 vscode에서 ul, li 태그 자동 생성 : ul>li 1.2. JSX JavaScript + XML XML 안에 {}로 자바스크립트 표현식을 작성할 수 있다. 1.3. 천 단위 구분 기호 cons..

1. multer로 삽집;;; node.js로 서버를 구축할 때 파일 저장 라이브러리로 multer를 이용했었다. 이번에도 react-camera-pro 라이브러리를 이용해 캡처된 이미지를 jpg 형식으로 저장할 때 multer를 이용해야겠다고 생각하다 무지하게 삽집했다! react-camera-pro 라이브러리를 Next.js App Router를 이용한 프로젝트에 적용하여 애플리케이션을 만들고 있다. src/app/route.js 파일을 생성하고 jpg 이미지를 public/uploads 폴더에 저장하는 POST API를 구현하였다. 이때 multer를 사용했는데 이미지 저장에 실패하는 현상에서 빠져버렸다. 2. base64 인코딩 데이터 jpg 저장은 fs로~ 2.1. base64 인코딩 데이터를 ..