hahagarden의 블로그

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

이 문제 나만 겪는 것인가....? 구글링, 네이버, 다음을 아무리 뒤져봐도 답이 나오지 않았다. $7이 신용카드로 결제되고 있다. 설정을 바꾸어야 하는데 로그인을 할 수가 없다. 인증자앱이 생성한 코드를 입력하십시오. 무엇을 입력하는 것인지. 2단계 인증이 설정되어있는 것 같은데, 나는 설정한 기억이 없다... QR코드를 스캔한 적도 없는 것 같은데... 그래서 아무리 해도 안되는 것인지... Google authenticator OTP코드와 Github 2fa method로 시도해보았는데 '잘못되거나 만료된 코드입니다. 다른항목으로 시도하십시오', '요청된 형식과 일치시키세요' 라는 메세지만 떴다. 공식 홈페이지에도 더이상의 문제는 support@heroku.com에 문의하라고 되어있어서 연락해 보았..

개발 프로세스 요구분석 및 시스템 명세서 작성 → 설계 → 구현 → 테스트 → 배포 및 유지보수 전통적인 개발 프로세스, Waterfall 폭포수 개발 방식 실제 출시 기한을 정해놓고 순차적으로 단계를 진행한다. 실제로 배포되어 유저에게 제공되는 시간이 오래 걸린다. 또한 실제 디자인 또는 개발 화면을 볼 수 있는 것은 꽤 많은 단계를 지나온 시점이기 때문에 버그나 수정 사항이 생기면 다시 처음으로 돌아가야 하므로 비용과 시간 등이 소요된다. 따라서 소프트웨어의 신뢰성 및 안정성을 보장하기가 힘들며, 배포된 후에도 많은 버그가 있을 수 있다. 모던 개발 프로세스, Agile 애자일 방식 전통적인 개발 프로세스에서 벗어나기 위해 고안된 방식으로, 짧은 주기인 스프린트(sprint)를 기준으로 개발 사이클이..

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..

세션(Session) 쿠키는 브라우저가 어떤 데이터를 쿠키로 가지고 있는 것이고, 사용자가 요청할 때마다 브라우저는 쿠키를 자동으로 서버에 전송한다. 우리가 로그인 상태를 유지할 수 있는 방법 중 하나는 세션을 이용하는 방법인데 간략하게 이야기하자면, 이 쿠키에 우리가 로그인(사용자라고 인증)을 완료한 상태임을 증명하는 세션ID를 저장하고 요청마다 이 세션ID가 든 쿠키를 전송함으로써 서버는 '이 세션ID는 등록된 사용자가 맞네, 인증된 사용자니까 요청에 응답해줄게'라며 처리를 한다. 세션은 쿠키와도 밀접하게 연관된다. 쿠키에 대해서 다음의 포스팅에서 다루었다. Cookie란, 쿠키 옵션 종류 HTTP는 stateless하다 HTTP는 웹 서버와 웹 브라우저가 데이터를 주고받기 위한 약속이다. HTTP는..

모든 재귀함수 반복문은 while 또는 for 반복문으로 표현할 수 있다. 하지만 반복문이 너무 깊어지면 가독성이 안좋고 이해하기 어렵다.(현재는 재귀가 이해하기가 더 어렵지만 ..) 반복문을 작성하기는 쉬운데 재귀함수로 작성하는 것은 정말 어렵다. 코딩테스트 문제를 재귀함수로 작성한 풀이를 보며 연습해보자. 프로그래머스의 삼총사 문제를 푸는데 첫번째 트라이에는 삼중for문밖에 생각이 나지 않았다ㅎㅎ function solution(number) { let result = 0; const combination = (current, start) => { if (current.length === 3) { result += current.reduce((acc, cur) => acc + cur, 0) === 0..

HTTP는 stateless하다 HTTP는 웹 서버와 웹 브라우저가 데이터를 주고받기 위한 약속이다. HTTP는 상태를 가지지 않는다. 이 말은 웹에서 데이터를 주고받을 때 상태를 가지지 않는다는 것이다. 클라이언트가 서버에 어떤 요청을 하면 서버는 그 요청을 곧이곧대로 듣고 적절한 응답을 해주지만, 처리 후에 그 일을 기억하고 있지 않다. 항상 아메리카노를 주문하는 카페에 가서 '늘 마시는 것으로 주세요'라고 해도 처리를 못하는 것이다. 카페 입장에선 항상 처음 보는 사람이고 어떤 메뉴를 주문했는지 정보를 알고 있지 않다. 단골 손님인데 매번 처음 보는 사람으로 인식한다면 손님 입장에서는 항상 장황하게 주문을 해야하고 불편할 것이다. 그래서 카페에서 어떤 특별한 영수증을 준다. 이 영수증을 가지고 오면..

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