캡스톤 4주차 중간발표

캡짱스톤

이강호, 박인규, 한정

Server Side

진행 내용

• DB-CRUD 구조 구현
• 로그인

CRUD

- C : Create - INSERT

- R : Read - SELECT

- U : Update - UPDATE

- D : Delete - DELETE

로그인

Passport-js

Federation 인증을 통합하여 비슷한 양식으로

인증이 이루어질 수 있게 해주는 모듈

 미들웨어 -> stragtegy -> serialize -> deserialize 형태

Session -  공통적으로 로그인 정보 저장

동작 방식

local 로그인 

- mysql에 데이터 저장

facebook 로그인 

페이스 북으로 요청 -> 페이스 북에서 확인 ->

정보 실어 웹으로 다시 재 전송 -> 웹에서 정보 받아 처리(DB저장)

향후 진행될 내용

회원가입 이메일 인증

데이터베이스 설계

서버 구조 완성

Frontend

중요 라이브러리 소개

JavaScript

• 세상에서 가장 많이 쓰이고 있는 언어
• 엄청난 속도로 발전하고 있는 자바스크립트
• 일반적인 인식과 다르게 엄청나게 고도화 되어가고 있다
• 다양한 환경에 지원 가능
  • React Native, Phone Gap
  • Electron

React

• Facebook에서 만든 Javascript Framework
• 다양한 기업에서 사용중
  • Netflix
  • Facebook
  • Airbnb
  • 쿠팡
• 상태의 변화를 감지하고 자동으로 화면 렌더링
• VirtualDOM을 사용하기 때문에 상대적으로 빠르다

Flux Architecture

• Facebook에서 고안한 새로운 아키텍쳐
• 기존 MVC와 다르게 단방향 데이터 흐름이 특징
• 사용자와 Interaction이 많은 페이지의 적합하다
• 다양한 구현체가 있지만 Redux를 사용

Babel

• Javascript transpiler
• source to source compiler
• 자바스크립트 최신 기능을 하위 브라우저에서도 사용할 수 있도록 해준다

Webpack

• 자바스크립트 모듈화 도구
• 언어에서 모듈화를 지원하지 않기 때문에 사용하는 도구
• 컴파일 속도가 빠르다
• Loader를 사용해서 다양한 리소스들을 자바스크립트내에서 사용할 수 있게 해준다

ESLINT

• 에러가 발생할 만한 코드를 미리 표시해주는 용도
• 코딩 컨벤션을 통일하기 위해서 반드시 사용
• 가장 유명한 Airbnb Coding Convention을 사용
• Bullet Three

SASS

• CSS을 좀 더 확장해서 사용할 수 있게 해준다
• 믹스인, 변수, 연산 및 상속 사용가능
• Webpack을 사용해서 변환

감사합니다!