1. ThemeProvider 컴포넌트 이용

1. styled-reset 모듈을 통해 컴포넌트 방식으로 적용

1. 기존의 react-scripts 러너는 상대 경로를 설정해주더라도 알아서 이를 씹고 CRA의 기본 설정으로 경로를 인식하여 오류가 생김
2. tsconfig.paths.json 파일에 기존의 설정을 해주고 @craco/craco 모듈과 react-app-alias 모듈을 설치
3. craco.config.json 파일에 craco 관련 설정을 해줌
4. 애플리케이션 러너 환경 자체를 react-scripts가 아닌, craco 가 돌릴 수 있게 설정

1. context/state 디렉터리에서 원하는 js파일을 통해 상태들을 정의해주고 이를 export해준다.
2. 프로젝트의 최상위 컴포넌트(CRA에서는 App.tsx 컴포넌트)에서 RecoilRoot 컴포넌트로 wrapping
3. 원하는 파일에서 1에서 정의해준 상태를 import하여 useRecoilState() 훅으로 사용. 받는 것은 useState와 매우 흡사하다.

1. before와 after psuedo element를 이용하여 만듦. 주의할 점은 왼쪽으로 위치하려면 -8px, 오른쪽은 -8px 느낌으로 해야 겹치지 않고 보여줄 수 있음

1. 위의 디스코드 버튼이나 이름을 누르면 사용자가 전환되고 관련 UI도 함께 바뀜

…nt-box의 크기를 제한해주었음

…Blur 핸들러 함수 내부의 조건문 분기로 해결

1. 사용자가 채팅을 입력하면 상태도 바꿔주고 로컬 스토리지도 동기화시켜줌

1. 기존의 chatMessageData의 특정 날짜에 해당하는 배열과 주소값이 달라야함
2. 따라서 prevDateArray라는 변수를 기존의 것을 배열 구조 분해하여 받고 그다음 새로운 데이터를 push함
3. 이렇게 바뀌었는데 메모리 주소값이 다른 데이터를 새로운  상태로 설

1. 스크롤을 아래로 내일 chatBody와 chatInput은 부모-자식 관계가 아니므로 prop으로 콜백을 전달할 수 없음
2. 따라서 전역 상태 관리로 이를 구현해야하는데 커스텀 훅을 통해서 진행

…하는 useEffect() 훅에서, 커스텀 훅의 scrollToBottom을 해주어야함

1. 기존의 상태값을 JSON.parse(JSON.stringify())를 통해서 깊은 복사를 한다. 다른 스프레드 연산자 방식은 중첩된 대상들까지는 안될 수도 있다

…로 늘려 어디를 더블 클릭하던 제대로 동작하게 만듦

1. z-index 같은거 없앰

1. 일단 폼이 제출되면 안에서 false로 바꿔버린다.
2. 제출을 엔터키로 하면 상관 없는데 제출 버튼으로 하면 isFocused가 풀릴 수도 있으니 false로 만드는 함수에서는 이미 isFocused가 true인지와 내용이 있는지를 검사한다

…aracter

1. 디자이너의 요청에 따라서 사용자가 포커스 뿐만 아니라 한 글자라도 입력했을 때 activate되고 다시 지우면 deactivate 되도록 만듦

1. isMessageLikeButtonClicked 상태를 만들어서 useEffect() 훅 내에서 검사함

1. react-router-dom을 이용하여 ChatMain 컴포넌트를 일단 / url에 해당할때 렌더링될 수 있도록 만들어줌
2. 나중에 랜딩 페이지(/) 바꿔줄 수도 있음

1. outlet을 적용하여 IphoneStatus와 HomeIndicator 같이 고정적으로 박히는 레이아웃을 고정시켜놓고 그 나머지 UI만 구축하면 되도록 시스템화
2 대부분의 페이지별로 바뀌는 부분은 pages 디렉터리에 넣어놓음

… 되면 탭바의 해당 아닌 부분은 opacity를 낮게 적용

…처리는 배치되기 때문에 핸들러 함수 내부에서 분기하여 작성해주었음

1. 그냥 TabIconConatiner에서 userPageMode는 url과 곧바로 연동되면 끝이므로 useLocation() 훅의 pathname 정도만을 확인하는 로직이면 충분하다.

1. 렌더링 도중에 상태의 변경이 일어나면 안된다. 이를 useEffect() 훅 내부로 옮겨주었음

1. 다양한 메시지 리스트들을 렌더링함
2. 추후에 특정 메시지 아이템을 클릭하면 채팅방으로 이동하게 만듬. 근데 일단 김정민을 누르면 내가 원래 구현했던 /chat으로 이동하게 할거고 나머지는 아무 것도 없는 채팅 페이지로 이동하게 할 것임

1. 절대경로로 import 하도록 자잘한 코드 수정

1. 김정민 chat 말고도 다른 chat에서도 뒤로 가기 화살표를 누르면 /messages url로 갈 수 있도록 설정

1. 기존의 메시지 데이터가 있는 상황에 대해서 상태관리 설정을 추후에 해줘야 함

1. 사용자를 누르면 전환되는 것을 추가적으로 구현해야함

1. 앞에 $를 붙여주는 방식으로 해결

1. img를 담은 div를 img 보다 너비 높이를 높게 잡고 border radius를 원형으로 만든 뒤, background color를 적용함

1. 로고의 너비 높이는 80px 이지만 이를 위치시키는 컨테이너는 90px 이므로 이를 고려해야 레이아웃 배치

1. 사용자가 예상치 못한 접근을 하면 not found page로 갈 수 있도록 라우팅 설정