조금조금 REACT
1.조금조금 REACT, '리엑트'란?
조금조금 REACT, Day-01 React가 무엇인지, React 사용을 위한 환경설정 및 React를 사용하기 위한 기초이해 등에 대해서 살펴보고자 한다.
2.조금조금 REACT, Component와 props 이해하기
조금조금 REACT, Day-02 (1)React의 가장 작은 단위인 component에 대해서 살펴보고, (2) 생성된 하나의 컴포넌트에 인자와 매개변수를 주어 동작하는 props에 대해서 살펴보자.
3.조금조금 REACT, Component에 이벤트 부여하기
조금조금 REACT, Component에 동작을 부여할 수 있을까? component와 props를 기반으로 이를 동작하게 하는 javascript의 onclick 속성을 구현해보자.
4.조금조금 REACT, Component와 State 이해하기
조금조금 REACT, 리엑트에서 `single-page application` 구현을 가능하게 하는, State에 대해서 알아보자.
5.노마드코더의 React 강의 - 바닐라JS 크롬앱
본내용은 노마드코더 강의를 요약정리한 것입니다. 자료형부터 시작해서, 함수와 조건문까지 복습해보자.
6.노마드코더의 React 강의 - 바닐라JS 크롬앱
본내용은 노마드코더 강의를 요약정리한 것입니다. DOM객체부터, Window 객체까지 알아보자.
7.조금조금 REACT, 항해99 입문주차 질문지
리액트 공식문서를 기준으로 정리해 나가보자. 조금조금 REACT 01 React란? 리액트는 사용자 인터페이스(UI)를 구축하기 위한 "자바스크립트" 라이브러리로, 작은 블럭단위의 사용자 정의 태그()로 만들어진 "컴포넌트"들의 집합으로 SPA(싱글페이지 어플리케이션
8.조금조금 REACT, 폴더구조 및 리액트 코딩컨벤션
개발 코린이가 작업을 시작하면 파일의 몸집은 방대해지기 마련이다. 그 결과 발생되는 문제는 유지보수에 있어서 어떤 부분을 손봐야 하는지, 어디에 무엇을 기록했는지 찾기가 어려워진다는 점이다. 이러한 코린이들의 고민들에서 등장하게 된 ...
9.조금조금 REACT, HOOK - useCotext
리액트는 부모컴포넌트에서 자식컴포넌트에 정보를 전달하며 동작한다. 그러나 극단적인 결과에서 prop Drilling의 늪에 빠질 수 있게 된다... 그럴 때 유용한 React의 도구가 있는데..
10.조금조금 REACT, HOOK - useReducer
Hook useReducer 는 쉽게 말하면, useState의 상위 호환버전으로 useState의 내용이 복잡할 때, 이를 이용하여 보다 쉽고 간편하게 상태를 변경할 수 있다.
11.조금조금 REACT, Function 모듈화
이번 포스트의 주제는 Functions 모듈화를 다뤄보자.
12.조금조금 REACT, 의미있는 컴포넌트 분리(1)
코린이로써 사실 이해하지 못했던 부분이 있었다. 바로 렌더링 최적화에 대한 주제이다. 어떻게 하면 의미있는 컴포넌트 분리를 할 수 있을까?
13.조금조금 REACT, CSS in JS
JS의 문법체계에서 CSS를 제어한다는 것은 어떤 것일까? 정적으로 기록되었던 CSS를 동적으로 조작이 가능하게 된다는 말이 아닐까?
14.조금조금 REACT, Rendering-batching, 렌더링 최적화
리렌더링이란 쉽게 말해서 화면을 구성하는 요소의 변화가 감지되었을 때 화면을 업데이트해주는 것을 말한다. 이 과정에서 불필요한 것이 많아지면 결국 성능저하와 비용부담을 발생시키게 되는데...
15.조금조금 REACT, Rendering(최적화) - Hook : useMemo, React.Memo, useCallBack
렌더링을 최적화하는 useMemo를 시작으로 컴포넌트 단위의 캐싱, 함수 단위의 캐싱을 담당하는 아이들을 각각 살펴보자.
16.조금조금 REACT, ReDUX
조금조금 REACT, ReDUX(1) 리덕스가 동작하는 전체적인 이미지에 대해서 살펴보자.
17.조금조금 REACT, ReDUX(실전)
조금조금 REACT, ReDUX 실전연습
18.조금조금 REACT, Router
SPA 싱글페이지 어플리케이션인 리액트에 다중페이지 효과를 주는 Router와 Router와 관련된 HOOK에 대해서 알아보자.
19.패스트캠퍼스 - 초격차 강의 :: Hook Flow
본 포스트는 패스트캠퍼스 강의 중 일부를 요약정리한 내용입니다. 먼저 위의 이미지에 대한 코드를 살펴보자. 먼저 위의 코드는 바벨을 이용하여, 리액트 앱 설치 없이 리액트의 JSX 문법으로 기록된 구문을 번역하여 HTML에 적용시킬 수 있는 것을 의미한다. 바벨을 사용
20.패스트캠퍼스 - 초격차 강의 :: useRef
리액트 공식문서(https://ko.reactjs.org/docs/hooks-reference.htmlinput 태그에 ref 속성을 통하여 선언한 inputRef(useRef)를 연결해준다. 이렇게 연결된 태그의 이름(상자)는 inputRef.current를
21.조금조금 리액트 - Dayjs 달력만들기(1)
내가 생각하는 달력을 만든다는 우선 해당 달을 추출하고, 해당 달의 전체 일수를 추출하고, 이를 주차별로 구분하는 것이라고 생각했다. 이번 포스트는 전체과정을 위한 dayjs 라이브러리의 사전이해편이다.
22.조금조금 리액트 - Dayjs 달력만들기(2)
dayjs를 활용하여 실제 캘린더 만들기
23.조금조금 React - 이벤트 캡처링과 버블링
리액트에서는 이러한 브라우저가 제공하는 이벤트를 추상화하여 제공하는데 이를 용어상 합성 이벤트(SyntheticEvent)라 부르는 것이다. 추상화 과정에 대한 설명이 어렵지만, 리액트는 이 과정을 통해서 브라우저 및 플래폼에서 동작할 이벤트를 일괄적으로 처리하는데..
24.조금조금 React - IntersectionObserver
MDN문서에 따르면, Intersection Observer API는 감시하고자 하는 요소가 다른 요소(viewport)에 들어가거나 나갈때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될 때 마다 실행될 콜백 함수를 등록할 수 있게 한다. 즉, 사이트는 요소의 교
25.조금조금 리액트, React-Query, queryKey?
조금조금 리액트, React-Query, queryKey? 이번 프로젝트가 벌써 3주차에 들어서고 있다. 내가 맡은 부분은 메인페이지와 아트그램 페이지이다. 여기서 아트그램이란 전시회에 대한 포스트를 기록하는 공간을 말한다. 그리고 오늘에서야 만나게 된 트러블 이슈가
26.조금조금 - ServerState 와 ClientState
리액트를 들어가면 데이터를 처리하는 방법에 대해서 공부하게 된다. 그렇다면 리액트에서 상태란 무엇일까?리액트에서는 상태를 관리하는 이유는 애플리케이션의 UI 상태를 관리하기하기 위함이다. 상태에 따라서 조건부 렌더링을 할 수 있고, 화면에 데이터를 뿌릴 수 있다. 그러
27.조금조금 리액트 - 상태관리 라이브러리 (1) Recoil
글로벌 상태 관리 라이브러리 첫번쨰, Recoil
28.조금조금 리액트 - 상태관리 라이브러리 (2) Recoil - atoms - todolist
조금조금 리액트 - 상태관리 라이브러리 (2) Recoil - atoms - todolist
29.조금조금 REACT, '리엑트' - TSX (1) create-react-app
JS를 컴파일 단계에서 에러를 검증하자!! 본격 TS 공부기
30.조금조금 리액트 - TSX(2) Mock Service Worker 라이브러리
리액트 개발에 있어서, 임시서버를 구축하는 방법은 여러가지가 있다. 그 중에 하나가 json-server이고, 다른 하나로 MSW가 있다.
31.조금조금 REACT, '리엑트' - TSX (3) styled-components
TypeScript는 JavaScript에 대한 상위 집합 언어로 JavaScript의 단점을 보완하고 개선하기 위해 개발된 컴파일러 언어이다. TypeScript는 JavaScript의 모든 기능과 구문을 포함하면서 추가적으로 정적 타입 체크와 클래스 기반 객체 지향