elice/WIL
[week_08] React 기초 Ⅰ(2) JSX와 컴포넌트
1. JSX 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장 HTML과 비슷하게 생겼으나 JavaScript이고, HTML과 다른 부분이 있다. JSX는 Babel에 의해서 Transcompile 된다. 1-1. JSX의 장점 1) 개발자 편의성 향상 2) 협업에 용이 / 생산성 향상 3) 문법 오류와 코드량 감소 1-2. JSX의 특징 (HTML과 차이점) 1) HTML 태그 내에 JavaScript 연산 const App = () => { const a = 3; const b = 6; return {a} + {b} = {a+b} } 2) class ➡ className ( {name}님 안녕하세요. ) 3) 스타일은 object로 작성 ( {name}님 안녕하세요. )..
→2022.02.28
elice/WIL
[week_08] React 기초 Ⅰ(1) OT
1. SPA (Single Page Application) 클라이언트가 서버로 최초 접속 요청을 보내면, 서버로부터 HTML을 전달 받는다. 그 후 페이지의 변경이 필요할 때 변경이 필요한 부분을 JSON으로 전달 받는다. 이 때, 페이지에서 변경된 부분만 계산하여 다시 그리게 된다. (전통적인 페이지의 경우, 변경이 있을 때마다 HTML을 새로 받아서 페이지를 처음부터 다시 그림) 👉 React를 사용하게 되면 이러한 행위를 편리하게 할 수 있다! 2. React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 Component : React의 독립적인 단위 Virtual DOM : 가상적인 표현을 메모리에 저장하고, ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로..
→2022.02.28
elice/WIL
[week_07] 3계층 설계 (3-Layer architecture)
1. 3계층 구조란 백엔드 코드를 아래와 같은 3개 구조로 나누어 구현하는 것 1-1. Controler layer (컨트롤러) 사용자의 요청(request)을 분석한 후, 알맞은 서비스로 해당 요청을 전달해 준 다음, 서비스의 결과를 다시 응답 (response)하는 층 라우팅 (Routing)이 이루어지는 층 express의 경우, req.params(), req.body(), res.status(), res.send() 와 같은 코드 작성 1-2. Service layer (서비스) 컨트롤러로부터 전달된 요청에 로직을 적용하는 층 예) 로그인 요청이 들어오면 해당 ID의 사용자가 DB에 존재하는지의 여부를 판단하고, 그 후 비밀번호의 일치여부를 판단해서 로그인 성공/실패 여부를 결정하는 등의 로직 ..
→2022.02.26
elice/WIL
[week_07] Express.js와 MongoDB로 웹서비스 만들기 (3) | JWT, OAuth, Nginx
1. JWT JSON Web Token 인증을 위한 정보를 전자 서명을 이용해서 확인하는 방법 Web Token ➡ 데이터를 웹에서 사용하기 위한 스펙 ➡ base64 인코딩 사용 1. header - 토큰의 타입(jwt), 데이터 서명 방식 2. payload - 전달되는 데이터 3. signature - 헤더와 페이로드의 전자서명 payload는 decode 시 정보가 노출되기 때문에, 민감한 정보를 제외하고 토큰을 생성해야 한다. 서버가 JWT를 생성할 때, 비공개키를 이용해서 서명 ➡ payload 조작하면 서명이 불일치 ➡ 인증 실패 ✨ JWT 작동 방식 1. 사용자가 로그인 2. 서버가 로그인된 유저 정보를 JWT로 생성하여 클라이언트에 전달 3. 클라이언트는 전달받은 JWT를 이용하여 인증이..
→2022.02.25
elice/WIL
[week_07] Express.js와 MongoDB로 웹서비스 만들기 (2) | Hash, Session, 로그인/회원가입
1. Hash 비밀번호를 저장할 때 사용 문자열을 되돌릴 수 없는 방식으로 암호화하는 방법 hash 출력값을 이용해서 사용자의 비밀번호를 알아낼 수 있다. 비밀번호의 Hash 값을 데이터베이스에 저장하고, 로그인 시 전달된 비밀번호를 Hash하여 저장된 값과 비교해서 로그인 처리 1-1. Node.js에서의 Hash 사용법 crypto 모듈을 사용해서 hash 값을 얻을 수 있다. const hash = crypto.createHash('sha1'); // 특정 해쉬 알고리즘 설정 hash.update(password); // 입력받은 평문 put hash.digest('hex'); // 16진수 문자열로 출력 간단하게 sha1 알고리즘을 사용하거나, 보다 강력한 sha224, sha256 등을 알고리즘..
→2022.02.23
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/WIL
[week_06] asyncHandler, Pagination, PM2 Process Manager
1. asyncHandler request handler를 async function으로 작성하면서 try ~ catch, next를 자동으로 할 수 있도록 구성한 아이디어 requestHandler를 매개변수로 갖는 함수형 미들웨어 전달된 requestHandler는 try ~ catch로 감싸져 asyncHandler 내에서 실행 throw되는 에러는 자동으로 오류처리 미들웨어로 전달되도록 구성됨 const asyncHandler = (requestHandler) => { return async(req, res, next) => { try { await requestHandler(req, res); } catch(err) { next(err); } } } // ----------------------..
→2022.02.18
elice/WIL
[week_06] Template Engine
1. 템플릿 엔진 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장 동작 시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능 제공 1-1. Express.js의 템플릿 엔진 EJS: html과 유사한 문법의 템플릿 엔진 Mustache: 간단한 데이터 치환 정도만 제공하는 경량화된 템플릿 엔진 Pug: 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃 등 강력한 기능 제공 2. Pug 들여쓰기 표현식을 이용해 가독성이 좋고 개발 생산성이 높음, HTML을 잘 모르더라도 문법적 실수를 줄일 수 있음 layout, include, mixin 등 강력한 기능 제공 html head title= title body h1#gr..
→2022.02.18

• 이전
• 1
• 2
• 3
• 4
• 5
• 다음