Moon Work

code 1 error 기존에 다른 호스팅 사이트를 사용하다가 netlify를 통해 호스팅을 시도해보려 했는데 계속 다음과 같은 에러가 발생하였다. 해결 build command에 문제가 있었다. 기존 CRA로 만든 앱의 package.json에 있는 command는 아래와 같이 생겼다. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, npm run build command를 netlify에서 진행하는데 이때 build command 앞에 CI= 를 붙이면 정상적으로 netlify에서 build가 진행되..

시작하며 전역 상태 관리를 위해 redux를 공부해봤지만 redux가 작은 프로젝트에서 사용되기에는 초기에 구축에 있어서 피로가 상당했다. 그렇지만 가끔 로그인한 유저, themeColor와 같이 계속 prop을 넘겨주기에는 props drilling이 발생했다. redux와 같이 본격적으로 전역 상태 관리를 하지 않고 몇개의 변수에 대해 context API를 사용해서 props drilling을 줄이고자 context API에 대한 내용을 정리하게 되었다. Context API란 Context는 리엑트 컴포넌트 간에 값을 공유할 수 있게 도와준다. 주로 Context는 전역에서 필요한 값을 공유할 때 사용되지만 부분적인 역역에서 사용할 수 있다. 기존 Props를 통한 전달이 아닌 다른 방법 Cont..

시작하며매번 헷갈리는 useMemo, useCallback 이번 포스팅으로 머리에 타투로 새긴다. 메모이제이션수행한 연산값을 저장해두고 재사용함으로 중복연산을 피해서 성능 최적화를 할 수 있는 방법useMemo와 useCallback 모두 메모이제이션을 위한 최적화를 위해 사용한다. 리엑트에서 re-render하는 경우자신의 state가 변경된 경우부모로부터 받은 props가 변경 될 경우부모 컴포넌트가 리렌더링 될 때 useMemo: 값을 메모이제이션useMemo(()=>fn, deps)deps가 변할 때만 fn을 실행시켜서 값을 반환한다. useCallback: 함수를 메모이제이션useCallback(fn, deps)함수와는 상관없는 값이 변할 때 함수 컴포넌트가 불필요하게 업데이트 하는 것을 방지..

useEffect의 return useEffect에 들어있는 return이 언제 실행되는지 자주 헷갈려서 아주 머리에 박제를 하기 위해 정리한다. 1. 일반적인 함수의 return ... const basicFunc = () => { console.log('[basic func] is called') return () =>{ console.log('[basic func] is returned') } } const returnFunc = basicFunc(); returnFunc(); ... 위와 같이 작성된 함수는 먼저 함수 내부에 있는 콘솔이 찍힌 뒤 리턴된 함수가 호출 되어야 리턴된 함수에 있는 콘솔이 찍히게 된다. 리턴된 함수를 호출하지 않으면 리턴된 함수 내에 있는 콘솔은 출력되지 않는다. 2. ..

시작하며React를 통해 개발하면서 컴포넌트마다 똑같은 코드가 반복되곤 하는데 그런 코드가 심지어 길이도 작지 않다면 컴포넌트가 길어져서 곤란하다. 이런 문제를 custom hook을 통해 해결할 수 있는 부분이 있을 것이라 생각이 들어 새로 공부하게 되었다. Custom hook의 장점클래스 컴포넌트보다 적은 코드로 동일한 기능을 구현할 수 있다. 코드 길이를 줄이면서 가독성은 높일 수 있다.Custom hook 규칙최상위에서 hook을 호출한다 (반복문이나 조건문에서 hook을 호출하지 않는다.)React 함수 내에서만 hook을 호출한다.hook의 이름을 'use'로 시작한다.Hook 만들 때 고려해야 하는 점custom hook을 만들 때는 다른 hook의 state에 영향을 끼치게 해서는 안된..

Typescript와 React를 통해 간단한 ToDo 앱을 만드는데 props를 전달하는 과정에서 다음과 같은 에러가 발생했다. react-jsx-dev-runtime.development.js:87 Warning: ToDoItem: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props) children component에게 props로 key를 전달해..