1. 프로젝트 준비하기 첫 번째 프로젝트 카운터 앱에 이어서 두 번째 프로젝트로 할 일 관리 앱을 만들자.이 프로젝트에서는 요구사항 분석, UI, 기능 구현의 흐름을 이해하는 것이 목표다.또한, CRUD 기능 구현이란 무엇인지 이해해 보자.   [ 요구사항 분석 ]  프로젝트1 카운터앱을 준비할 때와 마찬가지로 앱의 요구사항을 분석하고, 이를 토대로 필요한 기능을 하나씩 구현해 보자.  아래는 할 일 관리 앱을 최종적으로 구현한 모습이다. 이처럼 할 일 관리 앱에는 다음과 같은 기능이 있다!오늘의 날짜를 요일, 월, 일, 연도순으로 표시할 일을 작성하는 입력 폼버튼 클릭 시 할 일 아이템을 생성하는 추가 기능생성한 아이템을 페이지 하단에 표시하는 리스트원하는 할 일만 추출할 수 있는 리스트할 일을 마쳤는..

24-25/React.js 2 2024. 12. 27. 10:00

project 1 [카운터] 앱 만들기1. 프로젝트 준비하기프로젝트를 구현하기 전, 앱을 어떤 설계와 기능으로 구현할지 살펴보는 단계인 요구사항 분석 과정을 거쳐야 한다. 리액트 앱을 구현할 때는 컴포넌트 단위로 생각하는 게 필요하다. [카운터] 앱의 요구사항 분석을 하자면App 컴포넌트: Viewer 컴포넌트와 Controller 컴포넌트를 감싸는 템플릿Viewer 컴포넌트: 현재의 카운트 표시Controller 컴포넌트: 카운트를 제어재사용 가능한 수준에서 기능 별로 컴포넌트를 분리하면 프로젝트를 관리하기 쉬워진다.  2. UI 구현하기UI란 사용자 인터페이스라는 뜻으로, 웹 페이지에서 사용자와 상호작용하는 요소를 말한다. 요소의 외양(껍데기)라고 생각하면 된다.2-(1). Viewer 컴포넌트 만들..

24-25/React.js 1 2024. 11. 22. 10:00

1. 컴포넌트개발자들은 리액트를 컴포넌트 기반의 UI 라이브러리라고 소개한다. 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 마치 레고 조립하듯 하나로 합쳐 페이지를 구성하기 때문이다. 리액트의 핵심 개념 중 하나인 컴포넌트를 자세히 알아보겠다.  1-(1) 실습 환경 설정하기앞서 리액트 앱을 생성했던 방법과 동일하다.npx create-react-app . Documents 폴더 아래 chapter5 폴더를 만든 다음, 해당 폴더 안에서 터미널을 열어 위 명령어로 새로운 리액트 앱을 만든다. 그 후 사용하지 않을 파일과 코드를 삭제하면 실습 환경 설정이 완료된다.1-(2) 첫 컴포넌트 만들기리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만든다. 클래스로 컴포넌트..

24-25/React.js 1 2024. 11. 8. 13:36

16장 리덕스 라이브러리 이해하기 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능하다. 코드의 유지 보수성을 높여 주고 작업 효율도 극대화 해준다. 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리할 수 있다. 16.1 개념 미리 정리하기 16.1.1 액션 상태에 변화가 있으면 액션이 발생한 것이다. 액션의 하나의 객체로, 액션 객체로 불린다. 액션 객체는 type 필드를 반드시 가지고 있어야함. 외의 값들은 작성자가 원하면 설정. //액션 객체의 예시 { type: 'TOGGLE_VALUE' data: { id: 1, text: '리덕스 배우기' } } 16.1.2 액션 생성 함수 액션 생성 함수(action creator) : 액..

23-24/React.js 3 2024. 1. 19. 10:00

3장 1. Nods.js Node.js 등장 이전에는 웹 브라우저가 유일한 자바스크립트 런타임이었습니다. 따라서 자바스크립트는 웹 브라우저 외에서는 사용할 수 없었습니다. 그러나 독립적인 자바스크립트 런타임인 Node.js가 등장한 이후에는 어떤 환경에서도 자바스크립트를 실행할 수 있게 되었습니다. 결국 자바스크립트를 이용해 웹 서버나 모바일 애플리케이션을 개발하는 등 자바스크립트의 활용 범위가 넓어졌고, 이를 사용하는 개발자도 많이 늘어나게 되었습니다. 2. Nods.js 환경 설치 - 윈도우 사용자 계정 이름 바꾸기 PC의 사용자 계정명이 한글로 되어 있다면, Node.js 설치 및 향후 이용 과정에서 문제가 발생할 수 있습니다. 따라서 Node.js 설치 전에 윈도우의 사용자 계정을 영문명으로 변경..

23-24/React.js 1 2023. 10. 13. 10:00

혹시 웹페이지를 만들어본 경험이 있나요. 혹은 웹 페이지를 만들면서, 수많은 html 태그와 복잡한 항목을 코딩하기에 지쳐본 경험이 있나요. ​ 여기 이 복잡함에 염증을 느껴 그 해결책으로 React를 이용했고, 이를 계기로 '웹 개발' 영역에 터를 잡은 사람이 있습니다. 저자 김민준은 자신이 좋아하는 리액트를 더 많은 사람들이 쉽고 편하게 배우기를 바라면서 한 권의 책을 집필합니다. ​ ​ 리액트를 다루는 기술 - 교보문고 입문부터 대규모 애플리케이션까지 한 권으로 | 리액트 베스트셀러 1위리액트, 현장 밀착 입문서는 따로 있다!자바스크립트의 기본 기능과 문법을 숙지한다리액트의 기본기를 익히려면 자바스 www.kyobobook.co.kr ​ 책 [리액트를 다루는 기술]은 리액트를 처음 다루는 사람부터 ..

