React – A JavaScript library for building user interfacesA JavaScript library for building user interfacesreactjs.org JSX ▶ JSX 란? : JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장. - HTML과 비슷하게 생겼으나 JavaScript이 고 HTML과 다른 부분이 있다.const App = () => { return ( 안녕 반가워 잘가 );} - JSX는 Babel에 의해서 Transcompile 된다. ( JSX → JavaScript..
React – A JavaScript library for building user interfacesA JavaScript library for building user interfacesreactjs.org Create React App ▶ Create React App (CRA) 란? React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 보일러플레이트(Boilerplate) - 수많은 React용 보일러플레이트가 있지만 Facebook에서 직접 만들어서 관리하는 Create React App이 가장 많이 쓰인다.- 프로젝트 생성에 필요한 다양한 기능을 Command로 제공한다. ▶ CRA의 장점 1) 개발자가 온전히 React App 개발에 집중할 수 있도록 한다. → ..
React – A JavaScript library for building user interfacesA JavaScript library for building user interfacesreactjs.org !! React를 배우기 전 알아두면 좋은 ES6 & ES2020 의 대표적인 8가지 문법 1) const, let - const : 한번 선언하면 값을 바꿀 수 없는 상수- let : 선언과 변경이 자유로운 변수 const로 선언된 변수는 같은 스코프(중괄호) 내에서 중복된 이름을 가질 수 없다. var는 let과 비슷하게 작동하는 듯 보이지만 함수 myFunc() 내에 선언된 변수 var a 의 경우 함수 밖에서 이 변수를 참조하여 값을 가져올 수 있다.함수 myFun..
React – A JavaScript library for building user interfacesA JavaScript library for building user interfacesreactjs.org !! React를 배우기 전 알아두어야 할 개념 - 단일 페이지 어플리케이션 (SPA) ▶ SPA (Single Page Application) 란? 전통적인 페이지: 최초에 서버로부터 HTML을 전달 받고, 페이지의 변경이 필요할 때 다시 서버에 요청하여 HTML을 전달 받는다.이 과정에서 페이지를 처음부터 다시 불러온다. (페이지가 새로고침됨) SPA (Single Page Application): 최초에 서버로부터 HTML을 전달 받고, 페이지의 변경이 필요할 때 변경이..
Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org OAuth ▶ OAuth 란? Open Authorization : 서비스 제공자가 다른 서비스에게 데이터를 제공하기 위해 서비스 사용자에게 제공하는 사용자 인증방식의 표준 ▶ OAuth의 동작방식 서비스 제공자에게 인증 요청 → 인증 완료 후 사용자 정보를 요청한 서비스로 전달 → 인증 정보를 이용해 서비스 제공자의 데이터 사용 ex) 구글 캘린더 연동 서비스를 만든다고 가정하면, 구글 OAuth 인증 요청 → 인증된 OAuth Token을 기록 → OAuth Token을 사용하여 구글 캘린더 API 사용 ▶ OAuth와 로그인 - OAut..
Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org JWT ▶ JWT 란? JSON Web Token : 인증을 위한 정보를 특별한 저장소를 이용하지 않고, 전자 서명을 이용하여 확인하는 방법 ▶ JWT의 구성 - header : 토큰의 타입(jwt), 데이터 서명 방식 - payload : 전달되는 데이터 - signature : header 와 payload의 전자서명 JWT 는 Web Token → 데이터를 웹에서 사용하기 위한 스펙이므로 웹에서 문제없이 사용할 수 있는 문자열로만 구성된 base64 인코딩을 사용 참고) JWT 홈페이지 JWT.IO JSON Web Tokens are a..
Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 회원과 게시글 연동하기 ▶ 회원-게시글 연동 기능 설명 1) 게시글 작성 시 로그인된 회원 정보를 작성자로 추가 2) 게시글-작성자는 populate하여 사용하도록 구현 3) 게시글 수정, 삭제 시 로그인된 유저와 작성자가 일치하는지 확인 4) 작성자의 게시글 모아 보기 기능 구현 ▶ 회원-게시글 연동 기능 구현하기 1) PostSchema 수정 - PostSchema에 author 추가 - populate를 사용하기 위해 ObjectID 사용 - ref를 유저 모델의 이름인 'User'로 선언 ... author: { type: Schema..
Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 회원가입 구현하기 ▶ 구현할 회원가입 기능 설명 이메일, 이름, 패스워드의 간단한 정도만 사용 1) 회원가입 페이지 구현 2) script를 이용해 이메일 형식, 비밀번호 길이 및 비밀번호확인 문자열과 일치여부 확인 3) form을 이용해 post 요청 전송 4) 회원가입 처리 및 redirect * 비밀번호 저장 시 암호화하여 저장 (Hash) Hash : 문자열을 되돌릴 수 없는 방식으로 암호화하는 방법 → hash 출력값으로는 사용자의 원래 비밀번호를 알아낼 수 없음 → 비밀번호의 Hash 값을 데이터베이스에 저장하고, 로그인 시 전달된..
Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Async Request Handler ▶ request handler의 오류처리 방법 - promise().catch(next) - async function, try ~ catch, next ▶ async request handler async의 비동기 처리는 매우 편리하지만 매번 try - catch 구문을 작성하는 것은 귀찮고 실수하기 쉬움 → request handler를 async function으로 작성하면서 try ~ catch, next를 자동으로 할 수 있도록 구성한 아이디어 const asyncHandler = (reque..
Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 프로젝트 개요 ▶ 간단한 게시판 제작하기 - PUG Template Engine 사용하기 - 기본적인 CRUD 동작을 하는 웹 만들기 - PM2 Process Manager 이용하여 Node.js 어플리케이션 관리하기 ▶ 구현할 기능들 게시판 기능 게시글 목록 / 상세보기 / 작성 / 수정 / 삭제 회원 기능 회원가입 / 로그인 / 비밀번호 찾기 추가 기능 Pagination / 구글 로그인 / 유저 작성글 모아보기 Template Engine ▶ Template Engine 이란 ? 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으..
