[220812] Daily Study Note

 

 

  Today's Plan  

 

GoodGeul Project (10:30am - 4:30am , 6시간 했구나.. 하이고..그런데 오늘은 성과가 미비해서 속상타..)

1) Naver book API 받아와서 책 상세 화면에 디스플레이

2) CSS Styling 개선 -> 규격화 필요

3) firebase login auth 만들어서 데이터를 사용자 별로 관리 -> 디스플레이

 

Training Coding Test with Python (3시간)

 

1) 스택 3문제

2) 큐 2문제

3) 덱 2문제

 

---

1) Naver book API 받아와서 책 상세 화면에 디스플레이

어제 이 부분 하려다가 서버프로그래밍의 요구되어 앗 내가 모르는 부분이다 하고 후퇴했었다. 

이걸 우회해서 해결한 풀이를 발견했는데 너무 낯설어서 약간 피했다. 한 숨 자고 오늘 돌아와서 보니까 아.. Proxy가 그 말이었지 싶었다. 사실어제는  "Proxy로 설정한다" 이 말부터가 무슨 말인지 이해 못 했었다. 어제 낯선 개념을 마주했던 시점에는  2시간동안 React Router 공부하고, 4시간동안 이리 저리 코드 개선, API CORS문제 해결한다고 헤멘 뒤여서 머리자원 고갈된 상태에서 봐서 힘들어서 못하겠는데 싶었다. 

 

오늘 자고 일어나서 밥 잘 챙겨먹고 오니까 뭘 안내하는건지 딱 개념이 잡혔다. 전에 Proxy에 대해서 공부했다는 것도 기억 나서 Javascript 해당 챕터도 살피며 개념을 먼저 이해했다.

 

https://ko.javascript.info/proxy

 

 

 

React로 영화 정보를 검색해보자 - 두번째 네이버 API 사용 / CORS 설정 하기 By 유로띠

 

위의 링크의 두 번째 CORS해결법을 따라하고자 했다.

http-proxy-middleware 를 사용해서 proxy 설정을 하라고 안내되어있었다.어제는 정신 없어서 대책 없이 그냥 깔았는데, 역시 뭔지도 모르고 따라하려니까 이해 안 돼서 사용도 안 되는 것 같고 해서 npm홈페이지 들어가서 해당 내용을 좀 읽었다.

 

https://github.com/chimurai/http-proxy-middleware#readme

GitHub - chimurai/http-proxy-middleware: The one-liner node.js http-proxy middleware for connect, express, next.js and more

아래 주석 보니까 해당 패키지의 Proxy작동 방법이 이해된다.

 

express는 뭔데 깔았을까 또? ㅎㅎ 정말 연계되는게 많다 ㅠ npm 패키지인 듯 한데 역할이 뭘까싶어 역시 홈페이지 들어가서 읽었다.

 

https://www.npmjs.com/package/express

express

 

 

express 없이도 사용 가능한 것 같다.

 

이 세상 통신 에러 다 만나겠네.. ㅎ

 

//setupProxy.js
import { createProxyMiddleware } from 'http-proxy-middleware';
import express from 'express';

const app = express();

export default function(app){

  app.use(
      createProxyMiddleware( '/api', {
          target: 'https://openapi.naver.com',
          changeOrigin: true,
          pathRewrite:{
            '^/api/':'/'
          }
      })
    )
  app.listen(3000);
};

 

여기까지 왔는데.. 웹소켓통신 저 부분을 해결을 못 해서 그냥 프록시 설정부터 다시 시작하려고 git reset 으로 이전 커밋으로 돌아갔다.

 

아 근데 reset하면 설치한 패키지도 사라지는구나..? 몰랐다..

네이버API.. 쓰고 싶어요.. 서버프로그래밍 왜 안 되는거죠.. ㅜ 1시간 30분을 이걸 잡고 있네.. 눈물 난다.

 

그리고 책 선택했을 때 상세 페이지 컴포넌트로 대체되어 나타나는 기능도 커밋을 안 해둬서 잘 날라갔다.

시원한 마음으로 복습할 수 있겠다.. ㅎ

12:00 pm

 

---

가벼운 마음으로 프로그래머스의 과제 테스트를 풀었다. 

생각보다 아웃풋이 너무나도 구린 바람에 오늘 공부 계획은 싹 다 미루고

해당 문제에 나오는 내용들을 복습하게 되었다. 

 

https://bobbyhadz.com/blog/javascript-import-function-from-another-file

Import Functions from another file using JavaScript | bobbyhadz