hahagarden의 블로그

node_modules 디렉토리에는 .bin 폴더가 있다..bin은 이름에서 알 수 있듯이 binary 파일들이 저장되는 곳이다.그리고 리액트를 사용하면서 package.json에 작성하는 npm script와 깊은 연관이 있다. 🔸 모듈을 설치하고 실행시키는 방법먼저, npm으로 모듈을 설치할 때 글로벌 옵션 -g 을 사용하면 터미널에서 바로 실행할 수 있다.그러나 글로벌로 설치하지 않고 로컬로 설치할 때는 터미널에 nodemon ./src/index.js // 실행할 수 없다를 사용할 수 없다. 운영체제 환경변수에 등록되지 않아 nodemon 파일이 어느 경로에 위치해있는지 모르기 때문이다. 이 때 이 nodemon 모듈을 실행할 수 있는 방법은 2가지가 있다.node를 사용하는 방법과 npm을 사..

useLocation path 정보를 담고있는 객체를 반환한다. const location = useLocation(); useMatch url일치여부를 반환한다. 일치하면 해당 path 정보를 담은 객체를 반환하고, 일치하지 않으면 null을 반환한다. const matchChats = useMatch('/'); const matchScrapbooks = useMatch('/scrapbooks/:id'); // => object 또는 null matchPath Nav에서 위치한 url에 따라 Nav버튼을 활성화시키고 싶어서 현재 url과 라우터를 매칭하는 작업이 필요했다. 처음에는 다음과 같이 함수 내부에서 useMatch훅을 사용하여 규칙을 어겼다. 리액트 훅은 컴포넌트 최상위 레벨에서 사용해야 한다..

인터페이스 상속 // 인터페이스 상속 interface Person { name: string; age: number; } interface Developer extends Person { language: string; } const person: Developer = { language: "TypeScript", age: 20, name: "Anna", } // 여러 인터페이스 상속 interface FoodStuff { name: string; } interface FoodAmount { amount: number; } interface FoodFreshness extends FoodStuff, FoodAmount { isFreshed: boolean; } const food = {} as Food..

TypeScript 프로젝트 환경 구성하기 cd 폴더명 npm init -y npm install typescript --save-dev // tsconfig.json { "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": true, "outDir": "./dist" }, "include": [ "src/**/*" ] } npm i -D @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier TypeScript의..

useRef는 컴포넌트 내부에서 직접 DOM을 조작해야 할 때 사용합니다. React에서도 바닐라 자바스크립트와 마찬가지로 JSX 엘리먼트에 id속성을 부여하고, 자바스크립트로 document.getElementById(id)를 통해서 DOM요소를 조작할 수 있습니다. 그러나 React는 컴포넌트로 이루어져 있고, 컴포넌트는 재사용됩니다. 컴포넌트의 JSX엘리먼트에 id를 부여하면, id는 유일해야 하는데 중복 id를 가진 DOM이 여러개 생기니 잘못된 사용입니다. 또한 React에서는 state를 사용하여 웹페이지를 쉽게 조작할 수 있습니다. input의 DOM요소를 가져오고, onChange이벤트로 innerText를 변화시키며 직접 DOM을 조작하지 않아도, [value, setValue] = us..

