차곡차곡 개발노트 차곡차곡 개발노트

리액트를 배우기 전에 (급) 미니 세션을 통해 리액트가 어떻게 작동하는지 접했는데, 당시에는 리액트가 작동하는 방식은커녕 어떤 녀석인지도 모르는 백지상태에서 들었던지라 거의 반 이상을 이해할 수 없었다. 리액트를 처음 접한 지 3개월 정도 지났다. 이제 어디가서 "리액트를 할 줄 안다"라고 말해야 할 텐데.. 습관적으로 작성하던 CRA, 그 뒤에 어떤 작동 방식이 있는지 알고 사용하지 않으면 진정 할 줄 안다고 말할 수 없기에, 그때의 기억을 되살려 정리해본다. 총 세 개의 포스팅으로 나누어 정리해보려고 한다. 1. 리액트가 작동하는 방식 2. Webpack 들여다보기 3. Babel 들여다보기 리액트 React 페이스북에서 개발하고 관리하는 UI 라이브러리다. 여기서 UI 라이브러리라고 꼭 집어 이야기..

Prop Drilling 문제를 겪다보니 리덕스의 필요성이 느껴져서 공부했다. Redux 왜 필요해요... App.js에서 Header 컴포넌트에 어떠한 상태를 넘겨주고 Header에서는 또 MyPage 컴포넌트에 넘겨주고... 그러다가 Content라는 컴포넌트에 Books 컴포넌트에서 Mypage의 컴포넌트 상태 중 어떤 것이 필요하다면... 이정도만 되어도 간단하게 타고 올라가서 다시 뚫고(?) 내려가겠지만.. 깊이가 깊어질수록 불편하고, 헷갈리고... 대체 state를 누가 관리할 것인가 상태관리를 보다 편리하게 해주는 리덕스 라이브러리 이야기는 여러번 들었지만, 필요성을 느끼지 못하고 있었다. 프로젝트를 진행하며 상태가 복잡해지니 그것이 무엇인지 경험이나 해보고 싶어져서 들여다 보았다. 리덕스의..

VS코드에 TS버전이 내가 global에 설치한 버전과 달라서 발생하는 이슈 //tsconfig.json "compilerOptions": { jsx: "react-jsx" } "react-jsx" 부분에 에러가 생겨 아래와 같은 문제가 발생한다. Argument for '--jsx' option must be: 'preserve', 'react-native', 'react' react-jsx를 react로 변경하면 잠시 에러가 잡히지만, 다시 vs코드를 실행하면 자동으로 react-jsx로 바뀌며 에러 발생 vs코드에서 typescript 버전 설정하기 먼저 내 로컬 pc 터미널에서 typescript가 설치되었는지 확인한다. npm list -g typescript empty라면 typescript를..

드림코딩 by 엘리 강의를 수강하고 남기는 회고입니다. 리액트 혼자서 공부하기..? 처음 리액트를 접했을 때 개념과 작동원리가 생소하게 느껴졌다. 공식문서를 가장 열심히 챙겨 보았지만, 주먹구구식으로 이곳저곳에서 지식을 쌓는 듯했다.. 그러다 마침 유튜브에서 엘리의 자바스크립트 역사 영상을 접하게 되었고 순식간에 관련 영상들까지 해치워버렸다. 명쾌하고 명료한 설명에 흩어져 있단 나의 JS 지식들이 정리되는 느낌을 받았다. (+엘리 특유의 밝고 긍정적인 톤 +명확한 딕션은 덤!) 그래.. 이 분이라면 나의 리액트 지식도 집합시켜주실 수 있을 거야! 하는 확신이 생겨 홀린 듯 강의를 수강하게 되었다. 그리고 완강한 지금, 그 선택에 매우 만족하고 있다. 가장 기본적인 리액트의 컨셉과 구조 이해부터, 활용법 ..

✿ React는 component로 이루어져 있다. ❀ component는 데이터를 가지고 있는 state, 사용자에게 어떻게 보일지 정하는 render() 로 이루어져 있다. ✿ React는 Re-render the whole app on every update - 즉 데이터가 조금이라도 업데이트 되면 전체적으로 애플리케이션 리랜더가 이루어 진다. ✿ component는 class 혹은 function으로 구현할 수 있다. ❀ class로 구현하는 방법은 React.Component 그리고 React.PureComponent ❀ function으로 만들 수 있는 방법은 function, memo(function) 그리고 React Hook ✿ 클래스 컴포넌트와 같이 state와 lifecycle met..