res.sendFile은 말 그대로 response에 해당 파일을 전송하는 명령어이다. 보통은 이 메소드를 통해 클라이언트 즉, FE단으로 데이터를 전송하는데 쓰인다. 한편, path.join은 경로를 지정해주는 메소드이다. path.join에서는 미리 선언된 __dirname을 사용할 수 있다. __dirname 는 현재 해당 파일이 존재하는 폴더 경로를 뜻한다. (단, CommonJS 모듈에서는 별도의 __dirname 선언 없이도 바로 사용할 수 있지만, ES 모듈에서는 별도의 선언이 필요하다) //CommonJS 모듈 const express = require('express'); const path = require('path'); //ES 모듈 import express from 'expres..

React로 form의 이벤트를 모두 컨트롤하기 위해서는 발생 가능한 이벤트를 다 상정하여 개별적으로 state를 설정하여 컨트롤 해야하는 문제가 있다. 물론 이 마저도 바닐라 JS에 비해서는 아주 많이 간편해진 셈이지만, 사람의 욕심은 끝이 없고 개발자의 게으른 부지런함(?)도 마찬가지다. form과 관련된 웬만한 이벤트들을 한 번 싸그리 모아다가 상정해두고 이를 컨트롤할 간단한 방법을 만들어두면 두고두고 쓸 수 있지 않을까? 위 고민에 대한 답을 내놓는 React 라이브러리가 바로 React-hook-form 이다. 1. 설치하기 $ npm i react-hook-form 위 커멘드를 입력하면 설치가 진행된다. 2. 기본 개념 React를 기반으로 하고 있으므로 큰 틀은 React와 동일하다. rea..

react-router SPA을 위해 React의 Client-side routing을 위해 필요한 녀석이다. Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com 대표적으로 BrowserRouter, Switch, Route 그리고 Link 정도를 import 해서 자주 쓴다. 오늘은 이 중에서 Route와 관련..

styled-components를 이용하지 않고 React만을 통해서 웹 퍼블리싱을 하는 방법은 크게 3가지가 있다. 해서... 원래는 3가지 방법을 모두 설명하려 했지만.... 다음에 기회가 되면 하기로 하고, 바로 styled-components로 들어가보자. 어차피 지금 시점에서 React를 쓰면서, styled-components 를 쓰지 않는다는 것은 어불성설이다. 설치 npm i styled-components 주의할 점이 딱 하나 있다. styled-component가 아니라 styled-components 이다. 맨 끝에 s가 반드시 붙어야한다. 실제로 npm 에 styled-component라는 패키지가 이미 존재한다. 따라서 주의가 필요하다. 뭐 악성프로그램은 아니지만, 더 이상 관리가..