1. 발생 계기 기존 자바스크립트와 리엑트로 진행한 프로젝트에 타입스크립트를 적용하기위해 설치하고, 이후 allowJs 속성을 true 로 하였을 때, 오류가 발생하였다. 2. 탐구해본 원인 TS 로 만든 프로젝트에 JS 가 필요할 수 있기에, 위 tsconfig.json 에 설정을 해준것인데, 이러한 오류가 발생하였고, 솔직히 원인을 잘 모르겠어서 빠르게 검색을... 3. 해결 과정 한 블로거 분의 내용을 참조하여서 아래처럼 셋팅을 해주니 오류가 사라졌다. https://kyounghwan01.github.io/blog/TS/allow-js/ vue + typescript + js 연동하기 vue + typescript + js 연동하기 kyounghwan01.github.io { "compilerOp..
리엑트의 컴포넌트 상태 관리에 빼놓지 않고 등장하는 개념이 useCallback 과 useMemo! 데이터를 메모이제이션 하여 불필요한 re-render 를 막아준다고 알고 있다. 다만, 공부하는 입장에서 이 두가지 hook 이 어떠한 차이점을 가지는 지 명확하게 알지를 못하고 있어서 공부하던 중, 역시나 햇갈렸던 개념인 React.memo() 를 학습하게 되어 정리할 겸 포스팅을 해보려 한다. 근데 정리하면서도 계속 햇갈려서... React.memo() 2가지 훅과 함꼐 자주 거론되는 React.memo 를 먼저 살펴보는게 좋을듯 싶다. 특히, useCallback 과 React.memo 의 경우 거진 함께 사용되는 경우가 많기 떄문이기도 하다. 리엑트는 컴포넌트를 렌더링한 뒤 기존 렌더상태와 변경된 ..
14-1 변수의 생명 주기 변수가 영원히 존재하지는 않는다. 변수가 영원히 존재한다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. 한편 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 보통 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같지만, 함수 내부에서 선언된 지역 변수는 함수가 호출되고 생성되고 함수가 종료하면 소멸한다. 이전에 호이스팅에서 살펴 보았듯이, 변수 선언은 선언문이 어디에 있던지간에 상관없이 가장 먼저 실행된다고 배웠다. 다만 이는 엄밀하게 얘기하면 전역 변수에 한정된다. 함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄 씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다. function f..
13-1 스코프 스코프(scope): 유효범위, 스코프는 특히 자바스크립트 내에서 변수 var 와 let, const 와의 구별에 밀접한 관계가 있다. 여기서 유효범위는 이전에 함수를 다루면서 경험한 적이 있는데, 함수의 매개변수는 함수 몸체 외부에서는 참조 할 수 없다고 했었다. 즉, 매개변수의 유효범위가 함수 몸체인것이다. 함수 매개변수는 함수 내에서 선언이 되었다. 변수가 함수 내에서 선언이 되었다는 것은, 아니 이렇게 표현하게 되는 이유가 있는데, 변수를 포함한 식별자가 어디에서 어느 위치에서 선언되는지에 따라 그 변수를 참조할 수 있는 범위가 결정되기 때문이다. 즉, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유..
1. 발생 계기 react-slick 을 설치한 뒤, 어느정도의 슬라이드 포맷을 맞추고 다시 next.js 의 npm run dev 를 통해 실행시켰을 때, 발생하였던 오류였다. 즉, 슬라이더가 작용될 랜더링에서 발생하였다. 2. 탐구해본 원인 잘못된 훗(hook) 호출이라는 오류같다. 훅은 오직 함수 컴포넌트 내부에서 불리어져야 한다는 점에서 뭔가 오류가 발생한듯 얘기하지만, 다 따지고 들어가보면 잘못작성된 부분은 없었다. 그래서 그 다음으로 번호로 알려주는 3가지의 체크 사항에 대해서 따져봐야 할 것 같았다. 1. You might have mismatching versions of React and React DOM. : 말 그대로 React 버전과 React Dom 의 버전이 맞는지 확인해보라는 ..
1. 발생 계기 react 내 슬라이드 기능을 넣고 싶어서 react-slick 을 설치하는 과정에서 발생했다. 즉 설치가 되지않는 오류. 당시 입력했던 명령어는 npm i react-slick 2. 탐구해본 원인 뜬금없이 에러가 발생하여서, 원인이 무엇인가 고민을 하게 되었다. 바로 검색하는 습관은 별로 좋지 않을테니, 해석을 좀 해보려고 했는데 dependency tree 를 해결할 수 없다 라는 오류인것 같다. 처음 들어본 단어이기도 하고, 이걸 해석해야 풀 수 있을것 같긴 했는데, 그 밑에를 좀 더 살펴보니 뭔가 설치된 react 의 버전 문제같은 느낌이 들었다. 즉, root project (나에게 설치된) react version 과 요구되는 버전의 차이가 뭔가 문제를 일으키는 것 같다.. 3..
1. 발생 계기 기존 프로젝트에서 새로 redux 를 세팅하는 과정에서 발생하였다. 2. 탐구해본 원인 타입에러로서 store.getState 는 함수가 아니라고 한다.. 무슨 소리지. 일단 store.getStore가 어디서 나온건지 알수 없었고, 다만 store 라는 부분을 봐서 이와 연관된 부분에서 오류가 난것인가 생각이 들었다. 그래서 redux 에서 store 를 다루는 부분의 코드들을 다시 점검해보았다. 3. 해결 과정 우선 stores 폴더에 configurStore.js 를 살펴보았다. 함수 configureStore 는 반환값으로 store 를 생성한다. 그 다음 전체 컴포넌트에 store 를 적용시키기 위해 셋팅했던 index.js 를 살펴보았다. 전체 컴포넌트를 Provider 로 감..
12-1. 함수 객체와 더불어 함수는 자바스크립트의 핵심이자, 스코프, 실행 컨텍스트, 클로저, 프로토타입 등 모두 함수와 관련이 있다. 우리가 알고 있는 수학에서의 함수는 결국 입력(input) 을 받아 출력(output) 을 내보내는 과정이다. function add(x, y) { return x + y; } add(2,5); // 7 x, y 를 입력받아 내부 과정을 통해 x+y 를 출력한다. 위 표현방법은 자바스크립트에서의 함수 표현방법이다. 자바스크립트에서 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 위 그림을 참고하여, 함수는 내부로 입력을 전달받는 매개변수(parameter), 입력을 인수(argument), 출력을 반환값..
