✍ 공부

[ 🐱‍💻 강의 노트 ] React 완벽 가이드 강의 정리 섹션 10 | 리듀서(Reducer)을 사용하여 부작용 처리 & 컨텍스트 API(Context) 사용하기

useEffect cleanup 함수 관련 지식이 모자람을 느끼고 들은 섹션 ✍ Effects, Reducers & Context 📌 Effect, Side Effect 리액트 라이브러리는 UI를 렌더링하는 임무가 있다. 사용자가 무엇인가와 상호작용하게 하는 것. Side Effects는 앱에서 일어나는 다른 모든 것을 뜻함 http request rocal storage 저장 이것들은 모두 애플리케이션에서 고려해야 한다. 그러나 이러한 작업들은 화면에 무언가를 가져오는것과는 직접적인 관련은 없다. 따라서 이것들은 일반적인 컴포넌트 함수 밖에서 일어나야 한다. 예를 들어 http request를 컴포넌트 안에서 시행하면 state가 변경될 때마다 계속 받아오게 된다. 무한 루프로 빠질 수도 있음. 따라서..

이벤트 제어하기. 쓰로틀링(throttling)과 디바운싱(debouncing)

✍ 쓰로틀링과 디바운싱 개념 : 디바운싱과 쓰로틀링은 자주 사용되는 이벤트나 함수의 빈도를 줄여 성능상 유리함을 가져오기 위한 개념이다. 📌 디바운싱 연속으로 호출되는 함수(이벤트)에서 가장 마지막(혹은 처음) 이벤트만 실행되도록 한다. == 입력(이벤트)가 끝난 후에 요청을 보내면 된다. 검색 시 많이 사용 이벤트 발생 시점 입력이 끝날 때까지 무한정 대기 이벤트 발생 시(ex onChange) 타이머를 설정해두고, 200ms(설정 시간) 이전에 타자 입력(이벤트)가 발생하면 이전 타이머는 클리어, 새로운 타이머를 설정해준다. 설정 시간 이전에 이벤트가 발생하지 않으면 이벤트 발생 끝 => 코드가 실행된다. 📌 쓰로틀링 연속으로 호출되는 함수(이벤트)를 일정 시간 동안에 한번씩만 실행되도록 한다. ==..

JavaScript 자바스크립트 이벤트 리스너(eventListener)

나.. 이벤트리스너 모르네 ✍ addEventListener EventTarget 인터페이스의 메서드. 지정한 유형의 이벤트를 수신할 때마다 호출할 함수를 설정한다. = 호출 시 인자를 전달받는다. 일반적인 대상 Element, Document, Window지만 XMLHttpRequest 같이 이벤트를 지원하는 모든 객체가 대상이 될 수도 있다. target.addEventListener('click', function(){}) 이벤트명을 나타낸 문자열 함수 (콜백함수) 옵션 ( capture, once, passive, signal ... ) 기존 이벤트 핸들러 (onclick)등을 사용하는 것에 비해 addEventListener을 사용하면 이전에 추가한 이벤트 핸들러를 제거할 수 있응 대응 메소드 ..

React 프로젝트 구조 잡기

작성 이유 구조를 하나도 생각하지 않고 만든 프로젝트 리팩토링하면서 너무 고통받아서 팀 프로젝트를 진행할 때 체계적인 구조를 잡고 진행하는 것이 좋을 것 같아서 0. React 공식문서 React는 파일을 어떤 식으로 폴더에 분류할 것인지에 대해서 제시하고 있지는 않습니다. 그러나 React 생태계 내에서 고려할만한 몇 가지 인기 있는 일반적인 접근법들이 있습니다. ✍ 파일의 기능이나 라우트에 의한 분류 일반적인 방법 중 하나. CSS, JS, 테스트 파일을 기능이나 라우트로 분류된 폴더에 같이 두는 방법 common/ Avatar.js Avatar.css APIUtils.js APIUtils.test.js feed/ index.js Feed.js Feed.css FeedStory.js FeedStory..

[ 🐱‍💻 강의 노트 ] React 완벽 가이드 강의 정리 섹션 27 | React + TypeScript 사용하기

