Assignment Overview
1) 제공되는 API를 통해 실시간 환율정보를 가져와서 송금액에 해당하는 금액에 송금 국가에 해당하는 환율을 곱한 전체 금액을 구하는 계산기를 구현하는 과제.
2) API를 통해선 USD를 기준으로 제공되는 환율정보만 받아볼 수 있는데 이때 서로 다른 국가(예를 들어, 미국-한국 환율정보, 미국-일본 환율정보가 주어졌을 때 한국-일본, 일본-한국 환율정보를 구하는 것)들끼리의 환율 정보를 구하는 계산기를 구현하는 과제.
OT
- "클론"은 문자 그대로 똑같이 구현하는 것을 의미.
- FE 엔지니어로서 디자이너가 준 디자인 파일을 그대로 구현해내는 레이아웃 능력도 굉장히 중요.
- 만약 내 능력으로는 아직 어려운 과제, 업무를 맡았을 때 :
- 일단 좋은 예제를 찾아서 따라해보고 해당 예제를 공부해서 100% 나의 것으로 만듦.
- git 관련 기본 사항들
- .gitignore 관리 : .vscode, node_modules 같은 파일들 .gitignore에 잘 들어있는 지 확인.
- depth 한 번 더 들어간 폴더 구조 X
- README 잘 관리 :
배포 주소, 구현 기능 목록, 설치 및 시작하는 법, 프로젝트 구조 설명(선택), 기능별 영상(선택), 코드 설명/과제 후기 등(선택... 그러나 장황하면 안 좋음.) - commit 관리 :
진행 과정 보이게 4 ~ 10개 사이로, commit message convention 잘 지키기, ~ 작업중 금지.
- utils 함수
- 주니어는 사수 및 기업의 코드를 잘 흉내내는 것이 중요.
- 사수, 미들레벨, 리드급 개발자는 주니어가 흉내낼 코드를 잘 정리하는 것이 중요.
- 그런 의미에서 utils : 공통적으로 자주 사용되는 로직을 모아놓은 폴더
배운 점
.env 파일로 환경 변수 관리하기
이번 과제에서 API 주소를 env 파일 안에서 관리하기로 했다.
이유는 API 주소 자체가 http://api.currencylayer.com/live?access_key={API키} 이렇게 personal access key가 다 노출이 되어 있기 때문에 env 파일로 관리를 하기로 결정했다.
1. 최상단에 .env 파일 생성.
먼저 리액트 프로젝트 구조 최상위 루트에 .env 파일을 생성한다.
2. .gitignore에 .env 파일 추가
이번 프로젝트에서는 엑세스 키가 올라간 API 주소를 관리하느라 그랬지만,
원래는 .env 파일에서는 환경 변수를 관리하기 때문에 깃이나 깃헙에 올라갈 필요가 없다.
그렇기 때문에 .gitignore 파일에 .env 파일을 추가한다.
3. 변수 내용 작성
React에서 .env 파일을 사용할 때는 반드시 변수명 앞에 REACT_APP_ 을 붙여줘야 한다.
붙여주지 않는다면 리액트에서는 변수를 불러오지 않음.
예시)
REACT_APP_TOKEN_ID = 토큰번호4. .env 파일 안에 만든 변수 사용
.env 파일에서 선언, 할당한 변수는 전역 어디에서는 process.env.으로 가져와서 사용할 수 있다.
예시)
process.env.REACT_APP_TOKEN_ID
배울 점
조건부 렌더링
서버에서 불러온 데이터를 가공하여 렌더링을 할 때 조건부 렌더링이 필요하다.
그렇지 않으면 cannot read properies of undefined 와 같은 에러 메세지가 발생할 것이다.
위코드에서 멘토님 밑에서 조건부 렌더링을 공부한다고 했지만 아직은 부족한 듯 하였다.
이번 과제에서도 같은 메세지를 만나서 && 연산자를 활용하여 처리하려 했지만 에러 메세지는 쉬운 녀석이 아니었다.
같은 팀원인 상훈님의 조언대로 옵셔널 체이닝과 || 연산자를 활용하여 해결하였지만 아직 완전히 소화시키지는 못 하였다.
그런 이유로 조건부 렌더링, 옵셔널 체이닝 등을 더 공부해보려 한다.
원하는 기능은 원하는 스코프 안에서 !
당연한 말이지만 이번 과제를 통해 다시 한번 깨달아서 잊지 않기 위해 기록한다.
예를 들어 foo 라는 컴포넌트에서 이벤트가 발생했을 때 bar 이라는 함수가 실행되기를 원한다면 이벤트 발생 함수 내에서 bar 함수를 실행시켜주면 되는 아주 당연한 말이다.
그렇지만 이번 과제에서 기껏 함수를 잘 만들어 놓고 어디다가 함수를 위치해야 정상적으로 작동하는 지를 헤멜 때 이번에도 상훈님의 조언을 듣고 필요한 컴포넌트, 이벤트 발생 함수 등 안에서 실행하니까 원하는 기능들이 구현되는 모습을 확인할 수 있었다.
