즐코

1/ 코드의 분리 2/ express의 router 기능 3/ session 모듈 사용 1/ 코드의 분리 디자인 패턴 - 코드를 분리하는 디자인 MVC Model (특정 데이터를 담는 변수 - 객체나 배열 등) View (화면 표현 - html) Controller (M과 V를 컨트롤 하는 파일) 디자인패턴 MVC에 기반해서 우리는 코드를 효율적으로 분리해야한다. 처음 게시판/로그인 구현 시 모든 라우터, 미들웨어를 다 server.js에 다 때려박았다. 지금은 전반적인 로직을 배우기 위해 만든 초간단 사이트이므로 코드도 그다지 길지 않았고, 나혼자 보는 코드니까 코드별 기능 분간이 쉬웠다. 하지만, 실제 사이트는 코드 양이 방대하고, 팀원들이 각자 분업해서 코드를 작성할 것이다. 근데 이 때 한 파일을..

1/ 라우터와 미들웨어 2/ 미들웨어의 next 매개변수 3/ 라우트 매개변수 4/ 미들웨어 static 1/ 라우터와 미들웨어 - router 라우터 (요청에 대한 내용을 처리하는 부분) 클라이언트(브라우저)로부터 URI 및 요청 method를 받았을 때, 그 요청에 대응하는 역할 즉, 미들웨어를 실행시켜주는 역할 - middleware 미들웨어 (응답에 대한 내용을 처리하는 부분) 라우터의 함수 / 클라이언트(브라우저)에게 응답으로 줄 내용, 데이터를 작성하는 부분 기본적으로, router는 위에서부터 아래로 순차적으로 코드를 실행한다. 따라서, app.use같은 어떤 요청이든 다 실행하는 라우터가 있으면, http://localhost:3000 건 http://localhost:3000/profil..

1/ 세션 1. 세션이란? 2. 쿠키없이 세션으로만 가능? 3. 세션은 어떻게 사용하나 ? 2/ 세션 기반 로그인 기능 구현해보기 1/ 세션 1. 세션이란? 어제 배웠던 쿠키는 사용자 데이터(쿠키내용)의 저장을 사용자 측 브라우저가 해주기 때문에, 다른 누군가가 내가 로그인했던 컴퓨터의 브라우저를 파보면 쿠키가 쉽게 노출되므로, 보안에 취약하다. 이런 점을 보완하기 위해서, 보안을 요하는 데이터는 서버가 저장해주는 것이 세션이다. 쿠키와 세션 : http통신의 불편한(?) 특성 (요청-응답이 한번왔다갔다하면 남이 되는 사이)을 보완하기 위해서 만들어짐 한 사이트 내에서 서버가 각 특정 사용자를 인지해서 그 인지한 상태를 유지하기 위한 인식표, 인증서 같은 개념 쿠키 : 데이터 보관의 주체 = 개인 / 클..

1. 로그인 기능 구현 1/임시데이터생성 2/메인 페이지에서의 router 구현 3/ 로그인 페이지 router 구현 (get과 post) 4/ 메인 페이지에서의 router 구현 추가 5/ 로그아웃 router 구현 6/ profile 페이지 router 구현 2. cookie-parser 만들어보기 1. 로그인 기능 구현 1/ 임시데이터 생성 이건 DB 로 따로 처리해야하는 건데 배우는 단계이니 가입자가 한명뿐인 거처럼..ㅋ 데이터를 임의로 만들어줌 저번 CRUD 게시판 만들기 배울 땐 파일을 따로 빼서 require - module.exports로 데이터를 불러왔는데, 이번엔 데이터가 하나뿐이니 그냥 메인 서버.js 파일 상에 넣음 2/ 메인 페이지에서의 router 구현 이건 저번 주에 배운 내용..

1/http 통신내용 2/브라우저의 역할 3/쿠키의 역할 4/쿠키는 어떻게 주는건가? 로그인 구현을 배우기 위해서는 쿠키/세션을 알아야한다. 오늘은 쿠키에 대해서 배웠다. 우선, 쿠키/세션을 잘 알려면 "http 통신 내용 & 브라우저의 역할" 이 두 내용이 선행되어야 한다. 1/ http 통신 내용 : http 통신규격에 맞춰서 클라이언트 측 브라우저가 요청을 보내면, 서버가 응답을 보내준다. 서버는 응답메시지로서 응답헤더+한줄띄고+응답바디를 보내줌을 배웠다. 이 때 서버측인 우리는 이 응답헤더를 조작하는 게 가능함을 기억하자.. 근데, 이 브라우저-서버간의 요청-응답은 한번 왔다갔다하면 끝나버린다. 즉, 다음 요청/응답에 영향을 주지 않는다. 서로 할일 끝내자마자 모르는 사이가 되버림 근데, 이런 특..