React에 TypeScript를 함께 쓰고 있지만 지식의 얕음을 느끼고 다시 공부했다. 도구를 그냥 쓰는 것과 잘 알고 쓰는 것은 역시 다름을 느낀다. 0. React + TypeScript ✍ What? Why? 타입스크립트는 자바스크립트의 superset 자바스크립트의 기본적인 문법, 코드 작성법 등을 그대로 사용하지만 새로운 기능이 추가됨 타입스크립트는 자바스크립트의 라이브러리가 아니기 때문에 js기능을 확장하지는 않는다. 하지만 확장된 문법을 가지고 정적 타입을 갖는다. JS : dynamically tpyped (동적 타입 언어) TS : JS + static typing (정적 타입 언어) ✅ JS 함수 선언 시점에는 자료형을 특정 짓지 않는다 매개 변수를 받는다는 것만 알고 있음. 사용한 ..

[ 🐱‍💻 강의 노트 ] React 완벽 가이드 강의 정리 섹션 29 | 리엑트 요약 및 핵심 기능

0. React 프로젝트 만들기 표준 JS 프로젝트에는 HTML, CSS와 JS 파일들이 있고 HTML 파일 안에서 외부 파일들을 import 해서 동작한다 React에서는 이런식으로 하면 안됨. JS 안에 HTML을 쓴다 그래서 React에서는 좀 더 복잡하다. 빌드 단계를 거쳐야 하기 때문. 개발자들이 편한 방법대로 코드를 작성하면 내부적으로 변환된 후 브라우저에 도달. React에서는 개발 서버도 필요하다. 이 개발 서버가 리액트 애플리케이션을 로컬 호스팅한다. 페이지를 reload하지 않아도 업데이트됨. 도구를 이용해서 React 프로젝트를 만들어야 한다 가장 많이 쓰이는 것은 create-react-app 하지만 이 create-react-app을 쓰려면 Node.js를 먼저 설치해야 한다 No..

[ 🐱‍💻 강의 노트 ] React 완벽 가이드 강의 정리

0. 모바일 앱과 웹의 차이 모바일 앱은 화면 전환이 원활하게 이루어져서 기다릴 필요가 없다 하지만 웹사이트는 아니다 웹사이트를 클릭하면 요청이 서버에 전송되고 새로운 html 페이지가 브라우저로 보내져 화면에 표시됨 => 무겁고 불편하다 1. 웹에서 일어나는 사이클 이런요청과 반응 사이클을 자바스크립트로 분해해보자. JS는 개발자들이 브라우저에서 로직을 실행할 수 있게 해준다 => 사용자들이 보는 것을 조작할 수 있음 브라우저에서 JS는 DOM을 조작할 수 있는데 이를 통해 html이 렌더링된다. 이를 통해 새로운 html 페이지를 가져오지 않고도 새로운 것을 사용자에게 보여줄 수 있다 ✍ React가 필요한 이유 React.js는 클라이언트 사이드의 자바스크립트 라이브러리고 client-side의 자..

React에서 상태관리하기 (자체적 방법과 라이브러리 비교하기 Recoil, Redux)

상태? 웹을 렌더하는 데 영향을 미칠 수 있는 값. 이 정의로 보면 useState또한 상태 관리다. => 동적인 값이어야 한다. 지역상태 특정 컴포넌트 안에서만 관리된다 다른 컴포넌트와 데이터를 공유하지 않는다 보통 form 컴포넌트 간 상태 여러 컴포넌트에서 관리되는 상태 일반적으로 prop drilling 방식을 사용한다. 전역 상태 프로젝트 전체에 영향을 끼치는 상태 React의 상태관리 상태 관리 라이브러리를 이용하는 방법 외에도 React가 자체적으로 가지고 있는 상태 끌어올리기(Lifting State Up) 을 이용해 React 자체적으로 해결할 수 있다. 상태 끌어올리기 같은 상태가 필요한 여러 컴포넌트들이 공통적으로 가지고 있는 부모 컴포넌트에 상태를 선언한다. 따라서 여러 컴포넌트가 ..