Dynamic Routing + Router Hook (URL masking)

이슈 내용: Next.js 환경에서 URL 및 컴포넌트 디렉토리를 설정, 라우터 설정 필요 해결 방법: 각 디렉토리 폴더 생성 및 컴포넌트 이름 설정 -> 메인 URL에서 직접 접속 가능 + router 설정으로 query 전달 & 마스킹 처리 기본적인 URL 라우팅 localhost:3000 이 기본 접속 URL이라고 가정할 때, Next.js 환경에서 제공하는 기본적인 Dynamic Routing을 설정하면, 디렉토리 및 컴포넌트 파일 이름을 작성하여 그대로 라우팅 된 URL로 접속이 가능하다. 예를 들어, 위와 같은 디렉토리 & 컴포넌트 이름을 설정한 다음, 로컬 구동 후 확인해 보면 /movies 에서는 index 의 내용이, /movies/all 에서는 all 의 내용이 그대로 출력되는 것을 확..

rewrites() - nextConfig 에서 URI 우회 & API parameter 숨기기

이슈 내용: API 접속할 때의 보안키 숨기기 & URI 표시 우회가 필요함 해결 방법: Next.js - nextConfig 부분에서 rewrites() 활용하여 API 우회 & process.env 설정하여 키 숨김 API KEY가 노출되던 파라미터 부분 index.tsx 에 설정되어 있던 부분 (태그가 존재하는 return 부분 제외) 로직은 아래와 같다. const API_KEY = "c3a6fcbe2573a7042c" // 개인정보 사유로 일부 키 삭제 const [movies, setMovies] = useState([]) useEffect(() => { (async () => { const { results } = await (await fetch(`https://api.themoviedb...

NextJS - 알아두면 좋은 지식 정리 (1)

노마드 코더의 Next.js 강의를 듣는 동안, Next.js (vs. React) 의 특징을 아래와 같이 정리해본다. create-react-app (React) create-next-app (Next.js) 프로젝트 init (폴더 생성) 커맨드 npm npx Library ? Framework? Library (기본 틀 제공, 설정은 개인의 자유) Framework (기본 세팅이 쉬우나 폴더 및 파일 경로는 고정되어 있어서 유의해야 함) CSR ? SSR? Client Side Rendering (브라우저가 유저가 보는 UI를 다 만들어줌) -> client-side JS가 모든 UI를 만듦 (HTML 에서는 빈 div 가 자리잡고, UI가 이후에 출력) cf) JS 로딩이 다 안되면 화면이 보이지..