# 0203 trouble shooting
###### tags: `trouble shooting`

### 카카오 로그인 api 요청 오류
axios가 url을 못 찾으면 자동으로 localhost로 리다이렉트를 해서 127.0.0.1에서 거절했다는 오류가 떴다. `kauth.kakao.com` 앞에 `http://`를 붙여주었다.


그 뒤 `https://`로 바꿔주었더니 client_secret이 맞지 않다는 에러가 발생했다. 알고보니 params들을 모두 query string 형식으로 넣어주어야했다.

const { access_token: accessToken } = await axios.post(
        `${kakaoSocialLoginHost}/oauth/token?grant_type=authorization_code&client_id=${kakaoClientId}&redirect_uri=${kakaoRedirectUrl}&code=${code}&client_secret=${kakaoClientSecret}`,
        {
          headers: {
            'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
          },
        },
      );

query string을 넣는 것이 굉장히 길어 보기가 불편했다. 이것을 axios로 처리하는 방법이 있을 것 같은데 나중에 찾아봐야겠다.


이 에러는 `code`로 access_token을 한 번 가져오면 code를 다시 사용할 수 없어서 생기는 문제였다. `code`를 그 때 그 때 가져오게 했더니 문제가 해결됐다.

---

## 백엔드 절대경로 설정

module-alias를 이용해서 package.json에 절대경로를 추가해주었다. 그런데 eslint에서 경로를 못 알아보는 문제가 있었다.

.eslintrc.js에 다음의 코드를 추가해줘야했다.

settings: {
    'import/resolver': {
      alias: [
        ['@', './src'],
        ['@routes', './src/routes'],
      ],
      extensions: ['.js'],
    },
  },

그것 이외에 또 불편한 점이 있었다. 에러까지는 아니고 개발을 할 때 불편한 점이었는데 상대경로를 사용하면 해당 경로를 쓸 때 vscode에서 자동완성을 해주었는데 이것이 안된다는 점과 ctrl을 누르고 클릭했을 때 해당 코드가 있는 곳으로 이동하는 vscode의 기능이 되지 않았다.

jsconfing.json에 절대경로를 추가하면 이것이 해결이 된다는 글을 보고 jsonfig를 다음과 같이 작성했다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@routes/*": ["./src/routes/*"],
      "@models/*": ["./src/models/*"],
      "@repositories/*": ["./src/repositories/*"],
      "@services/*": ["./src/services/*"],
      "@utils/*": ["./src/utils/*"],
      "@constants/*": ["./src/constants/*"],
      "@apis/*": ["./src/apis/*"]
    }
  }
}

---
### 재사용 가능한 스타일드 컴포넌트 만들기

import styled from 'styled-components';

const STT = styled.div`
  color: black;
  font-size: 80px;
  margin: 70px;
`;

export default function SmallTitle({ text }) {
  return <STT>{text}</STT>;
}

한 페이지 내에서 반복적으로 사용되는 스타일이 있어서 텍스트만 props로 변경하고 스타일은 동일하도록 재사용 컴포넌트를 만들어 주었다.
추가적으로 프로토타입에서 여러페이지에 걸쳐 반복되는 상단의 flagtag games라는 헤더가 있어서 재사용 컴포넌트로 만들었다.
비슷한 모양의 버튼이나, wrapper, text input도 추후 반복여부에 따라 재사용 컴포넌트로 변경해주면 좋을 것으로 보인다.

### CRLF, LF 문제

리눅스, 맥, 유닉스는 LF 만 사용하므로 input 으로 설정한다.

git config --global core.autocrlf input

- CR : 현재 커서를 줄 올림 없이 가장 앞으로 옮기는 동작
- LF : 커서는 그 자리에 그대로 둔 상황에서 종이만 한 줄 올려 줄을 바꾸는 동작

https://www.lesstif.com/gitbook/git-crlf-20776404.html

### package.json의 dependency와 dev-dependency

dotenv를 리액트에서 사용하려다보니 require('dotenv') 부분에서 린트에러가 발생하였다.
이를 해결하기 위한 방법으로 dotenv-webpack을 사용하게 됐는데, 두개 모두 인스톨을 하고 보니 dotenv는 dependencies에 있고, dotenv-webpack은 devDependencues에 있어서 의문을 가지게 되었다.

package.json 파일에는 해당 어플리케이션이 의존하는 패키지들의 리스트가 올라간다. 이때, 패키지의 리스트들을 semantic하게 정리하는데. 이 과정에서 dependencies와 devDependencies가 생긴다.
- "dependencies": 프로덕션 단계에서 사용되는 패키지
- "devDependencies": 로컬의 개발이나 테스팅 단계에서 사용되는 패키지

바벨이나 웹팩 패키지들은 트랜스파일링이나 번들링단계에서 동작을 마치고, 배포이후에는 동작할 필요가 없기 때문에 devDependencies가 된다.

처음의 문제로 돌아가서, dotenv-webpack은 환경변수를 리액트 앱 어디서나 불러올 수 있도록 번들링 단계에서 동작하기 때문에 devDependencies에 포함되는것으로 보인다.

https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file