TIL_230201_ Next.js 강의

정윤숙·2023년 2월 1일

TIL

목록 보기

93/192

내일배움캠프 4기 스파르타코딩 React B반

📒 오늘의 공부

1. 프로그래머스

Lv1. 자연수 뒤집어 배열로 만들기

풀이
1. 자연수 n을 문자열로 전환
2. 숫자로 바꾸고 마지막 숫자를 빈 배열의 첫 번째로 넣기

function solution(n) {
    var answer = [];
    let a = String(n).split("")
    for(let i=1; i<=a.length; i++){
       answer.push(+a[a.length-i])
    }
    return answer;
}

다른 풀이

숫자풀이

    var arr = [];

    do {
        arr.push(n%10);
        n = Math.floor(n/10);
    } while (n>0);

    return arr;

문자풀이

리버스가 있었다..!!

return (n+"").split("").reverse().map(v => parseInt(v));

Lv0. 특정 문자 제거하기

풀이

filter로 거르기

function solution(my_string, letter) {
  var answer = '';
  answer = my_string.split("").filter((a)=> a!==letter).join("")
  return answer;
}

다른 풀이

function solution(my_string, letter) {
    const answer = my_string.split(letter).join('')
    return answer;
}

replaceAll()

function solution(my_string, letter) {
  return my_string.replaceAll(letter, "");
}

replaceAll()
- replaceAll(pattern, replacement)
  ex. "aabbcc".replaceAll("b", "."); // 'aa..cc'
- 전역 정규식
  "aabbcc".replaceAll(/b/g, "."); ("aa..cc");
  -> 정규식으로 찾으려는 문자열은 ""대신 /로 감싸기, g=전역의 의미(global match)

2. Next.js 강의

알게 된 것

SSG(Static-Site Generation)

SSG를 원하는 페이지에 getStaticProps를 추가하면해당 페이지는 빌드할 때 렌더링된다.
getServerSideProps에서 context로 query에 접근한 것과 다르게 dynamic routes를 제공하기 위해 getStaticPaths를 사용한다.
- getStaticProps가 있는 페이지에서 한 쌍으로 작동
- getStaticProps의 return 값은 getStaticProps의 props로 전달된다.
- fallback:false - Static Path에서 제공하지 않는 페이지를 요청하면 404 error
- fallback:true - fallback 페이지를 보여주고 해당 페이지를 서버에서 생성해서 보여준다.
- fallback:blocking - SSR과 동일하게 동작. 요청에 따른 응답을 block했다가 서버에서 페이지를 생성 후 보여준다.

ISR(Incremental Static Regeneration)

쓰는 이유
- 업데이트된 내용을 다시 build하기 전까진 반영이 되지 않는다. yarn build - yarn start
getStaticProps에 revalidate 속성만 추가해주면 지정한 시간(초 단위) 이후에 업데이트된 내용이 적용된다.
revalidate: 5

문제

강의를 따라하려고 따로 json server 설치했는데 revalidate가 적용이 안 됨
- 서버 종료 후 yarn build다시 반복하는데 오류
  Could not find a production build in
  Command failed with exit code 1.

시도

npm i 하고 다시 시도
npm run build 하니 오류 메시지에 ssr파일이 export default 되지 않았다는 오류 - 이 파일 내용을 주석처리했더니 생긴 오류 같음. 다시 해제하고 yarn build하니 잘 됨..!
여전히 revalidate가 안 됨. db 내용을 수정해도 반영이 안 된다.
- db.json을 다시 실행해야 반영이 됨. 애초에 db.json 내용을 변경한 게 db.json에 바로 반영이 안 됨.
- 경고 문구
  The Fetch API is an experimental feature. This feature could change at any time

해결

package.json에 "scripts"에 강의대로
"json-server": "json-server --watch db.json --port 3001"를 추가했는데 서버 시작 명령어는
npx json-server db.json --port 3001 이걸로 했음
- 명령어를 npm run json-server로 하니 db.json 변경 내용이 revalidate에 설정한대로 2초 후에 바로 반영이 된다!!

SEO(Search Engine Optimization)

_app.js파일 및 페이지에 <Head> 컴포넌트 안에 <meta>태그 추가
-> OpenGraph사이트에서 meta tag 생성 가능
semantic tag 사용
-> header/footer/section/nav 등 알아보기 쉬운 tag

문제 및 해결

db.json을 같이 vercel에 배포하려니 fetch API 오류
db.json만 glitch에서 배포하기
- 파일의 fetch API 변경 및 배포까지 성공!

3. React Udemy 강의

React_Next.js_2

알게 된 것

getStaticProps

getStaticProps()를 쓰는 이유
- 사전에 렌더링된 페이지를 보여주기 때문에 불러온 데이터가 반영되지 않는다.
- 이를 해결하기 위해 쓰는 함수로 오직 build할 때만 실행된다.
- 이 함수의 return 값(props:{data:})을 페이지가 props로 받고 나서 페이지를 렌더링하기 때문에 받아온 데이터가 페이지에 보여진다.
- 사전 생성된 HTML 파일이 CDN에 저장되어 제공되기 때문에(캐시) 요청이 있을 때마다 데이터를 다시 만들고 fetch하는 것보다 빠르다.

getServerSideProps

페이지 요청이 있을 때마다 실행되어 revalidate 필요 없음
- 페이지 요청이 있을 때마다 사전 생성 - 모든 요청을 실행
요청이 들어오기 전엔 페이지가 생성되길 기다려야 한다.

비교

매초 데이터가 바뀐다면 getServerSideProps
매번 데이터가 바뀌는 게 아닌 authentication의 경우는 getStaticProps
request, response에 접근해야 할 때는 getServerSideProps

getStaticPaths

return에 paths로 인기있는 페이지 몇 개만 정해놓고fallback: true로 해놓으면 나머지는 요청이 있을 때 페이지를 가져와서 보여준다.

MongoDB 연결

연결된 cluster에서 Database/Connect
- Connect your application
  -> Node.js / 3.6 or later
  -> 2번의 주소 복사 후 Database Access에 있는 유저의 아이디와 비밀번호로 수정
  -> .env 활용하기
POST - pages/api/new-meetup.js
GET - index.js(최상위)
client.close()
- POST, GET이 잘 됐으면 db와 연결 끊어주기