윤민상 블로그

yarn create react-app blog-fronted 아래 방법으로 두 프로젝트 한꺼번에 관리(blog폴더로 관리하는 것 보다 자동 import 더욱 완벽) yarn add react-router-dom yarn add redux react-redux redux-actions immer redux-devtools-extension snippet-generator.app/ snippet generator Snippet generator for Visual Studio Code, Sublime Text and Atom. Enjoy :-) snippet-generator.app snippet을 만드는 법 원하는 코드를 입력하고 바뀌는 내용을 ${TM_FILENAME_BASE}으로 입력한다. ${1}을..

JWT(JSON Web Token) : 데이터가 JSON으로 이루어져 있는 토큰 로그인을 서버에서 처리하는 데 사용할 수 있는 대표적인 두 가지 인증 방식 1. 세션을 기반으로 인증 2. 토큰을 기반으로 인증 User 스키마/모델 만들기 yarn add bcrypt src/models/user.js import mongoose, { Schema } from 'mongoose'; import bcrypt from 'bcrypt'; const UserSchema = new Schema({ username: String, hashedPassword: String, }); UserSchema.methods.setPassword = async function (password) { const hash = awai..

www.mongodb.com/try/download/community 에서 다운 yarn add mongoose dotenv dotenv는 환경변수들을 파일에 넣고 사용할 수 있게 하는 개발도구입니다. mongoose를 사용하여 MongoDB에 접속할 때, 서버에 주소나 계정 및 비밀번호가 필요할 경우도 있습니다. 이렇게 민감하거나 환경별로 달라질 수 있는 값은 코드 안에 직접 작성하지 않고, 환경변수로 설정하는 것이 좋습니다. 프로젝트를 깃허브, 깃랩등의 서비스에 올릴 때는 .gigignore를 작성하여 환경변수가 들어 있는 파일은 제외시켜 주어야 합니다. 서버에서 사용할 포트와 MongoDB 주소. blog는 사용할 데이터베이스 이름(없으면 자동으로 생성) .env PORT=4000 MONGO_URL..

yarn add koa yarn init -y cat package.json yarn add --dev eslint yarn run eslint --init yarn add eslint-config-prettier (prettier에서 관리하는 코드 스타일은 eslint에서 관리하지 않도록) .eslintrc.json { "env": { "browser": true, "commonjs": true, "es2021": true, "node": true }, "extends": ["eslint:recommended", "prettier"], "parserOptions": { "ecmaVersion": 12 }, "rules": {} } .prettierrc { "singleQuote": true, "semi..

서버 사이드 렌더링을 구현하려면 웹팩 설정을 커스터마이징해 주어야 한다. git add . git commit -m 'Commit before eject' yarn eject 서버 사이드 렌더링용 엔트리 만들기 엔트리(entry)는 웹팩에서 프로젝트를 불러올 때 가장 먼저 불러오는 파일입니다. 예를 들어 현재 작성 중인 리액트 프로젝트에서는 index.js를 엔트리 파일로 사용한다. 이 파일부터 시작하여 내부에 필요한 다른 컴포넌트와 모듈을 불러오고 있다. index.server.js import React from "react"; import ReactDOMServer from "react-dom/server"; const html = ReactDOMServer.renderToString( Hello ..

yarn build를 하고 build/static/js 파일을 들어가보면 2로 시작하는 파일과 main으로 시작하는 파일이 있다. 2로 시작하는 파일에는 React, ReactDOM 등 node_modules에서 불러온 라이브러리 관련 코드가 들어 있고, main으로 시작하는 파일에는 직접 프로젝트에 작성하는 App 같은 컴포넌트에 대한 코드가 들어있다. App.js의 내용을 변경한 후 build를 하면 main으로 시작하는 파일의 이름이 바뀐다. 이렇게 파일을 분리하는 작업을 코드 스플리팅이라고 한다. 리액트 프로젝트에 별도로 설정하지 않으면 A,B,C 컴포넌트에 대한 코드가 모두 한 파일(main)에 저장된다. 애플리케이션의 규모가 커지면 로딩이 오래 걸리고 트래픽도 많이 나온다. => 해결책 : 코..

"axios": "^0.21.1", "react-redux": "^7.2.2", "redux": "^4.0.5", "redux-actions": "^2.6.5", "redux-logger": "^3.0.6", "redux-thunk": "^2.3.0", 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행한다. 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있다. 클로저 개념 모르면 이해못해. 기억안나면 클로저 공부 ex) function hi(a,b){ console.log(a,b) return (pa)=>console.log("return",pa); } post=hi(1,2) 1 2 post("a") return a 제너레이터 ex1 function..

리덕스 라이브러리 이해하기 액션 액션생성함수 리듀서 스토어 디스패치(액션발생) 구독(subscribe)(스토어 상태가 바뀔때마다 호출) yarn global add parcel-bundler parcel index.html 개발서버 실행 바닐라 자바스크립트 리덕스 import { createStore } from "redux"; const divToggle = document.querySelector(".toggle"); const counter = document.querySelector("h1"); const btnIncrease = document.querySelector("#increase"); const btnDecrease = document.querySelector("#decrease"); ..