Juni_Dev_log

패스포트(Passport)는 노드에서 사용할 수 있는 사용자 인증 모듈이다. 이 모듈은 사용 방법이 간단할 뿐만 아니라, 사용자 인증 기능을 독립된 모듈 안에서 진행할 수 있도록 도와준다. 특히 익스프레스를 사용할 경우에는 미들웨어로 끼워 넣을 수 있어 몇 가지 간단한 설정만으로도 로그인 기능을 구현할 수 있다. 패스포트 모듈의 유일한 목적은 클라이언트에서 요청한 인증 정보(아이디나 비밀번호)로 사용자 인증을 하는 것이다. 따라서 이외의 기능은 패스포트 모듈이 아닌, 다른 코드에서 담당해야한다. 순전히 인증 기능만을 담당하는 모듈이다. 패스포트는 수백 가지의 인증방식을 제공하는데, 어떤 인증 방식을 사용할 것인지 결정하는 것이 스트래티지(Strategy)이다. 각각의 인증 방식은 각각의 스트래지로 만들어..

pug 포맷은 웹 문서의 태그를 그대로 사용하지 않고 최대한 간단한 형태로 입력하기 때문에 공백과 들여쓰기를 기준으로 태그의 구조가 결정된다. 따라서 pug 포맷을 사용하면 HTML 태그를 사용하는 것보다 훨씬 적은 내용을 입력해도 웹 문서를 만들 수 있다. pug를 사용할 때는 ejs와 마찬가지로 뷰 템플릿 파일을 먼저 만들고 pug 뷰 엔진에서 응답 웹 문서를 만들 때 사용한다. ⚙️ 설치 %npm install pug -g 를 통해서, pug 를 먼저 설치후 진행한다. 먼저 pug 로 템플릿 문서를 만들어보자. [ViewExample2] 를만들고 복사해서 app.js 에서의 뷰 엔진을 pug로 변경한다. # app.js 1 2 3 4 5 6 7 8 9 ... //===== 뷰 엔진 설정 =====/..

최근에 만들어진 새로운 언어들은 대부분 MVC 패턴(Model-View-Controller 패턴)을 사용한다. 즉, 눈에 보이는 부분은 View / 뷰로 표현되는 데이터를 제공하는 것은 Model / 처리되는 과정을 담당하는 것은 Controller 로 구분하여 구성하면 구조를 더 쉽게 이해할 수 있다. 노드와 익스프레스도 지금까지 만든 각각의 기능을 뷰, 모델, 컨트롤러로 나눌 수 있다. 사용자 요청을 처리하는 라우팅 함수 -> 컨트롤러(Controller) 데이터베이스에 데이터를 저장하거나 조회하는 함수 -> 모델(Model) 사용자에게 결과를 보여 주기 위해서 만든 파일 -> 뷰(View) 그중에서, 뷰에 해당하는 부분을 살펴보면, 지금까지 사용자에게 결과를 응답으로 보낼 때 자바스크립트 코드를 직..

app2.js 파일을 노드로 실행하면 웹 서버가 실행된다. 이제 사용자는 필요한 정보를 요청해서 받아볼 수 있다. 사용자가 웹 브라우저를 열고 웹 서버로 데이터 조회를 욫어하고 싶다면 login.html 같은 웹 문서를 띄워보자. 이와 같이 사용자는 웹 문서를 주로 보게 되므로, 웹 문서가 이쁘게 보이는 것이 중요하다. 최대한 간단한 방법으로 꾸며보도록 한다. Semantic UI 라이브러리로 웹 문서 꾸미기 원래는 CSS와 자바스크립트를 사용해야하지만, 코드의 양을 줄이고 싶다면, UI 라이브러리를 사용하면 된다. 다양한 UI 라이브러리 중에서 Semantic UI 라이브러리는 태그만으로도 버튼이나 입력 상자와 같은 웬만한 UI 구성요소를 만들 수 있다. semantic-ui.com/ Semantic ..