[미니 프로젝트] 게시판 프로젝트 2일차

무엇을 했나

테일윈드 익히기

헤더 기본 레이아웃 잡기

OAuth 로그인 구현

로그인/로그아웃 버튼 조건부 렌더링

타입스크립트 강의 듣기

 

메인

게시판..ㅋㅋ 레이아웃 무슨일

 

계획 변경사항

메인 페이지를 글 목록이 바로 나오게 하도록 계획을 세웠는데 글 목록/글 작성/글 수정 페이지에 공통된 레이아웃을 줘야 해서 이 페이지들이 따로 하나의 폴더 안에 있는 것이 좋겠다고 생각했다. 그래서 루트 경로를 따로 만들어서 메인페이지를 간단하게 따로 만들어야 할 것 같다.

 

시행착오

default formatter를 확인하자

아침부터 테일윈드 공부하느라 정신이 혼미했는데 vscode에서 프리티어가 작동을 안 해서 너무 심각하게 화가 났다. 모든 코드가 한줄로 나와버리는.. 근데 그냥 default formatter를 설정 안 한 문제였다ㅠ_ㅠ 최소 30분은 고민했는데.. 아마 타입스크립트를 사용하면서 다시 default formatter를 설정해 줬어야 했나 보다.

 

테일윈드 config 오류

헤더를 만들어 놓았는데 갑자기 테일윈드 스타일이 날아가버려서 당황했다. 파일을 다 밀고 별 난리를 쳤는데 그냥 tailwind.config.js에 헤더가 담겨 있는 폴더가 들어가 있지 않은 문제였다. 해당 파일의 content 배열에 폴더명을 명시해야 테일윈드가 어디에 적용돼야 할지 감지해서 스타일을 적용해줄 수 있다.

 

루트 경로의 하위 라우트에 레이아웃을 주면 컨텐츠가 안 보이는 문제

각 레이아웃에는 children을 받아서 해당 라우트의 page.js내의 내용을 children 안에 받을 수 있도록 해야 한다. 따라서 레이아웃 파일들은 정해진 형식이 있다. 그냥 일반 컴포넌트처럼 정의를 하면 컨텐츠가 보이지 않고 레이아웃만 보이게 된다.

https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

 

개발 순서..?

CRUD 기능을 먼저 만들어 놓고 로그인/로그아웃 기능을 개발할지, 로그인/로그아웃을 먼저 구현해 놓고 CRUD로 가야할지 고민이 됐는데, 결론적으로는 로그인/로그아웃을 먼저 만들어야 할 것 같다. 새로 글을 작성할 때 사용자의 정보가 제공돼야 하니까.. OAuth 부분 강의를 먼저 듣고 계속해야겠다.

 

이미지 import 방법

이미지 임포트해올 때 절대경로로 하면 안되고 상대경로로 해야 하는 것 같다(확실하지는 않음..;)

 

OAuth 설정법

oAuth 오류... 최상단 .env 파일에 id, secret, url 세가지 넣어야 하고 리다이렉트 경로는 "http://localhost:3000/api/auth/callback/kakao"이런 식으로 설정.

 

OAuth provider 타입 오류

authOptions의 provider 객체의 값으로 언제나 문자열 타입을 넣어줘야 하는데 process.env.KAKAO_ID라고만 적어넣으니 타입 오류가 났다. 환경변수에 접근했는데 그것을 찾지 못해서 undefined 상태일 수도 있으므로 process.env.KAKAO_ID의 타입은 string | undefined이고, 문자열 타입만 받아야 하는데 string | undefined가 들어왔으므로 오류가 나는 것. 이런 점에서 타입스크립트가 오류를 방지해 줄 수 있는 언어라는 것을 제대로 느낄 수 있었다. 간단한 해결법으로는 non-null assertion operator(non-null 단언 연산자) '!'를 넣어서 오류를 무시해 버리는 수도 있었지만, 별도의 환경변수 접근 함수를 둬서 환경변수가 undefined 상태라면 오류를 throw해주도록 처리했다. 

import NextAuth from "next-auth";
import KakaoProvider from "next-auth/providers/kakao";

function getEnvVar(v: string): string {
  const ret = process.env[v];
  if (ret === undefined) {
    throw new Error("process.env." + v + " is undefined!");
  }
  return ret;
}

export const authOptions = {
  providers: [
    KakaoProvider({
      clientId: getEnvVar("KAKAO_ID"),
      clientSecret: getEnvVar("KAKAO_SECRET"),
    }),
  ],
  secret: "...",
};
export default NextAuth(authOptions);

 

알게된 것

테일윈드 왜 편하다고 하는지 알 것 같다. 아직은 익숙하지 않아서 매번 검색해보고 하느라 시간이 좀 걸리는데 조금만 익숙해지면 css 때문에 받는 스트레스가 많이 줄어들 것 같다!

 

해결할 것

타입스크립트 공부하기.... 사실상 타스 거의 안쓰고 코드 만드는 중..ㅇ<-< 흑흑브흡ㄱ귿

 

참고 자료

환경변수 타입에러 처리

https://stackoverflow.com/questions/67781999/type-string-undefined-is-not-assignable-to-type-string-type-undefined-i