22-23/22-23 리액트 스타터 1 2022. 9. 29. 10:00

INDEX 17장 컴포넌트 스타일링 1. 작업 환경 설정 2. UI 준비하기 2.1 카운터 컴포넌트 만들기 2.2 할 일 목록 컴포넌트 만들기 3. 리덕스 관련 코드 작성하기 3.1 counter 모듈 작성하기 3.2 todos 모듈 만들기 3.3 루트 리듀서 만들기 4. 리액트 애플리케이션에 리덕스 적용하기 4.1 스토어 만들기 4.2 Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기 4.3 Redux DevTools의 설치 및 적용 5. 컨테이너 컴포넌트 만들기 5.1 CounterContainer 만들기 5.2 TodosContainer 만들기 6. 리덕스 더 편하게 사용하기 6.1 redux-actions 6.2 immer 7. Hooks를 사용하여 컨테이너 컴포넌트 만들기 7.1 u..

21-22/21-22 리액트 스타터 -2 2022. 1. 31. 13:01

INDEX 16장 리덕스 라이브러리 이해하기 1.개념 미리 정리하기 1.1 액션 1.2 액션 생성 함수 1.3 리듀서 1.4 스토어 1.5 디스패치 1.6 구독 2. 리액트 없이 쓰는 리덕스 2.1 Parcel로 프로젝트 만들기 2.2 간단한 UI 구성하기 2.3 DOM 레퍼런스 만들기 2.4 액션 타입과 액션 생성 함수 정의 2.5 초깃값 설정 2.6 리듀서 함수 정의 2.7 스토어 만들기 2.8 render 함수 만들기 2.9 구독하기 2.10 액션 발생시키기 3. 리덕스의 세 가지 규칙 3.1 단일 스토어 3.2 읽기 전용 상태 3.3 리듀서는 순수한 함수 4. Question 개념 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 리덕스를 왜 사용하는가? 컴포넌트의 상태 업데이트 관련 로직을 다른 ..

21-22/21-22 리액트 스타터 -2 2022. 1. 31. 13:00

20.1 서버 사이드 렌더링의 이해 클라이언트 사이드 렌더링 : UI 렌더링을 브라우저에서 모두 처리하는 것 ⇒ 리액트는 기본적으로 클라이언트 사이드 렌더링! 서버 사이드 렌더링 : UI를 서버에서 렌더링하는 것 [서버 사이드 렌더링의 장점] 웹 서비스의 검색 엔진 최적화 초기 렌더링 성능 개선 자바스크립트 파일이 다운로드되지 않은 시점에도 html 상에 사용자가 볼 수 있는 콘텐츠가 있어 대기 시간 최소화, 사용자 경험 향상 클라이언트 사이드 렌더링은 로딩되고 실행될 때까지 빈 페이지를 보며 대기해야 함 [서버 사이드 렌더링의 단점] 서버 리소스가 사용된다 ⇒ 사용자가 동시에 몰릴 시, 서버에 과부하 발생 고려사항이 많아 개발 어려움 서버 사이드 렌더링과 코드 스플리팅 충돌 서버 사이드 렌더링과 코드 ..

21-22/21-22 리액트 마스터 2022. 1. 31. 13:00

Intro 리액트 프로젝트를 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포해야 한다. 빌드 작업에선 불필요한 주석, 경고 메시지, 공백 등을 제거해 파일 크기 최소화 JSX문법이나 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업 진행 이미지와 같은 정적 파일의 경로 설정 과 같은 일을 한다. 빌드 작업은 웹팩 이라는 도구가 담당한다. 프로젝트의 모든 자바스크립트 파일 하나로 합치기 프로젝트의 모든 CSS 파일 하나로 합치기 스플리팅이란? 파일을 분리하는 작업 CRA를 통해 React 프로젝트를 만들 경우 기본으로 탑재되어있는 SplitChunks 기능을 통해 스플리팅이 되지만, 단순한 캐싱 효과만 있을 뿐이다. 애플리케이션의 규모가 커질 경우에 기본적인 스플리팅 기능만 이용하면 로딩..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05

1. 작업환경 준비 프로젝트 생성) $ yarn create react-app learn-redux-middleware 라이브러리 설치) $ yarn add redux react-redux redux-actions counter 리덕스 모듈 작성) ✅ 복습! 모듈이란 Ducks 패턴을 사용해 액션 타입, 액션 생성 함수, 리듀서를 작성한 코드를 말한다! import { createAction, handleActions } from "redux-actions"; //액션타입 정의 const INCREASE = "counter/INCREASE"; const DECREASE = "counter/DECREASE"; //액션 생성 함수 export const increase = createAction(INCREA..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05

INDEX 13장 리액트 라우터로 SPA 개발하기 1. SPA란? 1.1 SPA의 단점 2. 프로젝트 준비 및 기본적인 사용법 2.1 프로젝트 생성및 라이브러리 설치 2.2 프로젝트에 라우터 적용 2.3 페이지 만들기 2.4 Route 컴포넌트로 특정 주소에 컴포넌트 연결 2.5 Link 컴포넌트를 사용하여 다른 주소로 이동하기 3. Route 하나에 여러 개의 path 설정하기 3.1 App에서 todos 상태 사용하기 3.2 항목 추가 기능 구현하기 3.3 지우기 기능 구현하기 3.4 수정 기능 4. URL 파라미터와 쿼리 4.1 App에서 todos 상태 사용하기 4.2 항목 추가 기능 구현하기 5. 서브 라우트 6. 리액트 라우터 부가 기능 6.1 history 6.2 withRouter 6.3 ..

21-22/21-22 리액트 스타터 -2 2022. 1. 24. 13:00