미니쇼핑몰🎁 프로젝트에서 상품리스트/북마크 리스트 컴포넌트를 만드는데 무한스크롤과 카테고리 필터 기능을 함께 구현하면서 useEffect사용이 많아졌습니다. useSelector로 전역상태인 상품리스트를 가져오고 이를 의존하여 다른 상태들을 useState로 사용하는데, useSelector는 렌더링 후에 실행되고, useState는 렌더링 전에 실행되기 때문에 useEffect로 상태를 동기적으로 업데이트 해주어야 했습니다. 그런데 이는 불필요하게 렌더링이 많아지는 문제가 있었습니다. 필터 또는 리스트 상태가 바뀌면 3번씩 렌더링되고, 무한스크롤시 2번씩, 새로고침을 하면 아래 사진과 같이 9번씩 리렌더링됐습니다. 초기 코드는 아래와 같습니다. function List() { const DATA_PER..

CORS는 다른 출처의 리소스를 사용할 수 있도록 해주는 정책이다. 출처란 scheme(프로토콜), 호스트(도메인), 포트로 정의된다. 같은 출처에서 요청하고 응답을 해야 하는데 그렇지 않은 경우 CORS에러가 발생하고 proxy설정을 해줌으로써 해결할 수 있다. CORS에러는 브라우저가 기본적으롤 동일출처정책 SOP을 가지기 때문에 브라우저 단에서 뱉는 오류이다. proxy를 두면 proxy가 중간에서 대리인 역할을 하여 요청과 응답을 탈취하여 처리하기 때문에 브라우저를 속인다고 할 수 있다. 1. package.json에 proxy 추가하기 Webpack dev server에서 제공하는 기능이다. CORS에러가 떴다. 응답받을 서버 주소와 내가 요청하는 로컬호스트의 출처가 서로 달라서 생긴 문제이다...

Redux 공식문서에서 Redux Toolkit 사용을 공식적으로 적극 추천한다. 기존 Redux에서 작업을 단순화하고, 흔한 실수를 방지하여 Redux 어플리케이션을 더 쉽게 만들 수 있도록 한다. 기존의 Redux를 React, vanillaJS에서 사용하는 방법은 각각 다음의 포스팅에서 확인할 수 있다. Redux란 / Redux React에서 사용하기 Redux는 JavaScript 어플리케이션의 상태를 관리할 수 있는 상태 관리 라이브러리이다.(React, Vue, Angular, vanilla JS 등 모두 사용할 수 있다.) React로 상태 관리를 할 때 props drilling이나 상태끌어올리기를 hahagarden.tistory.com Redux vanillaJS에서 사용하기 html..

html파일에서 간단하게 증감버튼을 만들고, JavaScript파일로 DOM조작을 하고, Redux로 상태를 관리한다. add minus DOM조작을 위해 브라우저 환경에서 작업하였다. 리액트를 주로 사용했어서 자연스럽게 npm install redux를 하고, commonJS 또는 모듈import/export로 createStore메서드를 가져와서 사용하려니 불가능했다. 이는 node.js 환경에서 가능한 것인데 말이다. (브라우저 환경이 아닌 node.js 환경에서 웹 어플리케이션을 만드려면 다양한 node.js 패키지들을 설치하고 세팅해주어야 한다. 그렇기 때문에 이러한 것들을 미리 설치하고 세팅해놓은 보일러 플레이트 CRA를 이용해서 리액트 앱을 시작하는 것이다.) redux를 브라우저 환경에서 ..

Redux는 JavaScript 어플리케이션의 상태를 관리할 수 있는 상태 관리 라이브러리이다.(React, Vue, Angular, vanilla JS 등 모두 사용할 수 있다.) React로 상태 관리를 할 때 props drilling이나 상태끌어올리기를 사용하거나 컴포넌트 안에서 상태 변경 로직이 구현되어 코드가 복잡할 때가 있다. Redux는 상태 또한 컴포넌트처럼, React 컴포넌트로부터 분리하여 다룬다. Redux에는 세 가지 원칙이 있다. 1. Single Source of Truth 동일한 데이터는 항상 같은 곳에서 가져와야 한다. Redux의 Store가 단 한개만 존재한다는 것과 관련있는 것이다. 2. State is read-only React의 상태는 상태변경함수를 통해서만 변경..

Props 외부에서 전달받은 값이다. 전달받은 값이므로 함부로 변경할 수 없도록 읽기 전용으로 되어있다. 읽기 전용이 아니라면 변경할 수 있을 것이고, 부모 컴포넌트에서 전달받은 props를 자식 컴포넌트에서 변경하여 상위로 영향을 끼치게 된다. 이는 React의 데이터 하향식 단방향 흐름의 원칙에 위배된다. props는 객체이다. 내부에 어떤 값도 전달할 수 있도록 객체로 되어있다. function Parent() { return ( I'm the parent // "장난감"이라는 값을 가진 속성 gift를 전달 ); }; function Child(props) { // props 객체 return ( {props.gift} // props.gift 사용 ); }; State const [state 저..

Node.js 서버 만들기 https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction 문서를 참고하여 Node.js의 HTTP 처리 과정을 정리해본다. HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1. 서버 생성하기 모든 Node.js 웹 서버 애플리케이션은 웹 서버 객체를 만들어야 한다. cont http = require('http'); const cuteServer = http.createServer(); cuteServer.on('request', (req, res) => { // 매 http 요..