오늘 공부한 내용들을 한번 정리 해보도록하자
node.js로 간단한 api를 만들고 클라이언트에서 데이터통신을 했다.
참 많이도 배웠는데 배운내용들을 토대로 정리해보도록하자 !
짧은키워드
- node.js Express cors 에러
- 내장객체 Map()으로 key value 값 만들기
new를 쓰면 인스턴트화 된다. - url 파라미터를 어떻게 선언하는가?
- IDE 에서 작성된 코드는 어떻게 브라우저에서 나오게되는가?
자 시작해볼까?
node.js Express cors 에러
나는 코드에서 편집기에서 npm run start 를 하게되면
어떻게 되는지부터 확인했다. 자세히 알아본건아니지만
대충 module이 npm run start를 하게 되었을때
가상 웹서버를 뛰운다음 브라우저에서 실행된다는 사실만 알게되었다.
이런 과정을보면 가상 웹 서버포트와 서버의 포트가 다르게 되는데
이때에 문제가 발생한다
좀 더 쉽게 얘기하자면 이렇다
a사이트에서 b 사이트의 어떤 정보를 요청하게 되면
그런 권한을 제한시키게 되는데
그럴때 cors 에러가 발생한다.
이부분은 클라이언트에서도 잘 처리해야겠지만 서버에서 제한을 풀어주어야한다.
그의 관련된 사이트를 공유한다
http://guswnsxodlf.github.io/enable-CORS-on-express
app.get('/products/:id', function (req, res, next) {
res.json({ msg: 'This is CORS-enabled for all origins!' });
});
app.all('/', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '');
res.header('Access-Control-Allow-Headers', 'X-Requested-With');
next();
});
자세한 내용은 위의 내용으로 대신한다
내장객체 Map()으로 key value 값 만들기
new를 쓰면 인스턴트화 된다.MDN 공식문서를 보면
이렇게된 예제를 보고
이렇게 선언해보았다.
코드를 보면 이렇게 Map이란 객체를 사용해서 목업데이터를 만들었는데
실제 이렇게 데이터를 주진 못한다 왜냐하면 지금 books라는 변수는 Map의 인스턴트화 되었기때문에
데이터타입이 객체가 아니다 그래서 객체로 뽑아주어야하는데
이렇게 forEach를 사용하여 변수 allData 빈 배열로 선언된 곳으로 push 해 준다
노드서버에서는 이렇게 적용된 모습을 볼수있다.
일반적으로 객체를 생성해서 보여주지만 Map()을 사용하면 루프가 돌지않고
바로 즉시 값을 뽑아낼수있다.
url 파라미터를 어떻게 선언하는가?
주소를 보면 get으로 서버에 정보를 요청했을때 post로 요청했을때 각가 다르게 기술된다.
post는 아직 진행해보지않아서 get 부분을 설명하자면
?물음표 뒤에 나오는 부분이 파라미터 부분이다 거기에는 각각의미가 있으니 확인해보자
IDE 에서 작성된 코드는 어떻게 브라우저에서 나오게되는가?
npm run start 를 하게되면 node modules에 모두 내장되어있다.
이렇게 브라우저로 다시 요청하게되면
크리티컬렌더링 패스로 인해 html파일을 읽어서 dom 트리를 구성하고 css,cssom , 레이아웃을 그리고
최종적으로 보여주게되는것이다.
가상의웹서버가 존재하는지 몰랐다. npm run start를 하게되면 이런 처리를 해주는것 또한 알지못했고
그렇다보니 cors에러를 이해할수없었다.
나의 짧은 이글들은, 누군가가 봤을때 크게 와닿지않을수도있고 틀린부분이 있을수도있다.
한번더 되짚어보는 과정이라 두서없이 작성되고있다.
하루에 하나씩 쓰다보면 좀 더 정확해지고 명확해질것이라 믿는다.
꾸준하게 기록해보자!!
