728x90 반응형 Web114 리액트 기초 강의 (2) - Create React App & React Router Dom 1. CRA(create-react-app) - 원래 리액트 앱을 처음 실행하기 위해서는 babel이나 webpack 같은 것들을 설정하기 위해서 오랜 시간이 걸렸음 => Babel : 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서, 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜줌 => Webpack : html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이며, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 줌 - but, create-react-app Commnand로 바로 시작할 수 있게 되었음 npx create-react-app . - npm/npx란? => npm(Node package m.. 2022. 3. 1. 리액트 기초 강의 (1) - 기본 개념 1. React : JS에서 HTML을 포함하는 JSX라는 간단한 문법과 단방향 데이터 바인딩을 사용하고 있으며, Virtual DOM이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적한 라이브러리 => 웹 프레임워크로서, 자바스크립트 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용됨 => facebook에서 제공해주는 프론트엔드 라이브러리 => 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있음 2. 특징 1) Data Flow => 리액트는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가짐 (복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있음) 2) Component 기반구조 => 독립적인 단위의 소프트웨어 모듈 => .. 2022. 2. 28. 노드 기초 강의 (11) - 로그아웃 기능 1. logout route 구현 순서 => logout route 만듦 => logout 하려는 유저를 데이터베이스에서 찾음 => 그 유저의 토큰을 지움 - 데이터베이스에서 유저의 토큰을 삭제하면 인증이 되지 않아 로그인 기능이 풀려버리기 때문에 해당 유저의 토큰을 지워주면 됨 2. logout route 구현 1) Get을 이용해서 logout route 코드 작성 - 로그인 된 상태에서 토큰을 지워 auth 인증으로 확인해서 로그아웃을 해야하기 때문에 미들웨어로 auth를 넣어줌 app.get('/api/users/logout', auth, (req,res) => {}) 2) 로그아웃 하려는 유저를 데이터베이스에서 찾기 - User 모델을 가져와서 User를 찾은 후, User 데이터에 대한 업데이.. 2022. 2. 28. 노드 기초 강의 (10) - Auth 기능 1. Auth 1) Auth : 인증, 권한부여 등의 줄임말로 인증은 자신이 누구라고 주장하는 사람을 확인하는 절차이며, 권한부여는 가고 싶은 곳으로 가도록 혹은 원하는 정보를 얻도록 허용하는 과정 => Auth Route란 쉽게 말해 인증 기능을 구현하는 것 2) 페이지마다 로그인이 되어 있는지 안되어 있는지 확인하고, 페이지에 권한이 있는 관리자 유저인지 등을 체크하기 위해 Auth Route가 필요함 3) Auth Route 구현방법 => 토큰을 만들면서 Client에는 Cookie, Server에는 DB에 저장을 해줬고, 서버와 클라이언트에 있는 두가지 토큰이 일치하는가를 계속적으로 체크해서 인증 권한을 확인해줌 2. Auth Route 구현 1) 구현 순서 => Cookie에서 저장된 Token.. 2022. 2. 28. 4. 머스테치로 화면 구성 1. 서버 템플릿 엔진과 머스테치 1) 템플릿 엔진 : 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어 - 서버 템플릿 엔전 : Spring+JSP, Freemarker 등 => 서버 템플릿 엔진을 이용한 화면 생성은 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달 - 클라이언트 템플릿 엔진 : 리액트, vue의 view 등 => vue.js나 react.js를 이용한 SPA는 브라우저에서 화면을 생성하며, 서버에서 이미 코드가 벗어난 경우 2) 머스테치 : 수많은 언어를 지원하는 가장 심플한 템플릿 엔진 - 루비, 자바스크립트, 파이썬, PHP, 자바, 펄, Go, ASP 등 현존하는 대부분 언어를 지원하고 있음 - 자바에서 사용될 때.. 2022. 2. 28. 노드 기초 강의 (9) - 로그인 기능 with Bcrypt & 토큰 생성 with JSON WEBTOKEN 1. 로그인 기능 만들기 수선 1) 데이터베이스에서 요청한 E-mail 찾기 (.findOne() 메서드 이용하기) 2) 데이터베이스에서 요청한 E-mail이 있다면 비밀번호가 같은지 확인 (Bcrypt 이용해서 plain password와 암호화된(Hashed) 패스워드가 같은지 확인) 3) 비밀번호까지 같다면 Token을 생성 (토큰 생성을 위해서 JSON WEBTOKEN 라이브러리를 다운로드) 2. DB에서 요청한 E-mail 찾기 1) .findOne()이란 - 몽고DB 메서드로 데이터를 검색할 때 사용됨. - find()를 통해 데이터를 찾을 수 있지만, 여러 데이터 중에서 하나의 객체만 찾고 싶을 때 .findOne() 사용함 app.post('/login', (req, res) => { //.. 2022. 2. 27. 노드 기초 강의 (8) - Bcrypt로 비밀번호 암호화 1. Bcrypt : Blowfish를 기반으로 만들어진 단방향 암호화 해싱함수이며, Rainbow table 공격을 막기 위해 salt를 사용하며, 암호검사 요청이 반복될수록 cost를 늘림으로써, 무차별 대입 공격(brute-force search)를 막을 수 있음 (cost는 반복횟수로 2^n) - npm install bcrypt --save - Bcrypt 비밀번호 암호화 순서 const express = require('express') const app = express() const port = 6660 const config = require('./config/key'); const {User} = require("./models/User"); const bodyParser = requi.. 2022. 2. 27. 노드 기초 강의 (7) - 비밀 설정 정보 관리 1. 소스코드를 Gist에 업로드하면 다른 사람들이 비밀 정보들을 다 볼 수 있기 때문에, 비밀 정보들을 private하게 관리해야 됨 .gitignore : .gitignore 파일을 이용하면 파일 안에 들어있는 내용들을 Gist에 업로드 하지 않도록 관리할 수 있음 Local(Development) : 개발 모드 Deploy(Production) : 운영 모드 2. 개발 모드 private 설정 - 비밀 정보를 변수에 담아 사용 가능하며, 몽고디비의 아이디와 비밀번호가 담긴 코드를 private 하게 설정하고 싶은 경우 - config 폴더에 key.js, dev.js, prod.js 파일을 만듦 - dev.js 파일에 변수로 담아 관리하면 되며, - Heroku 사이트에서 프로그램을 활용하여 간단하.. 2022. 2. 27. 3. SpringBoot에서 JPA로 데이터베이스 활용 1. JPA 소개 - 개발자는 객체지향적으로 프로그래밍하고, JPA가 이를 관계형 데이터베이스에 맞게 SQL을 대신 생성해서 실행함. - 개발자는 항상 객체지향적으로 코드를 표현할 수 있으니 SQL에 종속적인 개발을 하지 않아도 됨 1) Spring Data JPA - JPA : 인터페이스로서 자바 표준명세서이며, 인터페이스인 JPA를 사용하기 위해서는 구현체가 필요함 ex) Hibernate, Eclipse, Link 등이 있음 - Spring Data JPA : 구현체들을 보다 쉽게 사용하고자 추상화 시킨 모듈로서, 관계는 아래와 같음. (JPA 이외에도 필터(@Filter), 인터셉터, 컨트롤러 어드바이스 등 외부 요청과 응답에 대한 전반적인 영역을 말함 - Service Layer => @Serv.. 2022. 2. 27. 노드 기초 강의 (6) - Nodemon 설치 1. Nodemon : NODE 서버를 이용하면서 코드를 변경하게 될 경우, 변경한 코드를 웹 상에서 확인하려면 서버를 껐다가 다시 켜야 변화를 감지할 수 있음 => 서버를 내리고 올리지 않아도 소스를 변경할 때 바로 감지해서 자동으로 서버를 재시작 해주는 도구 - nodemon 설치 ('npm install nodemon --save-dev') { "name": "boiler-plate", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node index.js", //노드몬 스크립트 실행을 위한 코드 "backend": "nodemon index.js",//backend는 임의로 지정한 것, 아무 이름이.. 2022. 2. 26. 이전 1 2 3 4 5 6 ··· 12 다음 728x90 반응형
