✏️ 무엇을 배웠나
1. styled-components 충돌 에러 잡기
UI를 구현하는 과정에서 material ui theme이랑 styled-components가 충돌해 화면이 뜨지 않았다. 에러메시지를 읽어보니 styled-components를 임포트하는 라인에서 에러가 나고 있어서 styled가 중복되서 그런줄 모르고 애먼 데서 삽질을 하고 있었다. 혹시나 하고 중복된 부분을 지워보니까 다시 정상으로 돌아오길래 중복이 안 되는구나 싶어서 중복을 피하려고 여러 가지 시도를 했다. 1) import styled가 아니라 import Styeld라고 불러와서 중복을 피해본다. 실패. 어떻게 할까 생각하다가 굳이 둘 다 쓸 필요가 없는 거 같아서 material ui theme으로 만든 태그들을 styled-components로 모두 바꿔서 해결했다!
2. 삼항연산자 응용하기
A라는 버튼 컴포넌트를 페이지 a와 페이지 b에서 모두 사용하고 있었는데 페이지 b에서는 버튼이 보이지 않길 바랬다. 처음에는 버튼 컴포넌트에 조건연산자로 페이지 b에서 display: none을 줘서 안 보이게 하려고 했는데 되지 않았다. hidden 속성도 써봤는데 이것도 안 됐다. 이 문제를 팀원에게 공유했는데 그냥 버튼 컴포넌트 자체를 삼항연산자로 처리하면 되지 않겠냐 했다. 오.. 왜 그 생각을 못했지. 프로퍼티 줘서 그걸 조건으로 처리할 필요 없이 그냥 버튼 자체를 삼항연산자를 써서 페이지 a에서는 보여주고 페이지 b에서는 안 보이게 해주면 되는 건데.
🥵 무엇이 어려웠나
1. json-server 에러
프로젝트 세팅을 npm으로 해서 시작했다. 전에는 yarn만 사용하다가 이번에 처음 사용해봤는데 json server 에러로 고생하고 있다. 문제는 이렇다. npm으로 json-server 설치를 했는데 npm json server 커맨드로 실행이 안 된다. 그래서 npx 커맨드로 실행했더니 실행은 된다. 그런데 port 변경이 안 된다. json server를 global로 설치하고 해봐서 마찬가지로 안 됨... 구글링 해봐도 전부 npx 커맨드로 하거나 global 설치 얘기가 있어서 아직 해결을 못 했다. 이거 해결 못 해서 작업 진행이 안 되는 건 아닌데 레파지토리에 푸시할 때마다 코드에서 포트 부분을 바꿔줘야 하는 게 너무 귀찮다.
