[BE] Passport.js를 활용한 간단한 회원인증 구현

1. 필요한 모듈 설치 npm install express passport passport-local express-session mongoose passport, passport-local : 회원가입과 로그인 세션관리를 도와주는 모듈 express-session : 세션관리를 위한 모듈 2. app.js 기본 세팅 const express = require("express"); const app = express(); const passport = require("passport"); var Strategy = require("passport-local"); const session = require("express-session"); const mongoose = require("mongoose")..

→2022.03.07

elice/study

[CS] AJAX

1. AJAX란? Asynchronous Javascript And XML 비동기적으로 JS를 사용해서 데이터를 받아와서, 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법 2. 어떻게 동작하는가? 사용자가 AJAX가 적용된 UI와 상호작용하면, 서버에 AJAX 요청을 보내게 된다. 서버는 DB에서 데이터를 가져와서 JS 파일에 정의되어 있는 대로 HTML/CSS와 데이터를 융합하여 만든 DOM 객체를 UI에 업데이트 시킨다. 비동기로 이루어지며, 기존의 페이지를 전부 로딩하는 방식이 아닌 일부만 업데이트 하는 방식이다. 3. 어떻게 사용하는가? 3-1. XMLHttpRequest 일반적으로 XMLHttpRequest 객체를 사용하여 인스턴스를 만들어 인스턴스의 open(), send() 등의 메소드를 ..

→2022.02.28

elice/study

[BE] REST API

1. REST (Representational State Transfer) 어떤 자원에 CRUD 연산을 수행하기 위해 URI로 요청을 보내는 것 HTTP URI를 통해 자원을 명시하고, HTTP Method를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것 각 요청이 어떤 동작이나 정보를 위한 것인지를 그 요청의 모습 자체로 추론 가능 1-1. 구성요소 1) 자원(Resource) : HTTP URI 2) 자원에 대한 행위(Verb) : HTTP Method (GET, POST, PUT(PATCH), DELETE) 3) 자원에 대한 행위의 내용(Representations) : HTTP Message Payload (JSON, XML, RSS 등) 1-2. REST가 왜 필요한가? 각 요..

→2022.02.21

elice/study

[BE] 라우팅(Routing)

1. 패킷(Packet) 네트워크를 통해 전송되는 데이터의 작은 조각 실제 통신에서 데이터는 패킷 단위로 쪼개져서 전송된다. 큰 데이터를 하나의 회선으로 전송하게 되면 시간이 오래걸리고, 중간에 정보가 손실되었을 때 재전송하기에도 비효율적이기 때문이기 때문이다. 2. 라우팅(Routing) 경로 정보를 기반으로 현재의 네트워크에서 다른 네트워크로 최적의 경로를 통해 데이터를 전송하는 기법 패킷을 전송하기 위해 송신자측에서 목적지까지의 경로를 정하고, 정해진 경로를 따라 패킷을 전달하는 과정 IP가 네트워크 장치가 갖는 고유의 주소라고 하면, 라우팅은 그 주소를 찾아가는 과정 라우팅에는 목적지 주소, 토폴로지, 트래픽 부하, 링크 비용(라우팅 매트릭) 등의 정보가 사용된다. 2-1. 라우터(Router) ..

→2022.02.14

elice/study

[CS] 시맨틱 마크업

1. 시맨틱 마크업 시맨틱(Semantic)이란 '의미론적인'의 뜻을 가지며, 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 2. 작성 방법 시맨틱 마크업을 하기 위해선 각 태그를 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다. 헤더/푸터에 와 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션에 사용 이런 식으로 태그가 가지고 있는 의미에 맞게 사용하는 것이다. 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자..

→2022.02.14

elice/study

[CS] script, script async, script defer

HTML 파싱이 중단되고 즉시 스크립트가 로드되며, 로드된 스크립트가 실행되고 파싱이 재개된다. HTML 파싱과 병렬적으로 로드가 되는데, 스크립트를 실행할 때는 파싱이 중단된다. 구글 애널리틱스와 같이 다른 스크립트가 의존하지 않는 독자적인 스크립트를 로드할 때 적합하다. HTML 파싱과 병렬적으로 로드가 되는데, 파싱이 끝나고 스크립트를 로드한다. 보통 태그 직전에 를 삽입하는 것과 동작은 같지만, 브라우저 호환성에서 다를 수 있으므로 그냥 태그 직전에 삽입하는 것이 좋다. ❗ 주의할 점은, async와 defer의 경우 src 속성이 없으면 적용되지 않는다. 보다 자세한 내용은 여기에서도 확인할 수 있다. 참고 https://github.com/baeharam/Must-Know-About-Front..

→2022.02.14

elice/study

[CS] local storage vs session storage vs cookie

local storage, session storage 그리고 cookie는 모두 클라이언트 상에서 key/value 쌍을 저장할 수 있는 메커니즘으로, value는 반드시 문자열이어야 한다. 또한, 모두 동일 출처 정책(SOP)을 따르기 때문에 다른 도메인에서 접근할 수 없다. 동일 출처 정책(Same-Origin Policy) 어떠한 문서나 스크립트가 다른 프로토콜/포트/호스트에 있는 리소스를 사용하는 것을 제한하는 정책 예를 들어, 다음과 같은 사이트에서 리소스를 다른 곳으로 요청한다고 하자. http://website.com/ex/ex.html 그러면 리소스 요청 결과는 다음과 같다. 1️⃣ http://website.com/ex/ 👉 성공 2️⃣ http://website.com/ex1/ 👉 성..

→2022.02.10

elice/study

[CS] data- 속성

DOM에 데이터를 저장할 수 있는 사용자 정의 데이터 속성 data- 다음에 오는 값이 데이터가 된다. 사용하고자 하는 용도에 적합한 소성이나 요소가 없을 때 사용 해당 웹페이지가 독자적으로 사용하는 값 즉, 웹페이지와 독립적인 소프트웨어가 이 속성을 사용해서는 안된다. 예를 들어, 음악 사이트에서 앨범 트랙의 음악을 리스트 형식으로 나타내는데 그걸 시간 순으로 정렬하기 위해서 data- 속성으로 음악 시간을 삽입한다고 하자. 빨간맛 ... 만약 이 음악사이트와 전혀 상관이 없는 외부에서 음악 시간을 알아내기 위해 사용한다면 목적에 부합하지 않는 것이다. 따라서, data- 속성은 해당 사이트만의 자체 스크립트를 위한 속성이라고 할 수 있다. 좀 더 자세한 사용 방법은 여기에 정리해두었다. 참고 http..

→2022.02.10

티스토리툴바