[pre Project] 9일차 리뷰 (08.28 ~ 08.30)

9일차 리뷰 (08.28 ~ 08.30)

✅ 새로 알게 된 점 1 : svg 파일 관리하기

• SVG: Scalable Vector Graphics : xml 기반 마크업 언어!
• stackoverflow에서 사용되는 이미지 파일들이 svg로 되어있다. 처음에는 element를 복사해서 jsx 코드 내부에 작성했지만 svg 파일을 따로 관리해서 컴포넌트처럼 사용이 가능하다는 것을 알게 외었다!
• 사용방법 : 이번 프로젝트에서는 src/assets/ 에 관리해주었고, 사용되는 파일도 많아서 폴더별로 정리해주었다. ```js import { ReactComponent as Logo } from “../../assets/nav/Logo.svg”; …

<br/>


### ✅ 새로 알게 된 점 2 : env 환경변수 설정
* proxy로 cors 에러를 잡았지만 개발환경에서만 사용이 가능하다는 블로그의 글을 보고 배포환경을 생각하게 되었다.
* 우리 팀은 로컬에 서버를 돌려서 깃허브에 올리면 안돼서 env 파일에 연결해볼까 했다 (하지만 배포는 메인때 하기로 했다!)
* env을 생성한 후 `.gitignore` 해줘야 깃에 올려도 문제가 되지 않는다!
```js
# misc
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

1. package.json과 같은 루트에 .env 파일 생성하기 (최상위 루트)
2. 변수 내용 작성 : react에서 사용 할 경우 변수명에 REACT_APP_ 붙여주기!
3. 작성한 내용 사용하기 : const LOCAL_URL = process.env.REACT_APP_LOCAL_URL 이런 식으로 process.env.변수명으로 사용 가능하다.
   • 실행 환경에 따라서 다르게 설정해줄수도 있다.
4. 로컬 개발환경 : ` .env.local`
5. 서버 배포시 : .env.production
6. 내용을 적용할때는 process.env.REACT_APP_변수명 이렇게 사용 가능하지만 여러개 사용시 우선순위에 따라 적용된다.
7. 우선순위 참고 링크 : https://han-py.tistory.com/441

👍 잘한 점

• 29, 30일엔 종원님과 만나서 작업했다.
• 우선 소통이 바로바로 되고 부족한 부분을 바로 채워줄 수 있다는 장점! 확실히 만나서 하니 소통이 잘 되고 좋았다!
• 집에 와서도 집중이 정말 잘 되었다! 처음부터 작업 구역을 확실하게 나눠놓길 잘했다는 생각이 든다!

🥲 아쉬운 점

• 테스트를 해보지 않고 데이터의 연관관계를 생각했을때 머리에 잘 그려지지 않아서 통신 부분을 설정하는데에 어려움이 있었다. 아래 처럼 되어있는 데이터를 프론트쪽에서 맵핑 하려니 내가 하고있는 data.json 에서는 테스트가 잘 안됐었다.

  question [{
  answer [{
  ...
  }]
  }, {}, {} ...]
  

• 그래서 내가 생각한 방법은 맵핑하지 않고 질문과 댓글을 따로 관리하는 것!

  question {}
  answer {}
  

• 그럼 혼자 해보는 테스트도 편하고 같이하는 테스트도 수월할 것이라고 생각했다. 하지만 데이터의 연관관게를 생각하면 위에처럼 하는게 맞는 것 같아서 저렇게 진행하게 됐다.
• 혼자하는 테스트가 불가능해서 기능 구현이 끝났지만 백엔드 분들과 소통하면 무언가 계속 수정할 것이 생긴다.
• 테스트를 해보면 정확하게 알 수 있을 것 같다.

🚀 추가적으로

• 백엔드 분들과 question, answer, comment CRUD 통신에 대해 얘기를 나눠봐야 할 것 같다.