명절연휴동안 포폴을 만들어서 배포까지 하기로 계획을 세웠다.
원래 주말동안에는 웹소켓을 공부해보려고 했는데...
포폴은 못참지
사실 포트폴리오만들기 스터디를 들어가서 포트폴리오를 만들었다.
문제는... 구글 프레젠테이션을 사용했다는것.
나 개발자인데? 싶은 생각이 있어서 구글 프레젠테이션은 그냥 figma로 목업 만든다고 생각하고 만들었다.
그리고... 한번 빠져서 기대하지 않았는데 희은님(코드스테이츠)께 피드백을 받을 수 있었다!! 그때 그냥 언급했는데 그럼 명절동안 해오라고 기다리겠다고 하셔서...^_^ 울며겨자먹기로 프리온보딩 끝나자마자 프로젝트를 진행하게 되었다.
이좋은걸 나혼자할수 없지
같이 개발스터디 했던 분들께 모각코 하자고 해서 모집을 했는데 한분 오셨지만
그래도 간만에 만나서 수다도 떨고 Next.js 공부하면서 프로젝트 진행중이다.
Why Next.js?
급하게 해야하는데 왜 넥스트를 하느냐면
서버사이드 렌더링을 노리고 있기 때문. 어떻게든 개발자를 구인하는 분께 노출이 되고싶다...
그리고 구인공고에서 빠지지 않고 올라와있는 라이브러리이기도 하고.
Next typescript는 정말 기본으로 가지고 가야하는 것 같다.
Next.js 홈페이지와 깃허브를 찾아보면서 진행중이다.
지금까지는 ts도 세팅해주고 eslint도 세팅해주어서 아주 편하구나 싶다.
그리고 react-router-dom 설치할필요없이 next/link 쓰면 되고. 라우팅이 아주 간단하다.
이미지같은경우도 public 폴더를 탐색해서 그 안의 이미지를 렌더링해준다. 경로를 길게 입력할 필요가 없음. public/img/img.jpg 이렇게 하면 엑박이 뜨고 img/img.jpg 이렇게 하면 넥스트가 이미지를 찾아준다.
처음에 images/public/img.webp 이런식으로 폴더를 따로 만들어서 했었는데 이렇게 해도 마찬가지로 'img.webp'만 입력해주면 찾는다. public 폴더를 찾는거구나 싶었음. 그리고 priority 설정도 할 수 있음.
Why Typescript?
타스에 입문하고 any를 남발하며 리팩토링만 해봤는데 처음부터 타입스크립트로 개발을 진행해보고싶었다.
리팩토링하면서 타입스크립트를 도입하는거랑 처음부터 세팅하는거랑 어떻게 다른지 궁금해서.
외부 데이터 가져오려면: Headless CMS
head없이 body만 있어서 headless인 것 같다.
headless CMS를 사용하면 모든 기기에서 표시할 수 있도록 API를 통해 액세스가 가능하다고 한다.
그렇다면 노션이 headless CMS인가 찾아보니 맞다고한다.
정적파일 읽도록 하기
1. .md파일 작성해서 작업
1-1. gray-matter : 마크다운 파일의 메타데이터를 분석
npm install gray-matter1-2. .md 작성
최상위에 posts 등 원하는 이름의 폴더를 만들고 .md파일을 작성한다.
필자는 포폴만들거니까 post는 좀 아닌것같아서 articles로 만듦.1-3. 파일 시스템 읽기 위한 함수 작성
Next.js 홈페이지에 잘 나와있음. 복붙하면 될 것 같다.
근데 나는 .md를 매번 만들기는 좀 불편하기도 하고... 별로인 것 같아서 다른방법을 써보려고 함.
2. 노션 API 활용
일단 노션에 사용할 데이터가 있다고 가정하겠다.
- API 키를 아래 페이지에서 얻는다.
https://www.notion.so/my-integrations - Create new integration 한다.
폼을 작성해주고 제출하면 API 키를 얻을 수 있다. - 데이터로 사용할 노션 페이지에서 ...을 누르고
add connections > integration을 찾아서 클릭한다.
이제 api 문서를 보면서 사용하면 된당!!
<- 와 안된다~~ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 금방 할 줄 알았더니 하루정도 헤맨 것 같다.
노션 api문서대로 아무리 해도 안되는것....ㅠ
만난 에러
1. Unhandled Runtime Error
fetch한 데이터를 바로 사용하지 않고 useState+useEffect 조합으로 사용하니까 해결
2. env 변수 undefined
이건... 어떻게 해결되었는지 잘 모르겠다.
2-1. 원래 env 변수를 콘솔로 찍으려고 해도 undefined로 나오는 게 정상이라고 함.
서버에서만 사용하는 변수이기 때문이라는데... 서버에서도 사용하고 프론트에서도 사용하려면 REACT_APP처럼 키워드를 붙여야한다.
NEXT_PUBLIC_이렇게 앞에 붙여주면 콘솔로 찍었을때 나온다.
근데 이게 문제가 아닌 것 같기도 하고 변수이름이 투머치하게 길어지고 해서 바로 파기함
2-2. environment.d.ts파일을 만들어주었다.
declare global {
namespace NodeJS {
interface ProcessEnv {
GITHUB_AUTH_TOKEN: string;
NODE_ENV: "development" | "production";
PORT?: string;
PWD: string;
}
}
}
export {};2-3. next.config.js파일에 코드 추가
env: {
BASE_URL: process.env.BASE_URL,
},2-4. dotenv 다운로드
이게 env 변수를 읽도록 한다길래 다운로드했음.
아 이걸 찾아볼 생각을 못했네...
대략 이렇게 사용하면 된다고 한다.
import dotenv from 'dotenv'
dotenv.config();3. cors 에러
next에서 proxy 설정하는 방법이라고 함.
https://nextjs.org/docs/api-reference/next.config.js/rewrites
async rewrites() {
return [
{
source: '/:path*',
destination: `https://api.notion.com/v1/databases/:path*`,
},
];4. 노션 api 문서대로 아무리 해도 안됨
그래서 찾아봐도 전버전 노션 api 사용해서 한거밖에 안보임.
전버전과 현버전 차이가 굉장히 많이 있는 것 같다... 🤣 api 문서의 예시부터 다름... 후 혼란스러웠다
최후의 보루로 유튜브를 찾아보았다... 그리고 한달전에 업로드된 영상을 찾았음!
next + notion + typescript 조합임 심지어!!
사용자정의 페이지 확장
https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions
pages/api/ 처럼
pages/_app.js
middleware.js
pages/_document.js
이런식으로 정해진 네이밍이 있다.
디폴트 App을 오버라이드하려면 위의 _app파일을 만들면 된다.
참고: 타입스크립트
//_app.tsx import { AppProps } from "next/app"; export default function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} /> }
