[TDL] 08/11 Today's-Done-List

- 드림 코딩 REACT 프로젝트

API 로직 분리

• 보통은 api 폴더 또는 대게는 client라고도 짓는다.
• client (또는 api): 백엔드의 API를 호출만 하고 데이터를 받아오는 역할만 함 (순수 통신) ➡
  이것만 빠르게 훑어보아도 앱에서 쓰는 네트워크 API (Rest APIs) 목록을 빠르게 파악할 수 있음
• service: client에 있는 통신 로직을 사용하여 백엔드로부터 가지고 온 데이터를 우리 애플리케이션에서 필요로 하는 로직을 처리함.
  어플단에 전달하기 전 데이터 처리 과정을 거치는 용도 (캐시를 하든지, 불필요한 데이터를 제거한다든지 등등)

---

API KEY 은닉

• env 파일은 공개 소스코드 리파지토리에 올리지 않아, 다른 사람들이 코드에서 값을 쉽게 보지 못하도록 만들 수 있다.
• 다른 prod, dev, staging 환경에 따라서 다른 값을 쓸 수 있도록 설정할 수 있다.

docs랑 이런저런 블로그 보고하였는데, 계속 undefined 뜬다.
클래스 형식으로 되어있는 예시를 보고 함수형으로 로직을 구현했는데, 무엇이 잘못된 건지 아직 모르겠다ㅠ
index, app 컴포넌트가 엉켜서 그런 것 같기도 하다.. 하나의 cra안에 내가 다른 프로젝트들도 여러 개 열어놨더니 디렉터리 구조들이 꼬인 것 같다 흐휴. 우선 다른 것들 구현하고 다시 시도해봐야 할 것 같음.

https://create-react-app.dev/docs/adding-custom-environment-variables

Adding Custom Environment Variables | Create React App

너무나도 어이없게 해결... vscode와 터미널을 다 끄고, 다시 시작하니깐 되네ㅠ 휴...

---

youtube iframe을 사용하는데 계속 콘솔에 경고장이 떠서 찝찝해서 찾아보았는데 별다른 방안이 없어 보인다.

https://stackoverflow.com/questions/56780548/youtube-iframe-embed-violation-non-passive-event-listener-to-a- scroll-blocking

YouTube iframe embed Violation: non-passive event listener to a scroll-blocking 'touchstart' event

---

https://ko.javascript.info/arrow-functions-basicshttps://velog.io/@bigbrothershin/%EC%98%A4%EB%8A%98-%EA%B3%B5%EB%B6%80%ED%95%A0-%EA%B2%832020.1.30

JavaScript - 함수 선언문, 함수 표현식 그리고 화살표 함수 비교

https://ko.javascript.info/function-expressions

함수 표현식

---

오후 회고 (만족도: 6)

자꾸 뭔가 ui가 맘에 안 들어서 고치고 싶고, 문법이나 코드들을 docs 또는 구글링 하면서 코딩하고 수정하다 보니,
생각보다 진도가 많이 안 나간다. 그래도 오늘 안에 꼭 끝내보자.

---

- 드림 코딩 REACT 프로젝트

모듈화?를 위해서 api(네트워크 통신)와 client(받아온 axios 데이터 처리) 컴포넌트를 쪼개는 리팩터링을 하였음.
App컴포넌트로 import 후, 메인 컴포넌트에 props로 뿌려주었음. 잘 들어가긴 했는데...
api url에서 key 파라미터가 맨 마지막에 위치해야 하는데 자꾸 맨 처음에 위치해서 그거 때문에 꽤 오래 헤매고 있는 중이다. 이것만 해결되면 마무리될 것 같은데ㅠ 휴

하.. 파라미터를 제대로 안넘겨주고있었다. key랑은 전혀 상관없었고 ^^
videos인데, video라고 적어놨었던 것!!!! 으악!!!!! 내 소중한 시간이!!!!
.env와 파라미터 오타 때문에 시간을 꽤 버렸다ㅜ
역시 모든 오류는 사소한 것에서부터 시작돼... 조금 더 꼼꼼해지자!

---

저녁 회고 (만족도: 6)

---