css에 :before, :after 같은 가상선택자는 왜 2개밖에 없을까? div 안에 상하좌우 absolute인 요소를 만들어야 하는데, 여러(?) 방법 중 고민하다 그냥 map 돌려서 요소 4개를 만들기로.. { ["top", "bottom"].map((vertical) => { return ["left", "right"].m...

devServer.host 설정하면 http 서버로 실행된다. module.exports = { //... devServer: { host: "0.0.0.0", }, }; DevServer

함수 이름 식별자 이름이 있는 함수를 기명 함수, 없는 함수를 무명/익명 함수라 한다. 매개변수 (parameter) = 인자 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분한다. 각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당된다. 함수를 정의할 때 선언하며, 함수 내부에서 변수와 동일하게 취급된다....

문제점 네트워크 환경설정에 나오는 IP(IPv4 주소)로 server를 구동하면 페이지가 뜨지 않는다. 해결법 gateway 주소로 서버를 돌려야 한다. 터미널에 아래 코드를 치면 gateway 주소를 얻을 수 있다. ifconfig | grep inet app.listen(3000, "10.0.0.0"); 외부 ip에서 local...

Recoil 설치 npm install recoil App, Counter.jsx 파일 생성 App에 RecoilRoot import // App.jsx import { RecoilRoot } from "recoil"; export default function App() { return ( <RecoilRoot> ...

jsconfig.json 파일 만들고 아래와 같아 설정 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] }

CRA로 만든 리액트 앱은 src 경로 밖에 접근할 수 없다. 때문에 import를 통해 public 폴더에 접근하기 어렵다. src 폴더 안에 이미지 파일을 넣으면 되지만 구조적으로 마음에 들지 않는다. public 폴더 안에 img 폴더를 만들고 이미지 파일을 넣는다. import 대신 background-image나 img src=""를 ...

하면 편하지만 하기가 번거로운 그 과정.. ESLint와 Prettier 끼얹기 ESLint 설치 npm i -D eslint .eslintrc.js 파일 생성 npx eslint --init 위 명령어를 실행하면 여러 선택사항이 나온다. 프로젝트의 개발 환경에 맞춰 선택하면 된다. Prettier 설치 npm i -D prettie...

git에 저장된 repository를 module로 사용하기 npm install npm install git+https://github.com/visionmedia/express.git // 혹은 npm install git+ssh://git@github.com/visionmedia/express.git package.json에 모듈이 추...

Webpack 빌드할 때 특정 ts 파일 제외시키기 Webpack을 빌드하면서 jest test를 건너 뛰고 싶었다. tsconfig.json의 exclude 속성을 추가하면 된다. "include": ["src"], "exclude": ["**/*.test.ts", "**/*.test.tsx"] 다시 빌드하면 *.test....