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

이네이트 서비스에 관련된 컴포넌트들을 tsx 로 바꾸고 로직을 리팩토링하는 작업을 진행 하였다. 오래된 코드들이라서 수정 할 부분이 많았고 지금 사용되고 있는건지 확인하기 어려운 코드들도 있었다. 이번주는 이 작업을 계속 이어 나갈것 같다.

api가 그냥 데이터를 전체다 뿌려주어서 프론트에서 데이터를 정리해서 사용하는 부분이 있었다. 지금 당장 수정 할 순 없고 추후 수정 될 곳이였는데 미리 어떻게 api 데이터를 받아서 사용할지 생각해 보았다. 필요한 데이터들을 정리하고 현재 받아오는 데이터들의 관계를 보며 데이터를 정리해 보았다. GET nutrients/{id} Response { nutrient: { "id": number, "name": "string", "code": "string", "description": "string" }, answers: [ { "answer": "string", "part": "string" }, ... ], dailyDosageReference: { "max": number, "min": number..

테그를 가로로 2개씩 놓아서 정렬 하는 부분이 있었는데 css 가 제대로 정렬이 되지 않아 수정을 하였다. 보드 형태에 이미지와 영양성분 이름과 설명이 들어 가는데 설명이 길어지면 보드의 크기가 달라지고 정렬이 망가지는 것이였다. 그래서 테그에 우선 이미지와 영양성분 이름, 설명이 정렬이 될수 있도록 display: inlin-block 과 width 를 사용하여 가로 정렬을 맞추어 주고 자체가 윗부분을 기준으로 하도록 말들기 위해서 vertical-align:top 을 사용하여 정렬을 맞추어 주었다.