1/ nunjucks , 템플릿 엔진? 템플릿 엔진 == 자바스크립트를 사용해서 HTML 파일을 렌더링해주는 역할 nunjucks는 여러 template engine 들 중 하나이다. 자세한 예를 들자면, 우리가 프로젝트한 내용을 express를 통해서 넣으려고 한다. 그럴 경우, res.send()의 인자값으로 의 모든 코드를 넣어줘야하는데, 굉장히 복잡하고 불편해질거다. => 즉, html이 하는 역할과 express가 하는 역할(서버의 역할)을 구별하기 위해서 이 템플릿 엔진을 쓰는 것! 2/ nunjucks 설치 및 세팅 #1. 경로 확인하기 nunjucks도 express처럼 외부 라이브러리다. 즉, express처럼 설치를 해줘야한다. 이 때, 바로 설치하지 말고 경로 확인부터 필수로 해주기 ..

1/ Promise 맛보기 1- Promise의 목적 콜백 기능을 그대로 하되 코드를 조금 더 깔끔하게 만들어준다. 2- Promise 사용법 Promise 는 객체라는 게 포인트 지난번에 다뤘던 객체틀(붕어빵틀) 만들고 객체들(붕어빵)을 복사했던거를 복습해보면, 새로운 객체를 복사, 찍어낼 때 new라는 생성자를 썼었다. // 객체들을 찍어내는 틀을 만드는 방법1 (함수 쓰기) function person(name,job){ this.name = name; this.job = job; } // 객체들을 찍어내는 틀을 만드는 방법2 (class-constructor 쓰기) class person{ constructor(name,job){ this.name = name this.job = job } } /..

1/ require 와 module.export 2/ 자바스크립트 동작 원리 3/ 콜백함수 1/ require 와 module.export require은 Node.js의 모듈이고, require 문법은 표준 문법은 아니다. 표준에 없는데 왜 node.js는 이게 필요할까? #1. require 왜 쓰는거지? node.js에선 내가 실행할 파일만 해석해준다. 서로 다른 js 파일들이 같은 폴더 상에 존재해도 서로간의 데이터, 코드를 쉐어할수가 없다. node.js에서는 어떻게 다른 코드들과 연결시켜줄까? 이 때 쓰는게 require다. 반복되는 데이터, 기능별 코드를 묶어놓은 모듈을 다른 파일로 공유가 되게끔 도와준다. 그래서, express 라는 웹서버를 구축해주는 코드를 묶어논 패키지를 가져올 때 썼..

1/ 사용자,브라우저-서버 간의 역할 (요청과 응답) 2/ express 코드 작성 및 분석 (ft. 동기,비동기 / url) 1/ 사용자,브라우저-서버 간의 역할 (요청과 응답) 브라우저(사용자) 서버 사용자가 브라우저를 통해 url을 줘서 필요한 정보를 요청하고, 웹서버가 html,css,js 코드를 전달 즉, 응답을 해주면 브라우저가 그 응답을 받아서 텍스트를 읽어서 렌더링 해주는 것 http : 통신규격, 규약, 통신 방법을 통해 요청과 응답이 이루어진다. 요청 들어온 텍스트를 읽어서 요청을 한사람에게 text를 보내는 행위, 응답을 하는 코드를 작성할 것이다(express로!) 2/ Express 코드 작성 및 분석 #1. 아래의 응답 헤더 부분을 express가 작성해주고, 브라우저 - 개발자..

명령어에 대해서 정리해보았다. #1. pwd Print Working Directory 단어 그대로 일하고 있는 장소, 폴더를 출력해줘 라는 뜻 => 즉 pwd는 현재 나의 디렉토리 위치를 알고싶을 때 쓰는 명령어이다. #2. cd Change Directory 단어 그대로 directory를 바꿔줘 라는 뜻 내가 있는 위치에서 다른 디렉토리로 이동하고 싶을 때 쓴다. cd .. 현재 디렉토리의 상위 디렉토리로 이동 (이전 단계로 이동) cd ~ 현재 사용자의 home 디렉토리 내의 내 계정으로 이동 cd / 최상위 디렉토리로 이동 (이 이전의 디렉토리가 없다) 이를 root directory 라고 한다 root (cd /) => home => leeyj (cd ~) 컴퓨터를 키면 => 계정이 몇 개인지..