728x90 반응형 Web/React Node js23 리액트 기초 강의 (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. 노드 기초 강의 (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. 노드 기초 강의 (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. 노드 기초 강의 (5) - BodyParser & PostMan & 회원가입 기능 1. client와 server 통신 방법 - client : 우리가 일반적으로 사용하는 pc, 브라우저에서 행해지는 부분 네트워크로 연결된 서버로부터 정보를 제공받는 컴퓨터. 서비스를 사용하는 사용자 client는 서버 컴퓨터로부터 정보를 받아 웹 브라우저를 통해 보여지는 정보를 볼 수 있음 - server : IDE를 통해 작성한 코드 부분 클라이언트에게 네트워크를 통해 서비스를 제공하는 시스템 서버는 기획자가 제작하고자 하는 웹, 모바일 서비스에 맞는 데이터를 넣어 고객들의 요청에 맞게 전달함 - BodyParser : 클라이언트에서 정보를 입력해서 서버로 넘길 때 필요한 Dependency이며, 클라이언트에서 보내주는 자료들을 받을 수 있게 도와줌 Body데이터를 분석해서 req.body로 출력해.. 2022. 2. 26. 노드 기초 강의 (4) - SSH를 이용한 GITHUB 연결 1. Git : 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템 소프트웨어 개발에서 소스코드 관리에 주로 사용되지만 어떠한 집합의 파일의 변경사항을 지속적으로 추적하기 위해 사용될 수 있음 - git init => git 저장소 생성 코드 - git add . => 작업 디렉토리 상의 변경 내용을 스테이징 영역에 추가하기 위해서 사용하는 git 명령어 - git add . 를 통해 추가함 - git status => 추가된 파일 확인 - node_modules 부분은 git에 올리지 않아도 되지만, 빼지 않고 추가하여서 다시 작업했음 - npm install을 이용해서 다운받는 라이브러리인 node_modules에 쌓이는 파일 수가 많.. 2022. 2. 26. 이전 1 2 3 다음 728x90 반응형
