ABBO 기술 블로그

이번 글에서는 우리의 api path 를 은닉화 할 수 있는 rewrite 에 대해 설명드리고자 합니다. next.config.js 파일에서 이전에 redirects() 를 생성했던 것과 마찬가지로, rewrites() 를 생성합니다. async rewrites() { return [ { } ] } 위에 옵션은 마찬가지로 source, destination 이 들어가게 됩니다. 이전에 프로젝트를 기본으로 만들었을 때 localhost:3000/api/hello 로 들어가게 되면 api 가 호출되는 것을 확인할 수 있었습니다. 여기는 get 방식으로 api 를 호출하여 json 의 포맷으로 가져오게 되는데, 이 부분을 은닉화해보려고 합니다. 소스가 이런 형태로 되어있다고 가정합니다. /** @type {i..

중복되는 소스를 피하기 위해 NavBars 안의 내용을 더 나누려고 합니다. components 안의 Layout.js 파일을 생성합니다. import NavBar from "./NavBars" export default function Layout({children}) { return ( {children} ) } 그리고 이 부분을 각각 about.js 와 index.js 파일안에 넣게 됩니다. 여기서 우리의 홈페이지 타이틀을 수정하기 위해 하나 더 추가할 것이 있는데요, 바로 Head 태그입니다. Head next js 에서 기본적으로 제공하는 컴포넌트로 여기에는 우리가 html 코드에서 사용할 법한 title 태그와 meta 태그, node js 에서 helmet 이라고 불리우는 보안성 향상 모듈 ..

NextJS의 특이점 중 하나인 jsx 를 사용하여 표현해보고자 합니다. 표현 방법은 간단하게 style 태그 내의 jsx 를 사용하면 됩니다. 위의 jsx 는 html에서 style 태그 내에 존재하는 항목처럼 사용이 가능하고 아래에 배치하여도 위의 태그 및 클래스명을 그대로 사용할 수 있습니다. import Link from 'next/link'; import { useRouter } from 'next/router'; export default function NavBars() { const router = useRouter(); console.log(router); return Home About ; } 링크: https://github.com/jyp90/nextjs-intro/commit/d05..

이번 글에서는 이전에 사용했던 NavBar를 꾸미는 작업을 진행하려 합니다. 먼저 NavBars.js 가 있는 디렉터리에 같은 레벨로 NavBars.module.css 를 생성해줍니다. 이 module.css 확장자는 nextjs 에서 사용하는 css 파일 형식으로 변수처럼 사용할 수 있습니다. 예를 들어 NavBars.module.css 안에 아래와 같은 내용이 있다고 해보겠습니다. .nav { display: flex; justify-content: space-between; background-color: tomato; } 이렇게 적용이 된 경우 자바스크립트 파일에서는 이와 같이 사용할 수 있습니다. import styles from "./NavBars.module.css" return 그리고 re..