여기서 알아볼 개념 - 각 URL별 접속 요청 처리 - 클라이언트의 GET / POST 요청(데이터, 파일 전송) 및 서버 응답 - static 폴더를 지정해 편의성 향상 0. 사전 설치 Node.js https://velog.io/@gwak2837/Node.js-%EC%84%A4%EC%B9%98 Yarn 설치 (선택) 설치...
참고: Express 공식 사이트에서 공부를 하면 좋다.(google 검색) Ex1) console.log(req.url) = localhost:3000 ~javascript const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; const server = h...
Node.js란 무엇일까...? Node.js는 싱글 스레드 기반으로 동작하는 고성능의 비동기 IO(Async / Non-Blocking IO)를 지원하는 네트워크 서버로 Google Chrome V8 엔진을 사용했으며, Javasccript, Event Loop를 사용한다. Node.js의 장점은... javascript 기반이라 Front ...
1. CORS란? - 같은 주소, 같은 포트에 있는 리소스를 불러올 때는 문제가 없지만 다른 출처의 리소스를 요청하게 되면 보안적인 문제로 기본적으로 이를 차단함. CORS (Cross Origin Resource Sharing) :HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록하는 메커니즘 (...
Today What I Learned Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다. * 1. 인증(authentication) 관련 개념 정리 1. 쿠키(cookie)란? - 서버가 사용자 위치에 정보를 저장하고 불러올 수 있는 수단 - 서버와 클라이언트가 대화하는 수단이라고도 볼 수 있음 - 브라우저가 서버와 연...
react를 배우면서 겪은 내용들을 로그해봅니다. 프론트는 React(with axios)로 작성하였고 백앤드는 node.js, express를 사용하여 API 서버로 구성하였습니다. 자세한 코드들은 생략합니다. 1. React에서 컴포넌트 작성 1.1 우선 React에서 ant design의 Dragger 컴포넌트를 작성합니다.
개요 React Native 개발자 1명과 함께 작은 프로젝트를 시작하며 프로젝트 시작에 대한 LOG를 남겨보려 한다.
Back-end 개발환경은 Node.js로 하고 프레임워크는 express를 사용하기로 했다. Server 개발환경 세팅 순서는 1. npm 설치 : node와 npm은 설치가 되어있다. 2. express 설치 & Hello World express 공식문서 : https://expressjs.com/ko/ 3. eslint & prettier 설정 ...
초보자가 생각 정리를 위해 작성한 글입니다. 내용에 오류가 있는 경우, 피드백을 주시면 감사하겠습니다. res.locals Express 공식 문서 res.locals의 설명 요청에 대한 응답 로컬 변수를 포함하는 객체로서, 요청/응답 주기 동안 렌더링된 view(있는 경우)에만 사용할 수 있습니다. 이 프로퍼티는 request path na...
서버 공부를 시작하며 요청에 대한 응답을 주는 과제를 하는 중에 node.js 의 모듈 bodyParser의 존재를 알게 되었다. bodyParser 모듈 없이는 post, put 요청 메소드의 request.body를 읽어올 수 없어 일단 사용하긴 했는데 과제를 마치고서 어쩐지 짚어 넘어가야 할 것 같아 찾아보고 이해한 자료까지만 간단히 정리한다. &n...
초보자가 생각 정리를 위해 작성한 글입니다. 내용에 오류가 있는 경우, 피드백을 주시면 감사하겠습니다. 템플릿 상속 extends 동일한 레이아웃을 가진 페이지를 여러개 만들어야한다면 도움이 되는 기능입니다. 페이지마다 달라져야하는 곳에는 block 이름을 씁니다. (여러 개를 써도 됩니다.) mixin의 활용은 무궁무진합니다....
초보자가 생각 정리를 위해 작성한 글입니다. 내용에 오류가 있는 경우, 피드백을 주시면 감사하겠습니다. pug을 사용할 때 기억해야할 점 들여쓰기 들여쓰기가 제일 중요하다. HTML과 같이 닫는 태그가 없기 때문에 들여쓰기로 태그들의 포함관계들을 파악한다. pug 문법 DOCTYPE
초보자가 생각 정리를 위해 작성한 글입니다. 내용에 오류가 있는 경우, 피드백을 주시면 감사하겠습니다. 템플릿 엔진이란? 정적으로 웹사이트를 만드는 방법과 동적으로 웹사이트를 만드는 방법의 장단점을 잘 결합하여 생긴 새로운 방법. pug(jade), ejs, handlebars, mustache 등 여러 템플릿 엔진들이 존재한다. 나는 pug를 사용...
초보자가 생각 정리를 위해 작성한 글입니다. 내용에 오류가 있는 경우, 피드백을 주시면 감사하겠습니다. 문제점 다음 예시 코드를 보자.
초보자가 생각 정리를 위해 작성한 글입니다. 내용에 오류가 있는 경우, 피드백을 주시면 감사하겠습니다. route는 뭘까? route는 네이버 영어사전 route에 의하면 다음과 같은 뜻들을 가진다. - (한 곳에서 다른 곳으로 가기 위해 따라가는) 길[경로/루트] - (특정한 루트를 따라 무엇을) 보내다 나는 아래 코드 한 줄 한 줄을 ro...
초보자가 생각 정리를 위해 작성한 글입니다. 내용에 오류가 있는 경우, 피드백을 주시면 감사하겠습니다. Middleware? 내가 express에서 middleware를 사용하면서 느낀 정의는 다음과 같다. 양 쪽 함수를 잇는 역할을 하는 함수 한 문장으로 표현할 수 있는, 이론적인 단어들이 생각이 안난다... 대신 middleware를 상황에...
초보자가 생각 정리를 위해 작성한 글입니다. 내용에 오류가 있는 경우, 피드백을 주시면 감사하겠습니다. 되돌아보기 본격적으로 시작하기 전에 Javascript FullStack 002 앞으로 할 일에서 HTTP 요청에 대해서 공부를 하겠다고 말했습니다. 여기서 GET 요청이 등장하므로 먼저 HTTP 요청이 뭔지 짚고 넘어가려고 했으나.. HTTP ...
초보자가 생각 정리를 위해 작성한 글입니다. 내용에 오류가 있는 경우, 피드백을 주시면 감사하겠습니다. Express 맛보기 index.js 파일을 만들고 아래 내용을 입력해보자. express 애플리케이션을 만들고 app이라는 상수에다가 할당을 했습니다. 그리고 app은 4000번 포트를 바라보고 있으며 listen이 완료되면 콘솔에 로그가 ...
Swagger가 뭐야? swagger.png 백엔드 프로그램과 프론트 프로그램 사이에서 정확히 어떤 방식으로 데ㅣ터를 구조 받을 지에 대한 명세서인 API를 관리할 수 있는 도구이다. 지금까지는 엑셀파일이나 깃위키로 작성하였는데 조금 더 편한 방법을 보다가 스웨거라는 API관리 도구가 있다는 소식을 듣고 빠르게 적용해보도록 하겠다. (사실 지니가 공모전 하...
Gongzza's Blog를 따라해보며 기본적인 감을 익히려 합니다. 1. Setting 작업할 directory를 만들고 스크린샷, 2019-12-08 22-08-47.png...