: JS의 함수는 일급 객체로 변수에 할당할 수 있었는데 그것처럼 함수도 타입을 미리 지정해서 type alias에 저장할 수 있다. 본래 이와 같이해야하는 것을아래와 같이 해줄 수 있다.아직 이것에 대한 실용성(?)은 제대로 알지 못하지만 나중에 props로 함수를

TS에만 존재하는 타입에 관하여 Void : 사실 void는 자바(JAVA)를 썼던 사람이라면(사실 대부분의 타입스크립트 타입들이 그렇지만) 알고 있는 개념일 것이다. 결과적으로 void는 함수에서 리턴값이 없을 때 return 타입을 void로 해주거나, retur

위의 예시를 보면(타입스크립트 코드), 위에는 num이라는 변수의 타입을 명시적으로 표현해주지 않은 것이고, 아래는 명시적으로 넘버 타입을 표시해준 부분이다. 이 때, 주석 처리한 부분을 보면, num이라는 변수에 'string'이라는 문자열 타입의 자료를 할당하려했는

: 새로운 회사에서 기껏해야 4개월 정도 일하고 있는 나지만 여태껏 일하면서 가장 '에러'를 많이 발견하고, 일으켰던 부분은 바로 '타입(type)'과 관련된 부분이었다. 특히 api를 통해 자료를 받아와서 렌더링을 하는 부분에 있어서 자료가 안오거나, 잘못된 자료가

아래 이미지처럼 'node -v' 명령어를 통해 현재 버전 확인이 가능하다(이미 업데이트를 최신으로 해놔서 18.1.0이다).버전 업데이트를 위한 모듈을 설치하기 전에 npm cache를 비워준다.버전 업데이트를 위해서는 nodeJS 버전을 관리하는 모듈이 필요한데,

: TypeScript는 마이크로소프트에서 개발한 오픈소스 프로그래밍 언어다. 쉽게 정의해보면타입스크립트 = 자바스크립트 + '타입'적용Javascript의 상위 집합으로 ECMAScript의 최신 표준을 모두 지원하며(모두 포괄함) 트랜스파일링(by 타입스크립트 컴파

: 우리는 뭔가를 인지할 때 컴퓨터처럼 사고 작용을 담당하는(CPU) - 작업 공간이라고 할 수 있다.장기적으로 내용을 기억하는 하드 드라이브 - LTM(Long Term Memory)단기적으로 내용을 기억하는 메모리 - STM(Short Term Memory)입력을

: 브라우저, NodeJS의 특징은 JS 파일을 실행할 수 있다는 것이다. 그러나, 타입스크립트는 브라우저, NodeJS 양쪽 모두에서 실행될 수 없다. 따라서, 결국 타입스크립트를 써도 Javascript로 변환하는 과정이 필요한데, 이는 타입스크립트 컴파일러를 통해

순수함수인 reducer에서 각기 다른 로직(api의 결과에 따른)을 만들면 순수하지 않은 함수가 되기 때문에 이를 reducer 외부에서 파이프라이닝(dispatch에) 작업을 통해 해결하는 아이디어를 사용한 것이 thunk이다. 그래서 시작 -> api 결과(성공)

사실상 리덕스를 일반 코드로 표현해보면 위와 같을 것이다. send는 우리가 흔히 아는 dispatch일 것이고, 그 안에 액션을 넣어주면, 그에 따른 액션을 dispatch한다. 그에 따라 store안에 전역 state가 변하게 된다. 이 때, state를 변화시키는

Today I Learned Redux-Thunk는 함수를 디스패치 할 수 있도록 해주는 미들웨어이다. Redux-Saga는 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용한다.

Today I Learned useReducer vs useState > The useReducer hook is usually recommended when the state becomes complex, with state values depending on ea

이러한 특성을 가진 useRef를 보통 DOM을 참조 및 가져와서 쓰는데에만 사용했었는데, 개수를 센다던지, 회수를 센다던지의 값을 쓸 때 useRef를 이용해서 사용하면 좋을 것 같다. 이를 사용하면 딜레이의 걱정도 없고, 리렌더링이 될 일도 없기 때문이다.위와 같은

이 블로그를 참조해서 공부를 했는데, 리액트를 통해 좀더 유지, 보수하기 좋은 코드를 짜기 위한 고민을 해봤다.    The most common function of a container component is to obtain data. Obtaining data

항상 solid한 코드를 작성하려고 리액트-리덕스 패턴 속에서도 노력했었지만 솔직히 정확하게 리액트 내에서 solid한게 뭔지도 잘 몰랐던 것 같다. \*\* Single Responsibility Principle 이란?What the single-responsibi

나는 항상 props가 업데이트 되고 그 props를 가지고 특정한 값을 리렌더링해야 하는 경우에는 props에 대해서 useEffect의 deps에 넣고, 그 안에서 또 다른 state를 props 값을 커스텀한 값으로 업데이트 해주는 방식으로 이러한 로직을 구현했었

예를 들어, onClick 이벤트 등을 jsx 내부에 쓸 때 복잡한 로직의 함수를 넣는 등의 행동을 '지양'하자. jsx 내부 로직은 항상 lean하게 유지한다는 생각을 갖자.?? 무슨말일까. SPA 를 지원하는 리액트는 User의 interaction에 따라 화면을

: 본래 state update or props 의 변동이 발생하면 해당 컴포넌트는 재실행이 되게 된다. 그렇게되면 함수 내의 모든 로직을 다시 실행하게 된다. 사실 함수는 호출할 때 함수 내의 로직을 매번 다시 실행하도록 설계됐기 때문에 이는 당연한 것이다. 하지만,

: 어제도 배웠지만, index.js는 웹앱이 처음 실행되는 시점 그리고 새로고침되는 시점에서만 activate된다. 그리고 그안의 ReactDOM.render()가 항상 궁금했는데, 보통 그안의 첫번째 매개변수로 <App /> 가 오게된다. 이 때, 나는 원래

: 위에서 말하는 선언적 방식은 흔히 말하는 '명령적 방식'이라는 프로그래밍 기법과 대비대는 방식이라고 이해하면 된다(명령형 프로그래밍 vs 선언형 프로그래밍). 그러면 리액트가 선언적 방식이라는 말은 무슨 말일까?. 보통 vanila JS를 사용해서 프론트엔드 작업을