middleware를 통한 코드의 중복 제거
Middleware middle이라는 단어에서 알 수 있듯이 어느 사이 중간에 위치하여 특정 기능을 수행하는 역할을 한다. 어떤 서비스마다 반복적으로 수행하는 동작이 있다면 미들웨어로 만들어 서비스 내 코드의 중복을 제거할 수 있다....
esm 패키지를 이용하여 commonjs를 esm으로 변환하기
commonJS 자바스크립트의 모듈 시스템을 지원하기 위해 만들어졌다. Nodejs의 모듈 환경 require()와 module.exports (또는 exports)가 등장하면 commonJS다. const express = require('express') const app = express() exports.add = (a, b) => a+b...
thunk에 대해서 알아보자
thunk? A thunk is a function that wraps an expression to delay its evaluation. 다음 코드를 보자 function wrapper_function(param) { // this one is a "thunk" because it defers work...
Redux를 이용하여 Todo 로직 만들기
라이브러리 redux react-redux redux-actions todos 모듈 생성 액션 타입, 액션 생성 함수, 리듀서를 묶은 todos 모듈을 정의한다. // modules/todos.js import {createAction, handleActions} from 'redux-actions' // 액션 타입을 정의한다. const CHANGE_INPUT...
Data fetching with HOC
Data fetching 컴포넌트를 렌더링할 때 로컬 데이터나 API를 통해서 fetching 하여 View에 주입한다. mount => fetching => view(re-render) 흐름으로 가야하기 때문에 클래스형 컴포넌트의 componentDidMount() 메소드나 함수형 컴포넌트의 useEffect() 훅 안에서...
redux, react-redux 알아보기
Goal redux, react-redux를 react 앱에 적용하는 법을 배운다. Flux architecture에 대해 이해한다. Reference 해당 포스트는 daveceddia의 redux-tutorial 포스트를 참고하여 작성했다. redux and react-redux redux는 store라는, View에서 필요한 데이터를 담은 하나의...
React의 state 정리
What is state In the React sense, “state” is an object that represents the parts of the app that can change. state는 단순하게 말하면 객체다. 그렇다면 state에 어떤 데이터가 들어...
flux-pattern
keywords Design Pattern Redux Web application architecture Flux Flux는 디자인 패턴 또는 웹 어플리케이션 아키텍처 중 하나다. 전통적인 아키텍처 중 하나인 MVC와 다르게 단방향데이터 흐름을 가지고 있다. 이해를 돕기위한 그림...
React Design pattern
keyword reusable component HoC Children children prop을 이용하여 컴포넌트를 렌더링한다. const AwesomeBtn = ({children}) => { return <button className='awesome'>{children}</button> } // 사용 <AwesomeBtn>Click me</AwesomeBtn> Container and Presentational Pattern 리엑트 컴포넌트는...
The WHATWG URL API (Node.js 모듈)
keyword URL Parsing url 모듈 url.resove()을 사용하려고 하니 터미널에서 deprecated 되었다고 알려준다. 그 대신 WHATWG URL API을 사용하라고 한다. 공식 docs에서 해당 내용을 알아보았다. WHATWG URL API 먼저 URL을 로드한다....
HTML Element componet by vanilla javascript
Idea 자바스크립트의 class 문법을 이용하여 Element Component를 만든다. entry point인 main.js를 정의 element.js를 정의 main.js에서 element instance를 생성 main()을 호출 Implementation main.js <!-- index.html --> <script type="module" src="./src/main.js"></script> // main.js...
AbortController API 활용
AbortController Web AI 요청을 취소할 수 있는 인터페이스를 제공한다. // Creates a new AbortController object instance. const abortController = new AbortController() AbortController.signal DOM request의 요청과 communication할 수 있는 객체 AbortController.abort()...
회원가입 구현 시, 패스워드 암호화
회원가입 로직 회원가입 시, 이메일과 비밀번호를 입력받는다. 입력받은 비밀번호를 데이터베이스에 그냥 저장하면 보안 상 위험이 있다. 따라서 입력받은 비밀번호를 적절하게 암호화하여 데이터베이스에 저장해야 한다. dependencies cryto: 비밀번호 암호화에 사용 express:...
Sequelize(시퀄라이즈) 정리
데이터베이스 연결하기 const { Sequelize } = require('sequelize'); // Option 1: Passing a connection URI const sequelize = new Sequelize('sqlite::memory:') // Example for sqlite const sequelize = new Sequelize('postgres://user:pass@example.com:5432/dbname') //...
Redux Essentials, Part 2
Create Basic Counter React + Redux app npx create-react-app basic-counter --template redux App structure /src index.js : starting point of App App.js: the top-level React component /app store.js: Redux store...