Styled-Component : Theming
- 작업시, 디자인 및 수치등의 통일화 및 유지보수의 효용성을 증대시키기 위해 특정값들을 '변수화' 해두는 작업을 진행했다.
theme.ts와theme.interface.ts을 통해theme.color.black이런 식으로 바로 접근할 수 있도록 세팅하는 작업
Apollo Client & Codegen
-
이번 프로젝트에서는
Apollo Client를 적용하기로 해서, 이를 활용하기 위한 작업을 했다.
Apollo Client에서 사용하는graphQL은 기본적으로 type들이 전부 적용되어있는 강타입이다.
또한, 쿼리를 날렸을때, 돌아오는 데이터도 모두 Type이 정해져서 돌아오게 되며, 당연히 이를typescript를 통해 하나씩 타입을 지정해줘야 한다. -
하지만, 이작업을 도와주는 툴이 바로
Codegen이다.
Codegen은customHook까지도 자동으로 생성해주는 툴이다. -
또한, 이 설정을 위해서는
codegen.yaml와gql등의 파일 세팅도 필요하다.
자세한 내용은 공식 doc을 반복해서 읽으면서 놓친 부분이 없는지 찾아둬야 겠다고 생각했다.
Environment Variables
- 개인 API key, 또는 특정URL 등 공개하면 안되는 데이터들을 변수화해서 바깥으로 빼서 관리하기 위함
dotenv등의 라이브러리가 있는데,react에서는react-script에서 이미dotenv를 활용하기 때문에,fs에러가 발생하게된다. 따라서,REACT_APP_SERVER_URL이런식으로prefix까지 넣어서 사용해야한다.- 또한, 환경변수는 빌드시에 적용되므로, 수정이 일어나면 다시 빌드해줘야 변경사항이 적용된다.
Domain
- 도메인의 구조는 다음과 같다.
- 보통 root domain(할당값, 구매하면 변화를 주기 어려움)을 숨기기위해 ENV를 활용하며, 도메인 뒤의 세부 endpoint는 공개하기도한다.
- 따라서, subdomain등의 내용들만 공개하기도한다.
- 앞의 protocol은 대다수가 사용하는 부분이기 때문에 숨기는 의미가 거의 무의미하다.(숨겨도 됨)
