이번에 깃허브 OAuth를 이용해서 로그인을 구현하려고 한다. 해당 부분에 대해선 나중에 다시 다룰 것 그때 passport를 사용할 것 같아서 이번에 한번 이해 겸 공부해보려고 한다. Passport ? Node.js의 Express에서 사용하는 인증 미들웨어이다. Session을 사용해서 사용자 정보를 저장하고 쿠키를 통해서 식별한다. 당연히 우리가 직접 사용자 인증과 로그인을 구현할 수 있지만, 단기간에 모든 보안 이슈를 해결할 수 있을까? 물론 가능하다. 하지만 그것을 구현하기 위해서 시간이 많이 걸릴 것이다. 그래서 Passport를 사용하면 빠른 시간에 기능을 구현할 수 있다. 그리고 Passport에는 다양한 strategy가 존재한다. strategy는 전통적인 로컬 인증 방법을 포함해서 ..

State and Lifecycle 올것이 왔다....! State 올바르게 사용하기 React에서는 State를 직접 수정하면 안된다. setState 방식을 사용하지 않고 state를 직접 수정한다면 컴포넌트를 다시 렌더링하지 않는다. 띠용! 여기서 우리가 state를 구현할 때 신경 쓸 사항이 하나 생겼다. setState를 사용해야지만 리렌더링을 해주면 된다! State 업데이트는 비동기적일 수 있다. 우리가 사용하는 state는 비동기적으로 업데이트를 할 수 있다. 그러므로 setState로 값을 지정해줄 때 자신의 값에 의존하면 안된다. const [state, setState] = useState(1); const func = () => { setState(state + 1) } 만약 비동기..

리액트의 라운터 사용자가 주소를 입력하면 그것을 감지해서 화면에 올바른 페이지를 제공한다. BrowserRouter와 HashRouter가 존재한다. - BrowaerRouter : 우리가 흔히 알고있는 주소 체계이며, HTML5를 지원하는 브라우저의 주소를 감지 - HashRouter : 주소에 #이 붙어 있으며, 이 해시 주소를 감지한다. 설치 yarn add react-router-dom 가장 많이 사용하는 react-router-dom이다. 사용하기 import { BrowserRouter, Routes, Route } from "react-router-dom"; import Header from "@/components/layout/header"; import Home from "./home";..

우리가 개발을 하면 빼먹을 수 없는 것이 있다. 그것은 바로 Console.log 지우기! 이게 또 은근 귀찮은 작업인데, 자동으로 지워주는 플러그인이 있어서 소개를 한다! 설치 npm install --save-dev babel-plugin-transform-remove-console 어썸한 패키지를 먼저 설치해준다. 적용하기 const babelArgv = require("yargs").argv; const isProd = babelArgv.env === "prod"; const config = { presets: [ [ "@babel/preset-env", { targets: "> 0.25%, not dead", useBuiltIns: "usage", corejs: 3, shippedProposal..

Webpack과 Babel을 사용해서 React 환경을 구성하는 작업은 많이 했었다. 하지만 이번에 타입스크립트를 같이 적용하면서 Webpack 5버전의 기능도 사용하면서 다시 환경을 구성해보려고 한다. 기본 세팅 npm i --s core-js react react-dom 바벨 설정을 위한 core-js, 리액트 사용을 위한 react, react-dom 이다. npm i --save-dev @babel-cli @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/preset-typescript 엉청 많다. ㅋㅋ... 우선 마찬가지로 바벨 설정을 위한 패키지들이다. babel/plugin-s..

들어가며 이 글은 Webpack을 사용해서 JavaScript를 기본적으로 구성한 이후라고 판단하여 작성합니다. 필요 패키지 다운로드 npm install --save-dev typescript @babel/preset-typescript 필요한 패키지는 타입스크립트를 사용하기 위한 typescript와 babel에서 읽기 위한 @babel/preset-typescript이다. 초기 설정 먼저 프로젝트에서 사용할 tsconfig를 추가한다. ./node_modules/typescript/bin/tsc --init 몇가지 옵션을 적어보자면, target 옵션 : 타입스크립트 파일을 어떤 버전의 자바스크립트로 변경할지 지정 es5로 세팅하면 es5 버전의 자바스크립트로 컴파일해준다. module 옵션 : 자..

상태 관리? 작은 프로젝트를 만들 때는 state를 정의하고 state를 바탕으로 필요한 컴포넌트를 랜더링 한다. 하지만 프로젝트의 규모가 커지면 부모 컴포넌트의 state가 필요한 자식 컴포넌트로 가는 깊이가 깊어질 수 있다. 그렇게 되면 필요없는 컴포넌트마저도 state가 거쳐가기 때문에 전체적인 코드가 복잡하게 된다. 그래서 나온 것이 상태 관리 시스템이다. 전역으로 상태를 관리하고 변화가 감지되면 상태를 가지고 있는 모든 컴포넌트에서 리 렌더링이 발생하는 방식이다. 만들기! 가장 일반적인 방법이 Pub-Sub 패턴으로 만드는 방식이 아닐까 싶다. 전반적인 틀을 Store라는 클래스를 만들고 해당 클래스의 state는 전역으로 관리되기 위해서 싱글톤으로 만들 것이다. 그리고 정의된 state를 각 ..

Components와 Props 이제 Components에 대해서 설명을 시작한다. function Welcome(props) { return Hello, {props.name}; } 제일 먼저 컴포넌트의 이해를 돕기 위해서 다음과 같은 함수가 나왔다. 데이터를 가진 Props 객체를 받아서 React 엘리먼트를 반환하는 React 컴포넌트이다. 함수 형태로 만들어져있기 때문에 " 함수 컴포넌트 "라고 불린다. function Welcome(props) { return Hello, {props.name}; } const root = ReactDOM.createRoot(document.getElementById('root')); const element = ; root.render(element); 컴포넌..