🌊 Express - req.query, req.params req.params : 라우터의 매개변수 // 요청온 url : www.dreamogu.com/ogu/babyogu?greeting=hello const express = require('express'); const router = express.Router(); router.get('/user/:id', (req, res) => { console.log(req.params.id); // {id: 'ogu', name:'babyogu'} }); 주소에 :id는 문자 그대로 :id를 의미하는 것이 아닌 다른 값이 들어가는 장소이다. 예를 들어 /user/ogu, /user/rabbit 등의 요청을 이 라우터가 처리하게 된다. /:id/:name..

🌊 Express 프레임워크 경량화 웹 개발 프레임 워크. 노드를 이용한 웹 서비스나, 웹 어플리케이션 개발에 가장 널리 쓰이는 확장 모듈이다. express는 기본 모듈 중 하나인 http 모듈을 이용하여 웹 서버를 구축하거나 API서버를 제작하기 위해 사용되는 프레임워크 입니다. Node.js HTTP 모듈로 작성한 서버와 다른 점 미들웨어를 추가할 수 있다. 라우터를 제공한다. MERN stack MongoDB : NoSQL데이터 베이스로, JSON형식으로 데이터를 저장한다. Express : Node.js를 기반으로 하는 웹 프레임워크로, 웹 어플리케이션의 구조와 로직을 구성한다 React : 페이스북에서 개발한 프론트엔드 라이브러리로, 웹 어플리케이션의 사용자 인터페이스(UI)를 만든다. Nod..

🌊 TIL : 2023년 4월 4일 오늘 배운 것 CORS SOP Node.js 서버 HTTP 요청, 응답 DOM 어려웠던 부분 하.. 공식문서를 이해하기.. 이해하고 나선 괜찮았는데 여러 번 읽어야 머릿 속에 들어왔다 느낀점 오늘 부트캠프에서 서버 만들기를 진행했는데 Reference가 다 있는 상태로 만들었던 거라 조금 더 연구가 필요할 것 같다.

🌊 HTTP모듈 서버 만들기 으악 어려워! Node.js 공식문서의 HTTP 트랜잭션 해부를 뜯어보려 한다.. 서버 생성 웹 서버 객체를 생성한다. 이 서버로 오는 HTTP 요청마다 createServer에 전달된 함수가 한 번씩 호출 된다. const http = require('http'); const server = http.createServer((request, response) => { // 여기서 작업이 진행됩니다! }); 메서드, URL, 헤더 Node가 request객체에 유용한 프로퍼티를 넣어두어 우리는 이 프로퍼티를 사용할 수 있다. const { headers, method, url } = request; const userAgent = headers['user-agent']; 헤더..

🌊 CORS, SOP SOP (Same-Origin Policy) : Same-Origin Policy의 줄임말로, 동일 출처 정책을 의미한다. 한 마디로 '같은 출처의 리소스만 공유가 가능하다'라는 정책이다. 출처 : 아래 세 구성요소가 하나라도 다르면 동일한 출처로 보지 않는다. 프로토콜 호스트 포트 SOP (동일 출처 정책)은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주어 해킹 등의 위협에서 더욱 안전해질 수 있다. 만약 동일 출처 정책이 없다면 브라우저에 로그인 정보가 남아있는 채로 해킹 사이트에 방문하게 되면, 해커는 로그인 정보를 악용할 수 있다. SOP가 있다면 애초에 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타사이트의 코드에 의해서 새어..

🌊 TIL : 2023년 4월 3일 오늘 배운 것 Promise Fetch API async await scroll 이벤트 어려웠던 부분 useEffect 사용 추가 학습 필사로 영어 공부하면 좋다고 하여서 영어 필사 :> 더 공부할 것 현재 책으로 리액트 개념 공부 중인데 천천히, 꾸준히 진도 나가야할 것 같다.. : >

🌊 이벤트 : 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것 리액트의 이벤트 주의사항 이벤트 이름은 카멜 표기법으로 작성한다. HTML의 onclick은 리액트에서 onClick으로 작성해야 한다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. DOM요소에만 이벤트를 설정할 수 있다. 이벤트 종류 Clipboard Composition Keyboard Focus Form Mouse Selection Touch UI Wheel Media Image Animation Transition input이 여러 개 일 때 state에 적용하는 법 1. onChange 관련 함수를 두 개를 만들어서 사용하는 방법. import React, { useState } f..

🌊 TIL : 2023년 4월 2일 오늘은!! 건강검진 받으러 외출해서 많이 공부하진 못했다.. (자수) 오늘 배운 것 WEB API, Broswer 구조 어려웠던 부분 함수를 만들어서 활용하면 재사용성이 증가하는데 간과하였음. 느낀점 공부한걸 잘 활용하자.. 아 그리고 앞으론 TIL 하는 것도 조금 더 간편하게 적고 블로깅도 외워야하는 키워드 위주로, 내가 정말 모르겠고 이해가 필요한 것만 정리해볼가 한다.. 존경하는 개발자분께서 말씀하시길 개발 블로그나 노트는 검색하면 바로바로 나오는 것을 적는 것이 아니고 내가 꼭 기억해야 할 것을 적어야 한다고 하셨다. 급하게 기록하는 것보단 내가 이해하는 것이 중요하니 꼭 유념할 것! (사실 난 노트 정리하면서 이해도 되는 편이라 그렇게 하는 경우도 많았던 것 ..