Copyright
본 강의는 이고잉 [생활코딩! React 리액트 프로그래밍 ] 책에 대한 해설입니다.
그러므로 현재 카테고리 [ 생활코딩! React 리액트 프로그래밍 ] 의 교재에 포함 된 코드와 내용에 대한 저작권은 위 책 저자에게 있습니다.
아주 훌륭한 교재이므로 추천 합니다.
참고로 저는 저자 이고잉과 아무 관련이 없습니다.
CRUD project check
이 교재의 전반부를 학습하고 만들어야 하는 프로젝트 입니다.
미리 체크하기 바랍니다.
https://codesandbox.io/p/sandbox/crud-ing-ny3scf
https://codesandbox.io/p/sandbox/crud-ing-ny3scf
codesandbox.io
Source
https://lshjju.tistory.com/103
egoing - React - Source
Source교재 안내https://wikibook.co.kr/react-rev-ebook/ 생활코딩! React 리액트 프로그래밍 (개정판) (ebook): 처음 프로그래밍을 시작하는 입문자의 눈높이세상에서 리액트를 가장 쉽게 설명한 입문서! 생활
lshjju.tistory.com
공식 교재와 관련해서 저자가 제공하는 자료입니다.
저자 직강 유튜브 강의도 있습니다.
필요한 분은 참고하기 바랍니다.
Two track
본 강의는 교재와 추가교재 투트랙으로 진행 됩니다.
교재 - 포스트 타이틀이 이고잉으로 시작한다면 교재에 대한 해설입니다.
추가교재 - 이고잉이라는 키워드가 없다면 교재에 수록된 내용외에 추가 교재입니다.
Live code
실습중인 모든 코드는 실시간으로 라이브 코드에 업데이트 됩니다.
라이브 코드 유알엘은 레슨 시작하면 공개 합니다.
코드인 놓친 분들은 이 유알엘 참고하면 됩니다.
WEB Editor
https://lshjju.tistory.com/143
code sandbox manual - 코드샌드박스로 리액트 프로젝트 생성하기
code sandbox manual https://jjinny0609.tistory.com/172 https://developer-talk.tistory.com/97 https://meta-board.tistory.com/5 https://nomadcoders.co/faq/challenge/code-sandbox end.
lshjju.tistory.com
강의 전반부는 코드샌드박스 웹에디터를 활용 합니다.
계정 생성 바랍니다.
https://lshjju.tistory.com/104
StackBlitz web editor - 스택블리츠 웹 에디터
스택블리츠로 새 프로젝트 생성하기 https://stackblitz.com/ 로그인 방법 선택 뉴프로젝트 탭 원하는 프로젝트 선택 프로젝트 생성 완료 StackBlitz스택블리츠(StackBlitz)는 웹 기반 코드 편집기 및 개발
lshjju.tistory.com
강의 후반부는 스택블리츠 웹에디터를 활용 합니다.
계정 생성 바랍니다.
1장: 리액트 기초 편
리액트의 기초 문법과 핵심 개념을 익힌다.
01 수업 소개
리액트를 소개하고 리액트 라이브러리의 필요성을 이해한다.
https://lshjju.tistory.com/109
React.js about - 리액트 정의
React의 정의React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. Facebook(현 Meta)에서 개발하였으며, 단일 페이지 애플리케이션(SPA)의 UI를 효율적으로 구현하는 데 중점을 두
lshjju.tistory.com
https://lshjju.tistory.com/347
React basic manual
리액트 필수 매뉴얼 정리Component컴포넌트는 React의 핵심 개념으로, 웹 페이지의 사용자 인터페이스(UI)를 재사용 가능한 독립적인 단위로 분할하는 역할을 수행합니다. 이는 마치 레고 블록을 조
lshjju.tistory.com
02 실습 환경 구축
리액트 실습 환경을 구축하는 법을 배우고, 기본 샘플 앱을 구동하는 방법을 익힌다.
my directory setting
앱과 프로젝트 셋팅에서 디렉토리가 간결해지면 코딩 효율이 좋아집니다.그러기 위해 에디터, 디비, 프로젝트, 서버, 라이브러리 등을 내가 통제하기 쉬운 패스로 설정하겠습니다.디렉토리를
lshjju.tistory.com
위 포스팅에서 React project directory 매뉴얼 참고해서 프로젝트 디렉토리 생성 합니다.
Visual studio code install
vs code install https://code.visualstudio.com/우측 상단 다운로드 버튼 좌측 윈도우스 10 11 큰 버튼 저장 설치 동의 - 다음 설치위치선택 패스 안 바꿔도 됨 다음 시작메뉴폴더선택 패스 안 바꿔도 됨 다음
lshjju.tistory.com
vs code를 사용중인 개발자라면 이 부분은 패스해도 됩니다.
Visual studio code extension recommendation and manual - vs code 익스텐션 추천
확장팩 설치 매뉴얼 vs code exetension installvs code 확장기능 설치 - 웹표준 기준 레프트 하단 익스텐션 메뉴 클릭 네모난거 네개 익스텐션 화면 위 검색창에 테스트로 html css support 검색 롸잇트 인스
lshjju.tistory.com
이 프로젝트에서 익스텐션 인스톨은 옵션입니다.
프로젝트에서 특별하게 사용하는 익스텐션이 없습니다.
그러므로 참고만 하고 인스톨 안해도 됩니다.
https://lshjju.tistory.com/105
Node.js install
Node.js? Node.js는 한마디로 JavaScript를 웹 브라우저 환경이 아닌 곳에서도 실행할 수 있도록 해주는 실행 환경입니다. 과거에는 JavaScript가 주로 웹 브라우저 안에서만 동작하여 웹 페이지의 동적인
lshjju.tistory.com
https://lshjju.tistory.com/107
react new project building - VS Code에서 React 프로젝트 생성하기
VS Code에서 React 프로젝트 생성하기다운로드 폴더 혹은 본인이 원하는 폴더에 새폴더를 만듭니다.다운로드 폴더 안에 리앤트앱이라는 폴더를 하나 만듭니다.react 라는 폴더명은 에러를 일으킬 수
lshjju.tistory.com
03 소스 코드 수정 방법
리액트 앱을 수정하는 법을 배우고, 애플리케이션을 배포하는 법을 배운다.
https://lshjju.tistory.com/126
React.js deploy - 리액트 배포하기
React 프로젝트 배포배포는 개발이 완료된 React 애플리케이션을 사용자들이 접근할 수 있도록 웹에 올리는 과정입니다.프로젝트 빌드하기터미널에서 기존 작업 종료 합니다.터미널에 기존 작업
lshjju.tistory.com
https://lshjju.tistory.com/111
egoing - React - Directory scan
리액트 디렉토리 구조를 살펴 보겠습니다. new 프로젝트 생성 구조를 확인하기 위해 코드샌드박스로 리액트 프로젝트를 하나 생성하겠습니다. https://lshjju.tistory.com/143 크리에이트리액트크리에이
lshjju.tistory.com
04 컴포넌트 만들기
리액트에서 제공하는 컴포넌트의 역할과 필요성을 이해하고, 리액트 컴포넌트를 작성하는 법을 배운다.
https://lshjju.tistory.com/113
egoing - React - component
HTML 태그를 펑션으로 분리하고 조립해 보겠습니다.마치 레고처럼 codesandbox start코드샌드박스에서 시작해 보겠습니다.새로운 프로젝트를 빌딩하겠습니다. new project building import "./styles.css";export de
lshjju.tistory.com
https://lshjju.tistory.com/128
React.js component - 리액트 컴포넌트
React ComponentReact를 배우면서 가장 먼저 만나게 되는 중요한 개념이 바로 **컴포넌트(Component)**입니다.React는 웹 애플리케이션의 사용자 인터페이스(UI)를 만들 때 이 컴포넌트들을 조립해서 사용합
lshjju.tistory.com
05 props
props를 이용해 리액트 컴포넌트의 재사용성을 높이는 방법을 배운다.
https://lshjju.tistory.com/115
egoing - React - props
헤더와 아티클에 데이터 출력하기헤더와 아티클에 데이터를 전달하여 데이터 바인딩 합니다. 펑션헤더에 프롭스로 데이터 바인딩 하기 앱펑션 헤더태그에 타이틀을 추가합니다. function Header(pro
lshjju.tistory.com
https://lshjju.tistory.com/117
egoing - React - props - array
네비게이션 유아이 만들기단순한 데이터만 바인딩 할 수 있다면 재미 없습니다.어레이도 바인딩할 수 있어야 합니다.어레이 데이터 바인딩을 실습해 봅니다.그러려면 약간의 콘트롤 스테이트
lshjju.tistory.com
https://lshjju.tistory.com/129
React.js props - 리액트 프롭스
Props의 정의Props는 "properties"의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 컴포넌트 간에 데이터를 주고받을 수 있게 해주는 React의 핵심 개념이라고 할 수 있
lshjju.tistory.com
06 이벤트
컴포넌트 이벤트를 만들고 활용하는 법을 배운다.
https://lshjju.tistory.com/118
egoing - React - event
헤더를 클릭하면 알림창을 띄웁니다.이벤트를 발생시켜 봅니다. function App() { const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'javascript is ...'} ]
lshjju.tistory.com
https://lshjju.tistory.com/130
React.js event - 리액트 이벤트
EventEvent(이벤트)는 웹 페이지에서 발생하는 사용자의 행동이나 시스템의 변화를 의미합니다. 예를 들어, 버튼 클릭, 키보드 입력, 마우스 움직임, 페이지 로딩 등이 모두 이벤트에 해당합니다. Re
lshjju.tistory.com
07 state
state의 역할과 필요성, 사용법을 이해한다.
https://lshjju.tistory.com/121
egoing - React - state
네브와 로고를 탭하면 각각 해당 데이터를 출력 하게 합니다. function App() { const mode = 'WELCOME'; const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'j
lshjju.tistory.com
https://lshjju.tistory.com/131
React.js state - 리액트 스테이트
stateState는 React 컴포넌트 내에서 변경 가능한 데이터를 관리하는 객체입니다. 쉽게 말해, 컴포넌트의 "기억 장치" 역할을 하며 사용자 상호작용이나 네트워크 응답 등에 따라 변할 수 있는 값들
lshjju.tistory.com
08 Create
앱의 CRUD 기능 가운데 Create 기능을 구현한다.
https://lshjju.tistory.com/124
egoing - React - create
글쓰기 기능 만들기 유저가 사용할 글쓰기 유아이를 만듭니다. return ( { setMode('WELCOME'); }}> { setMode('READ'); setId(_id); }}> {content} { event.preventDefault(); setMode('CREATE'); }}>Create ); 크리에이트 유아이를 만
lshjju.tistory.com
09 Update
앱의 CRUD 기능 가운데 Update 기능을 구현한다.
https://lshjju.tistory.com/125
egoing - React - update
글 수정 기능 만들기 상세페이지에서만 업데이트 유아이가 노출되도록 합니다. return ( { setMode('WELCOME'); }}> { setMode('READ'); setId(_id); }}> {content} { event.preventDefault(); setMode('CREATE'); }}>Create Update ); 업
lshjju.tistory.com
10 Delete & 수업을 마치며
앱의 CRUD 기능 가운데 Delete 기능을 구현한다.
https://lshjju.tistory.com/132
egoing - React - delete
데이터를 삭제하고 초기화면으로 이동합니다. else if(mode === 'READ') { let title, body = null; for(let i=0; i contextControl = { event.preventDefault(); setMode('UPDATE'); }}>Update { const newTopics = [] for(let i=0; i } 델리트 버튼
lshjju.tistory.com
2장: React Router DOM 편
리액트를 이용해 여러 개의 페이지로 이뤄진 애플리케이션을 만드는 데 도움을 주는 react-router-dom의 사용법을 익힌다.
01 수업 소개
리액트 라우터 DOM을 소개하고 필요성을 이해한다.
02 실습 준비
실습에 사용할 앱을 생성한다.
03 Router
BrowserRouter의 역할과 사용법을 익힌다.
04 Link
Link, NavLink컴포넌트의 역할과 사용법을 익힌다.
05 Nested Routing
하나의 라우터로 path값에 따라 주소를 처리하는 법을 익힌다.
06 수업을 마치며
추가로 배울 고급 주제에 대해 알아본다.
https://lshjju.tistory.com/272
egoing - React - React Router DOM - stackblitz
Router DOMStackblitz new project여러가지 이슈로 스택블리츠에서 프로젝트를 진행하겠습니다.새프로젝트 생성https://lshjju.tistory.com/104 StackBlitz web editor - 스택블리츠 웹 에디터스택블리츠로 새 프로젝트
lshjju.tistory.com
3장: 스타일드 컴포넌트 편
리액트에서 CSS의 속성을 그대로 사용할 수 있게 도와주는 스타일드 컴포넌트의 사용법을 익힌다.
https://lshjju.tistory.com/273
egoing - React - styled component - stackblitz
Styled component 스타일드 컴포넌트는 컴포넌트에 스타일을 적용하는 기술입니다.컴포넌트에 디자인코드까지 넣으려면 코드가 많아지는 경우가 있습니다.또한 제이에스 문법에 맞게 까멜사인으로
lshjju.tistory.com
4장: Context API 편
리액트에서 상태를 전역적으로 공유할 수 있게 도와주는 도구인 Context API의 사용법을 익힌다.
https://lshjju.tistory.com/274
egoing - Context API - stackblitz
Context API리액트에서 상태를 통합 관리할 수 있도록 도와주는 툴입니다.뉴 프로젝트 빌딩https://lshjju.tistory.com/104 StackBlitz web editor - 스택블리츠 웹 에디터스택블리츠로 새 프로젝트 생성하기 https:
lshjju.tistory.com
5장: useReducer 편
useState와 같은 역할을 하지만, 조금 더 복잡한 상태를 체계적으로 관리하도록 돕는 useReducer의 사용법을 익힌다.
https://lshjju.tistory.com/275
egoing - useReducer - stackblitz
useReducer유즈스테이트고객이 장부를 직접 기록합니다. - 펑션이 스테이트를 기록합니다.유즈리듀서고객이 주문을 창구직원에게 보냅니다. - 액션을 작성합니다.창구직원이 회계전문가에게 주문
lshjju.tistory.com
6. react-redux 편
상태 관리 도구인 리덕스(redux)를 리액트에서 쉽게 사용할 수 있게 돕는 도구인 react-redux의 사용법을 익힌다.
https://lshjju.tistory.com/276
egoing - React redux - stackblitz ver
React redux뉴 프로젝트 빌딩https://lshjju.tistory.com/104 StackBlitz web editor - 스택블리츠 웹 에디터스택블리츠로 새 프로젝트 생성하기 https://stackblitz.com/ 로그인 방법 선택 대쉬보드에서 new project + 버튼 -
lshjju.tistory.com
7. 리덕스 툴킷 편
리덕스 툴킷(Redux toolkit)을 활용하여 리덕스 개발 환경을 쉽게 구축하는 방법을 익힌다.
https://lshjju.tistory.com/277
egoing - redux tool kit - stackblitz ver
React.js - redux tool kithttps://lshjju.tistory.com/152 React.js - redux toolkit- 리덕스툴킷Redux Toolkit(리덕스 툴킷)이란 무엇인가요?Redux Toolkit은 Redux(리덕스)를 더 쉽고 효율적으로 사용하기 위해 만들어진 **공식
lshjju.tistory.com
8. Next.js 편
리액트, 익스프레스(Express.js), 리액트 라우터 돔(React-Router-Dom), 서버 사이드 렌더링 등 웹을 구현하는 데 사용하는 여러 기술을 영리하게 섞어 놓은 기술인 Next.js에 대해 알아본다.
https://lshjju.tistory.com/357
Ng index
Final buildhttps://stackblitz.com/edit/stackblitz-starters-m6ogzzsp?file=app%2Fpage.tsx nextagram - StackBlitzThe React framework for productionstackblitz.comhttps://lshjju.tistory.com/359 Next.js basicNext.jshttps://lshjju.tistory.com/341 Next.js ?Next.js
lshjju.tistory.com
교재 마지막 파트인 Next.js 파트는 간단한 소개 정도의 분량입니다.
그러므로 이 파트는 스케줄에 따라 진행하지 못하고 종강 할 수도 있습니다.
그 상황에 대비해 위 포스팅에 프로젝트 개발 과정을 정리해 두었습니다.
필요하다면 종강 후에도 독학 가능할 것입니다.
이 프레임 워크는 공식 교재 버전 이후 새로운 버전이 발표 되었습니다.
그리고 프레임워크 기본 세팅이 아주 많이 변경 되었습니다.
그래서 이 파트는 공식 교재가 아닌 강사가 개발한 프로젝트로 진행 합니다.
'Index' 카테고리의 다른 글
| Product detail page design Index (0) | 2025.11.21 |
|---|---|
| Next.js project index (0) | 2025.09.27 |
| ca-index (0) | 2025.09.18 |
| Do it! 자바스크립트 웹 표준의 정석 (0) | 2025.08.11 |
| UI Design project index (0) | 2025.06.17 |