babel을 사용하여 절대 경로를 지정을 하였는데 제대로 경로를 불러 오지 못하는 에러가 발생하였다. tsconfig baseURL 수정 하니 해결이 되었다. babel preset은 자신만의 babel 환경 설정을 말한다. next에서 제공하는 next/babel 을 사용하면 대부분 대응해준다. 자신이 직접 만들어 볼 수 도 있다. next 에서 바벨 preset과 절대 경로 설정 절대경로를 설정하기 위해서는 babel-plugin-module-resolver를 설치해 주어야 한다. { "presets": ["next/babel"], "plugins": [ [ "module-resolver", { "root": ["./src"], "alias": { "routes": "routes", "types": ..

오늘 프로젝트 세팅을 마무리 하였다. 일이 끝나고 집에와서 한 두시간씩 투자하여 진행 하려니 꽤 속도가 느린거 같다. 다른 세팅은 어렵지 않았는데 redux 세팅에서 꽤 애를 먹었다. 더 공부를 해보아야 할 거 같다 .. react, next, typescript, redux, sass 를 사용하고 있다. 현재 기본적으로 설치된 pakage 목록은 아래와 같다. "dependencies": { "@babel/preset-env": "^7.10.4", "@zeit/next-typescript": "^1.1.1", "classnames": "^2.2.6", "next": "^9.4.4", "next-redux-wrapper": "^6.0.2", "react": "^16.13.1", "react-dom": "..

타입스크립트의 옵셔널 채이닝을 활용하여 코드를 좀 더 간략하게 만들었다. let fruit = "" let apple = true | false // 둘중 하나가 오는 경우 if (apple) { fruit = "사과" } else { fruit = undefined } // 타입스크립트에서 옵셔널 채이닝으로 간단하게 작성이 가능 fruit = apple? 어제에 이어 프로젝트 셋팅에서 리덕스의 버그 나는 부분을 해결해 보려 하였지만 해결되는듯 하다가 다시 원 상태로 돌아와 버렸다... 다시 처음 부터 천천히 살펴 보아야 겠다.

next + sass + typescript + redux 로 프로젝트 셋팅을 진행하였다. 그런데 redux 셋팅에서 에러가 발생하였다. ./store를 찾을 수 없다는 에러 였는데 이유를 알 수가 없었다. react-redux-wrapper 라이브러리를 사용하는데 사용법이 잘못 된 것 같았다. react-redux-wrapper 공식 페이지에서 기본 세팅을 그대로 따라해도 에러가 사라지지 않았다. 다른 원인이 있는지 좀 더 살펴 보아야 겠다.

오늘 내가 수정한 서비스의 배포를 진행 하였다. 그런데 git이 대소문자를 구별 못하는 문제 때문에 2번이나 hotfix로 브랜치를 만들어 수정을 해주었다. 특히 css 파일을 import 할 시 대소문자가 다른 경우라고 에러가 나지 않는 점이 문제였는데 원인을 찾을 수가 없었다. vscdoe extension 도 찾아보고 경로 설정과 관련된 부분들도 찾아 보았지만 해결책을 발견하진 못했다. declare module 로 css 파일의 타입을 지정해둔 부분이 있었는데 이게 원인인가 싶어 지워버리면 css 파일 import를 할 수가 없었다. 좀 더 원인을 찾아보아야 겠다.

텍스트와 버튼이 양 사이드에 위치하는 컴포넌트 CheckPolicy가 있다. 이 컴포넌트는 3곳에서 적용이 되는데 세로 정렬이 3가지다 다르게 적용이 되고 있었다. 상위에서 css를 설정해 주는것도 아니였고 다른 css코드도 전부 일치하였는데 왜 차이가 나는지 정확한 이유를 알 수 없었다. 그래서 flex로 정렬을 맞춰보기로 하였다. 텍스트와 버튼을 감싸는 div에 아래와 같이 설정을 해주었다. display: flex; justify-content: space-between; item-align: center; flex 정렬 참고 자료 : https://d2.naver.com/helloworld/8540176