2021년 9월 첫째 주 내가 배운 것들

이번주 새로 알게된 내용 🤓

Next.js .env 설정

일단 .env 파일을 처음 작성해봤다. .env파일은 환경변수를 설정하는 파일인데 일반적으로 변수명=값의 형태로 저장되지만 next.js 에서 환경변수를 지정하기 위해서는 NEXT_PUBLIC_변수명의 형식에 따라 작성해야한다.
```
NEXT_PUBLIC_API_HOST=https://api.com
```

svg 컴포넌트화

프로젝트에서 svg 아이콘이 많이 사용되는데 이 svg를 어떻게 관리할지에 대해서 고민하는 시간이 있었다. 우리는 컴포넌트로 작성해 사용하는 방식을 채택했다.

interface Props extends BaseStyledProps {
onClick?: () => void
}

export const Icon = ({ onClick, ...props }: Props) => {
  return (
      <svg
      onClick={onClick}
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      viewBox="0 0 32 32"
      {...props}
      >
      <path {...}  />
      </svg>
  )
}

이런식으로 컴포넌트로 관리하면 import하기도 편했다.

Next.jsd에서 카카오 소셜 로그인

이번주 가장 고민했던 것이 아닐까 🙃 우리는
프론트인가코드받기➡️프론트인가코드 보내기 ➡️백받은 인가코드로 토큰 받기 ➡️ 백 사용자 정보 프론트로 보내기 ➡️ 프론트 사용자 정보 불러오기
이러한 카카오 로그인 프로세스를 가지고 있었는데 Next.js의 특징과 이전에 해본 방식과 다른 프로세의 로그인이어서 많이 헤맸다... 이부분에 대해서는 이야기가 길어질거 같아서 따로 포스팅을 해서 나중에 링크를 걸어둬야겠다!

이번주를 보내며

예전보다는 자가복제 코드가 점점 줄고 있고 CRUD는 금방 구현할 수 있게 되었다. 하지만 아직도 모르는게 너무 많아 공부할것 투성이다. 그래도 무엇을 모르는지 알지못해 공부못하는것보다 무엇을 모르는지 깨달아서 공부할것이 생겼다는 것에 뭔가 뿌듯하면서 공부할 맛이 생긴다. ㅎㅎ