Webpack을 사용할 때 css-loader를 적용해서 css 파일을 처리하는게 일반적이다. 그런데, css의 url 을 사용했을 때 해당 파일이 file-loader를 타는 것이 아닌 css-loader 내에서 처리되는 문제가 발생했다. background-image: url("./assets/images/hero-img.png"); 이런 경우 당황하지 말고 css-loader의 url 옵션을 false로 변경해주면 된다. const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { mode: process.env.NODE_ENV, devtool: "sourc..

들어가며. 이 글은 최대한 Redux의 공식 홈페이지를 토대로 Redux를 정리 및 이해하려고 한다. 동기. 자바스크립트 싱글 페이지 애플리케이션이 갖추어할 요건이 점점 더 복잡해지고있는 만큼, 어느 때보다도 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다 상태에는 서버 응답, 캐시 데이터, 지역적으로 생성해서 사용하고 있지만 아직 서버에 저장되지 않은 데이터를 의미 실제로 프론트엔드를 개발하다보면 생각보다 많은 곳에서 State를 사용해야한다. 예를들어, 작은 모달창을 화면에 나오게 하기 위해서도 isModal 과 같은 상태를 만들어준다. 항상 변하는 상태를 관리하기란 어렵습니다... 상태를 언제, 왜, 어떻게 업데이트할지 제어할 수 없는 지경에 이르고 맙니다. 그렇다. 부모 컴포넌트에서 자..

Flux? Flux는 페이스북에서 클라이언트 사이드 웹 애플리케이션을 만들때 사용한 애플리케이션 아키텍쳐이다. 단방향 데이터 흐름을 활용해서 뷰 컴포넌트를 구성하는 리액트를 보충해주는 역할을 합니다. 구조와 데이터 흐름 Flux에서의 데이터는 앞에서 말한 것처럼 단방향으로 흐른다. view는 사용자의 상호작용에 따라 응답을 위해서 새로운 Action을 만들어서 다시 전파를 하게 된다. 이렇게보면 단방향(?)이라는 부분이 이해가 안될 수 있지만, 결국 Action은 대부분의 상황에서는 View의 사용자 상호작용으로 Action이 발생하게 된다. 모든 Action은 Dispatcher에게 가게 되는데, Dispatcher는 Store에 적용하기 위한 콜백을 실행한 다음 결과를 Store에 전달한다. Stor..

0. 들어가며, Redux에 대해서 몇가지 공부를 했었다. 이번에는 타입스크립트와 함께 사용해볼 계획이다. [React] Redux - 기본편 [React] Redux - toolkit편 [React] Reduxt - toolkit 사용해보기편 기본적인 타입스크립트 세팅은 끝났다고 생각하고, Redux를 사용하는 부분만 작성할 예정이다. 세팅하기 yarn add @reduxjs/toolkit react-redux 리액트에서 리덕스를 사용하기 위해서 필요한 패키지를 먼저 설치한다. @types/react-redux 타입스크립트를 위해서 해당 패키지가 필요하지 않은가 생각할 수 있지만 react-redux 7.2.3버전부터 해당 패키지를 포함하고 있기 때문에 이후 버전은 설치할 필요가 없다. - src --..

react에서 뒤로가기 버튼을 감지하는 작업을 해야할 때가 있다. 과연 어떤 방법을 사용해야 할까? 세팅 본인은 react-router-dom v6 을 사용하고 있다. v6에는 history를 제공해주는 useHistory가 사라져서 따로 패키지를 받아야 한다. yarn add history 작업 시작 // common/history.ts import { createBrowserHistory } from "history"; const history = createBrowserHistory(); export default history; 필요할 때마다 createBrowserHistory를 사용해서 history를 만들어도 되지만 그렇게되면 두번 일을 한다는 느낌이 있어서 따로 만들었다. history는 ..

코드 스플리팅? Webpack과 같은 모듈 번들러에서 사용되는 중요한 기능이다. 하나의 큰 번들을 여러개의 작은 번들들로 쪼개주는 기능을 한다. 필요할때 필요한 번들만 로드 함으로써 초기 로딩시간을 줄여주고, 현재 페이지에서 필요없는 코드는 로드하지 않기 때문에 앱의 성능도 향상시킬 수 있다. 하는 방법 @babel/plugin-syntax-dynamic-import 사용하는 방식으로 적용할 계획이다. npm i --save-dev @babel/plugin-syntax-dynamic-import 당연히 먼저 할일을 필요한 패키지를 다운받는 일이다. { "presets": [ // ... ], "plugins": ["@babel/plugin-syntax-dynamic-import"] } 바벨 설정 파일에 ..

설치 npm install mysql2 sequelize sequelize-cli mysql2는 node와 mysql의 연결을 위해서 사용하는 패키지 sequelize는 ORM을 이용해서 데이터베이스를 다룰 수 있는 패키지 sequelize-cli는 데이터베이스 작업을 sequelize와 연동해서 터미널에서 수행하게 해주는 패키지 초기화 npx sequelize init 초기 세팅을 위해서 사용하는 패키지 config/config.json models/ migrations/ seeders/ 4개의 디렉토리가 만들어진다. config/config.json 우선 json 파일이면 env로 설정을 불러오지 못한다. 그러므로 간단하게 수정을 한다. // config/config.js require("dotenv..

웹페이지 개발을 하다보면 OAuth라는 이야기를 많이 들어볼 것이다. 본인은 OAuth라는 것은 단순하게 소셜 로그인이라고 생각하고 있는데, 이번 기회에 한번 알아보려고 한다. OAuth("Open Authorization")는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다. - 위키백과 위키백과의 말을 정리하면 흔히 우리가 아는 외부 소셜 계정을 기반으로 사용자에게 접근 권한을 부여하는데 사용되는 프로토콜이라고 생각하면 될 것 같다. 일반적으로 우리가 웹사이트에서 회원가입을 하려면 1. 회원가입 ( 아이디, 비밀번호 외 주소, 연락처 등 다양한 정보..