일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- redux
- 리액트
- php문법
- 공부
- hot Reloading
- javascript
- createPortal
- rebase
- 리사이클러뷰
- useCallback
- list.map
- await
- 리덕스
- pull
- react
- 리액트를 다루는 기술
- 비동기처리
- async
- 가상회선교환
- merge
- Kotlin
- useState
- list
- 웹
- CSS
- Git
- equalityFn
- typescript
- 컬러구성
- 자동반영
- Today
- Total
목록전체 글 (50)
공부블로그
태그는 꼭 닫는다. 두 개 이상의 태그는 무조건 하나의 태그로 감싼다. ( 이 때 리액트의 Fragment를 이용하기도 한다. ) 자바스크립트 변수를 보여줘야 할 때에는 { } 중괄호로 감싸준다. 태그에 style과 CSS class를 설정할 때 인라인 스타일은 객체형태로 작성하고 ( class style = { ... } ), CSS class를 설정할 때에는 className= 으로 설정해준다. props를 통해 컴포넌트에게 값 전달하기 1. Hello 컴포넌트에 name과 color라는 props (속성)을 전달해주고 싶을 때 App. js 에서 props 전달 Hello. js 에서 받아서 작성 function Hello(props) { return 안녕하세요 {props..
1. 작업환경 준비 Node.js ( 자바스크립트 런타임 ) 와 Yarn ( 자바스크립트 매니저 도구 )를 설치한다. 설치 확인 ) 명령 프롬프트에서 > node -v v14.17.2 > yarn -v 1.22.10 git을 사용할 경우에는 Git Bash를 설치하고, VS Code를 사용할 것이므로 VS Code도 설치한다. 2. VS Code에서 내 git repository 연결 1) VS Code에서 F1을 누르고 git clone입력 -> Git: Clone 메뉴 선택 2) 내 Git에서 생성한 레포지터리 URL을 입력 3) 클론 시킬 폴더 선택하면 끝! 3. 새로운 리액트 프로젝트 만들기 npx create-react-app begin-react 위 명령어를 입력하면 begin-react 라는..
19강. 코드 스플리팅 리액트 프로젝트를 완성하여 제공할 때는 빌드 작업을 거쳐서 배포해야 한다. 이를 통해 파일 크기를 최소화하고, 문법이 원활하게 실행되도록 코드의 트랜스파일 작업도 할 수 있다. 이 작업은 웹팩이라는 도구가 담당한다. CRA( create react-app )의 기본 웹팩 설정에는 SplitChunks라는 기능이 적용되어 node-modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파일을 자동으로 따로 분리시켜서 캐싱의 효과를 누릴 수 있게 해준다. 코드 비동기 로딩을 통해서는 자바스크립트 함수, 객체, 혹은 컴포넌트를 처음에 불러오지 않고 필요한 시점에 불러와서 사용한다. 19. 1 ) 자바스크립트 함수 비동기 로딩 notify. js export de..
리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다. '미들웨어'를 사용하여 비동기 작업을 처리하는 방법을 알아보자. 1. 미들웨어란? 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 저장된 작업들을 실행한다. 따라서 액션과 리듀서 사이의 중간자라고 할 수 있다. 1.1 미들웨어 만들기 액션이 디스패치될 때마다 액션의 정보와 액션이 디스패치되기 전후의 상태를 콘솔에 보여주는 로깅 미들웨어를 작성해보자. src디렉터리에 lib디렉터리를 생성하고 그 안에 loggerMiddleware. js 파일을 생성한다. next 를 호출하면 그다음 처리해야 할 미들웨어에게 액션을 넘겨주고 미들웨어가 없다면 리듀서에게 액션을 넘겨준다 cons..
상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있어서 코드를 유지 보수하는데 편리 react-redux 라이브러리에서 제공하는 유틸함수와 컴포넌트를 사용 props를 받아와서 화면에 UI를 보여주기만 하는 프레젠테이셔널 컴포넌트와 리덕스와 연동되어 있는 컨테이너 컴포넌트를 분리 UI에 관련된 프레젠테이셔널 컴포넌트는 src/components 에 작성, 리덕스와 연동된 컨테이너 컴포넌트는 src/containers 컴포넌트에 작성 1. UI 준비하기 ( 프레젠테이셔널 컴포넌트 ) components 디렉터리 안에 Counter. js 와 Todos. js 를 작성해주고 App 컴포넌트에서 렌더링해준다. 2. 모듈 작성하기 ( 리덕스 ..
14. 1 ) 비동기 작업의 이해 비동기적으로 작업을 처리하면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러 가지 요청을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. 네트워크 송수신 과정에서 시간이 걸리는 API호출, setTimeout 함수를 사용한 특정 작업을 예약할 때 비동기적으로 처리한다. 예를 들어 다음 코드는 3초후에 printMe함수를 호출한다. function printMe() { console.log('Hello World'); } setTimeout(printMe, 3000); console.log('대기 중....'); printMe 함수 자체를 setTimeout 함수의 인자로 전달해 주는데, 이런 함수를 콜백함수라고 한다. Promise는 콜백 지옥 같은..
13. 1 ) SPA란? SPA란 Single Page Application의 약자로 싱글 페이지 애플리케이션이라는 의미이다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 해석한 뒤 보여준다. 하지만 이런 방식은 성능상의 문제가 발생할 수 있다. 그래서 최근에는 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해준다. SPA의 경우, 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저 주소 상태에 ..
11. 1 ) 많은 데이터 렌더링하기 createBulkTodos라는 함수를 만들고 useState의 초기값에 파라미터로 넣어서 많은 데이터를 렌더링해보자. import React, { useState, useRef, useCallback } from 'react'; ... function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); //기본값에 파라미터로 함수 형태를 넣어주면 컴포넌트가 처음 렌더링될 때만 createBulkTodos함수 실행된다. //ref를 사용하여 변수 담기 const nextId = useRef(2501); ... export ..