리액트 잘하는 개발자 되기

성낙현

저자:성낙현
월드컵으로뜨거웠던2002년에웹개발을시작한후다양한웹사이트와모바일앱을개발했습니다.최근10년은여러교육기관에서자바웹,풀스택,빅데이터,클라우드,AI등을강의하고있습니다.저서로는출간후약7천여권이판매된스테디셀러《MustHave성낙현의JSP자바웹프로그래밍》(1판)(2판)이있습니다.

-내코드를부탁해(디스코드)discord.com/invite/BYRpaDrfbH
-내코드를부탁해(카톡방)open.kakao.com/o/ggK7EAJh
-리액트(카톡방)open.kakao.com/o/gZtC4ASh

00장프론트엔드개발자가알아두면좋은지식
_0.1웹의동작원리
__0.1.1클라이언트와서버
__0.1.2요청과응답의흐름
__0.1.3상태코드로결과확인
_0.2HTML,CSS,자바스크립트의기본역할
__0.2.1HTML:콘텐츠의구조담당
__0.2.2CSS:콘텐츠의스타일담당
__0.2.3자바스크립트:웹페이지의동작담당
_0.3웹표준과접근성
__0.3.1웹표준이란?
__0.3.2웹접근성이란?
_0.4브라우저렌더링과성능최적화
__0.4.1브라우저렌더링과정이해하기
__0.4.2리플로와리페인트의차이
__0.4.3성능에영향을주는요소들
_0.5개발환경과워크플로
__0.5.1필수개발도구
__0.5.2최고의품질을위한자동화시스템
__0.5.3빌드도구와트랜스파일링,번들링
_0.6현대프론트엔드트렌드와감각
__0.6.1반응형디자인
__0.6.2UI/UX설계원칙
__0.6.3최신프론트엔드키워드
_학습마무리
_연습문제


[LEVEL1]처음만나는리액트


01장리액트개발환경준비하기
_1.1윈도우에리액트설정하기
__1.1.1Node.js설치하기
__1.1.2VSCode설치하기
_1.2맥OS에리액트설정하기
__1.2.1Node.js설치하기
__1.2.2VSCode설치하고프로젝트폴더설정하기
_1.3VSCode환경설정하기
__1.3.1VSCode에서작업공간설정하기
__1.3.2확장프로그램설치하기
__1.3.3기본터미널변경하기:윈도우
__1.3.4코드입력시탭크기4에서2로변경하기
__1.3.5자동저장켜기


02장리액트프로젝트생성하기
_2.1비트로프로젝트생성하기
_2.2프로젝트정리하기
_2.3리액트개발을위한크롬확장프로그램설치
_학습마무리
_연습문제


[LEVEL2]리액트의기초배우기


03장리액트컴포넌트
_3.1리액트컴포넌트알아보기
_3.2컴포넌트구조살펴보기
_3.3JSX란무엇인가요?
_3.4컴포넌트는어떻게표시해야할까?
_3.5프로젝트생성및HTML로기초화면구성하기
_3.6리액트컴포넌트로교체하기
_3.7컴포넌트작성해보기
_학습마무리
_연습문제


04장프롭스
_4.1프롭스알아보기
_4.2프롭스사용해보기
__4.2.1반복되는요소에중복되지않는keyprop추가하기
_4.3프롭스여러개사용해보기
__4.3.1구조분해할당으로프롭스여러개사용해보기
_학습마무리
_연습문제


05장리액트이벤트처리
_5.1리액트이벤트처리알아보기
_5.2이벤트핸들러onClick에함수전달하기
_5.3FrontComp,BackComp에서무엇이달랐을까?
__5.3.1태그의이벤트처리시기본동작을차단하는preventDefault()함수
_학습마무리
_연습문제


06장컴포넌트모듈화
_6.1컴포넌트모듈화의필요성
_6.2exportdefault로컴포넌트내보내기
_6.3import로컴포넌트가져오기
_학습마무리
_연습문제


07장상태
_7.1상태알아보기
_7.2상태사용해보기
_학습마무리
_연습문제


08장스타일과이미지
_8.1리액트에서스타일을적용하는방법
_8.2이미지를삽입하는방법
_8.3CSS파일작성하기
_8.4CSS와이미지적용하기
_학습마무리
_연습문제


09장폼값전송
_9.1폼값전송하기
_학습마무리
_연습문제


10장얕은비교
_10.1얕은비교와깊은비교알아보기
_10.2얕은비교실습하기
_학습마무리
_연습문제


11장라우터
_11.1라우터알아보기
_11.2프로젝트생성및ReactRouterDOM설치하기
_11.3라우팅처리해보기
_11.4Outlet컴포넌트알아보기
_11.5Outlet컴포넌트로공통레이아웃으로사용할컴포넌트만들기
_11.6라우터훅알아보기
_11.7라우터훅사용해보기
_학습마무리
_연습문제


12장생명주기
_12.1생명주기알아보기
_12.2클래스형컴포넌트에서의생명주기
_12.3함수형컴포넌트와useEffect훅
_12.4로컬JSON파일과통신하기
_12.5외부API통신하기
__12.5.1randomuser.me살펴보기
_학습마무리
_연습문제


[LEVEL3]리액트훅


13장성능최적화를위한훅
_13.1프로젝트생성하기
_13.2useRef훅알아보기
_13.3useMemo훅알아보기
_13.4useCallback훅알아보기
_13.5useId훅알아보기
_학습마무리
_연습문제


14장전역상태관리를위한훅
_14.1프로젝트생성하기
_14.2useReducer훅알아보기
_14.3useContext훅알아보기
_학습마무리
_연습문제


15장고급기능을위한확장훅
_15.1프로젝트생성하기
_15.2useOptimistic훅알아보기
_15.3useActionState훅알아보기
_15.4useFormStatus훅알아보기
_학습마무리
_연습문제


[LEVEL4]리액트에코시스템


16장리덕스툴킷
_16.1리덕스툴킷알아보기
_16.2리덕스툴킷의아키텍처
_16.3프로젝트생성하기
_16.4리덕스툴킷의기본사용법익히기
_16.5간단한할일관리앱만들기
_학습마무리
_연습문제


17장주스탠드
_17.1주스탠드알아보기
_17.2주스탠드기본사용법익히기
_17.3간단한출결관리앱만들기
__17.3.1logger미들웨어
_학습마무리
_연습문제


18장파이어베이스
_18.1파이어베이스알아보기
_18.2파이어베이스시작하기
_18.3파이어스토어데이터베이스사용해보기
__18.3.1파이어스토어데이터베이스만들기
__18.3.2프로젝트생성및기본설정
__18.3.3연결및입력테스트
__18.3.4회원정보관리게시판
_18.4리얼타임데이터베이스사용해보기
__18.4.1리얼타임데이터베이스만들기
__18.4.2프로젝트생성및기본설정하기
__18.4.3CRUD기능제작하기
__18.4.4리스너제작하기
__18.4.5실시간채팅만들기
_18.5스토리지사용해보기
__18.5.1스토리지만들기
__18.5.2프로젝트생성및기본설정하기
__18.5.3파일업로드기능구현하기
__18.5.4파일목록및삭제기능구현하기
_학습마무리
_연습문제


[LEVEL5]리액트프로젝트


19장게시판제작1(객체형배열사용)
_19.1프로젝트생성후게시판기본화면만들기
__19.1.1게시판기본화면HTML로만들기
__19.1.2게시판기본화면컴포넌트로제작하기
__19.1.3제작한컴포넌트App컴포넌트에반영하기
_19.2게시글목록표현하기
__19.2.1App컴포넌트수정하기
__19.2.2ArticleList컴포넌트수정하기
_19.3화면전환하기
__19.3.1App컴포넌트구조살펴보고수정하기
__19.3.2NavList,NavView컴포넌트수정하기
_19.4작성기능추가하기
_19.5열람기능추가하기
_19.6삭제기능추가하기
_19.7수정기능추가하기
__19.7.1수정1단계:수정폼에내용불러오기
__19.7.2수정2단계:수정처리하기
_학습마무리
_연습문제


20장게시판제작2(RESTAPI사용)
_20.1프로젝트생성하기
__20.1.1애플리케이션의골격만들기
_20.2APIKey발급하기
_20.3목록기능구현하기
_20.4작성기능구현하기
_20.5열람기능구현하기
_20.6수정기능구현하기
_20.7삭제기능구현하기
_학습마무리
_연습문제


21장모달창이용한댓글구현하기with로컬스토리지
_21.1프로젝트생성하기
_21.2기본UI작성및기능구현하기
_학습마무리
_연습문제


22장스코어보드만들기with주스탠드
_22.1프로젝트생성하기
_22.2기본UI생성및기능구현하기
_학습마무리
_연습문제


23장카카오톡만들기with파이어베이스
_23.1프로젝트생성
_23.2기본UI작성및기능구현하기
_학습마무리
_연습문제


24장깃허브페이지로배포하기
_24.1리액트애플리케이션배포본만들기
_24.2웹서버로배포시라우팅오류해결하기
_24.3깃허브페이지로배포하기
_학습마무리
_연습문제

※PDF별책보너스부록《리액트를위한자바스크립트핵심문법익히기》제공

★풍부한그림과도표+연습문제125문항+핵심정리117가지!
★체계적인레벨별학습코스,실무에바로적용가능한프로젝트진행까지!
★프론트엔드만들고？DB붙이고？깃허브로배포하는전과정수록!

바이브코딩시대,리액트는프론트엔드라는마지막오아시스입니다.직접모든걸하지는않지만,AI가생성한코드를분석하고코드를수정할줄알아야합니다.구조를파악하는능력도필요합니다.그래서리액트를제대로배워야합니다.모던프론트엔드는리액트가필수입니다.그렇다면리액트어떻게제대로배울수있을까요?‘이론+예제+실제프로젝트’라는삼박자가맞아야합니다.이책은다음과같이세가지핵심적인특징으로여러분이리액트프론트엔드개발자로성장하도록돕습니다.

_첫째,웹개발의기초부터최신트렌드까지한번에잡는탄탄한이론
이책은리액트문법만다루는것을넘어,웹의기본동작원리(클라이언트/서버,HTTP)부터최신프론트엔드트렌드(SPA,CSR/SSR/SSG등)까지폭넓게설명합니다.이러한배경지식은실무에서문제의원인을더빨리찾고해결하는능력을길러주며,복잡한개념을쉬운비유로설명하여실무감각을키우는데도움을줍니다.결과적으로,웹개발의전체적인흐름속에서리액트를이해하며원리중심의튼튼한기반을다질수있습니다.

_둘째,컴포넌트의개념과재사용성을체감하며배우는실습중심학습
단순히코드를따라치는것을넘어,먼저HTML로화면을구성한뒤이를리액트컴포넌트로전환하는과정을통해컴포넌트의장점과재사용성을직접체감하도록안내합니다.각장마다배운핵심개념을게시판,스코어보드,채팅앱등실용적인미니프로젝트에바로적용하며지식을응용하는능력을기를수있습니다.이처럼실습중심의체계적인학습로드맵은리액트의핵심인컴포넌트기반사고방식을자연스럽게익히도록돕습니다.

_셋째,리덕스,주스탠드,파이어베이스등실무에코시스템까지확장
리액트자체에만머무르지않고,실무에서필수적으로사용되는전역상태관리라이브러리인리덕스툴킷(ReduxToolkit)과주스탠드(Zustand)를심도있게다룹니다.또한,별도의백엔드서버없이도사용할수있는데이터베이스(Firestore,RealtimeDatabase)와스토리지기능을구현할수있는파이어베이스(Firebase)연동방법을학습합니다.이를통해단순한UI개발을넘어,실제서비스에가까운완성도높은애플리케이션을직접구축하며리액트생태계전반에대한이해를넓힐수있습니다.

★리액트입문자를위한웹배경지식
★리액트를잘쓰려면꼭알아야하는40가지실습
★리액트개발을핵심기술4대장으로확실하게알려드려요
이책은이러한성장을위해웹의기초부터리액트핵심까지체계적인이론을제시하고,게시판,스코어보드,카카오톡유사실시간채팅앱등다채로운실전프로젝트를포함한총40개이상의풍부한실습예제를통해깊이있는학습경험을제공합니다.또한다음과같은4가지주요기술을통해이론과실습을겸비하며실력있는리액트개발자로성장할수있도록돕습니다.

_[1대장]리액트컴포넌트및훅
웹UI를효율적으로구축하는라이브러리인리액트와재사용가능한컴포넌트를배웁니다.useState,useEffect등다양한훅을활용하여상태관리,생명주기제어,성능최적화등현대리액트개발의핵심역량을키울수있습니다.

_[2대장]라우팅(Routing)
react-router-dom라이브러리를활용하여SPASinglePageApplication에서여러페이지를가진것처럼경로를관리하고화면을전환하는방법을배웁니다.이를통해URL관리,브라우저이력기능등실제웹애플리케이션에필수적인사용자경험을제공할수있습니다.

_[3대장]전역상태관리라이브러리
복잡한애플리케이션에서여러컴포넌트가공유하는데이터를효율적으로관리하기위한필수기술입니다.리덕스툴킷(ReduxToolkit)과주스탠드(Zustand)를통해상태를중앙에서체계적으로다루는방법을익힐수있습니다.

_[4대장]파이어베이스
파이어베이스는구글에서제공하는서버리스백엔드서비스플랫폼으로,직접서버를구축할필요없이데이터베이스,실시간통신,파일스토리지등강력한백엔드기능을리액트앱에연동할수있습니다.

★디스코드&카톡방으로QnA제공합니다
★실습에필요한코드를제공합니다
★보너스PDF〈리액트를위한자바스크립트핵심문법익히기〉도드립니다
★실습및코드에궁금한점이있다면,깃허브이슈란에코멘트를남겨보세요
리액트를확실히익힐수있게챙겨드립니다.학습을하다보면혼자고민하기보다는누군가와함께이야기나누고싶을때가있습니다.진도를나가며막히는부분이나더깊이있는내용을함께연구하고싶다면,디스코드&오픈카톡방&깃허브이슈란에서자유롭게의견을나눠보세요.

여러언어를현업에오가며사용하면,가끔문법이헷갈릴때가있습니다.그래서〈리액트를위한자바스크립트핵심문법익히기〉를무료PDF로제공합니다.리액트에필요한거의모든것을진심으로제공합니다.여러분의레벨업을응원합니다!

★이책을읽고나면얻어지는놀라운효과를체험하세요!
이책을성실하게학습하면다음과같이7가지핵심역량을얻게됩니다.

_1.웹의기본원리및최신프론트엔드환경구축능력:웹의기본원리를이해하고,Node.js,VSCode,ESLint등최신프론트엔드개발환경을완벽하게구축할수있습니다.

_2.리액트핵심문법을이용한동적UI구현능력:컴포넌트,JSX문법,프롭스,useState훅을활용하여동적으로변화하는리액트UI를구성할수있습니다.

_3.컴포넌트간상호작용및데이터처리능력:컴포넌트를모듈화하고,이벤트핸들러및폼값전송기능을구현하며부모-자식간유연한상호작용을처리할수있습니다.

_4.브라우저렌더링이해및성능최적화능력:브라우저렌더링과정을이해하고,useMemo와useCallback을사용해불필요한연산과함수재생성을방지하며성능을최적화할수있습니다.

_5.라우팅및고급상태관리구조설계능력:react-router-dom으로URL라우팅을구현하고,useReducer와useContext를활용해복잡한상태로직및전역상태공유구조를설계할수있습니다.

_6.전문적인전역상태관리및고급UX기능구현능력:리덕스툴킷또는주스탠드로전문적인전역상태를관리하며,useOptimistic등확장훅으로사용자경험을높이는고급기능을구현할수있습니다.

_7.실제프로젝트제작및배포능력(풀스택경험):객체형배열게시판,RESTAPI연동게시판,Firebase를활용한실시간앱을제작하고최종적으로GitHubPages에배포할수있습니다.


작가의말

환영합니다.리액트를잘하고싶은데어떻게할지모르겠는분이라면,잘찾아오셨습니다.이책은리액트학습전에필요한웹의기본원리부터최신리액트훅까지체계적으로안내하여탄탄한기초지식을제공합니다.총40개이상의다채로운실전프로젝트와풍부한실습예제를통해이론을실무에바로적용하며문제해결능력을키울수있습니다.또한리덕스툴킷,주스탠드,파이어베이스등현대웹개발에필수적인기술들을함께익혀완성도높은리액트애플리케이션개발자로성장하도록돕습니다.

이책은리액트코드를작성하기전에,프론트엔드개발자로서반드시알아야할웹의기본원리와핵심개념부터충실하게설명합니다.클라이언트와서버의동작방식,HTML/CSS/JS의역할,브라우저렌더링과정,SPA,CSR,SSR,SSG와같은핵심개념등을먼저학습하여,원리중심의튼튼한기반을다질수있게합니다.이러한배경지식은실무에서문제의원인을더빨리찾고,더효율적이고안정적인웹사이트를만드는데밑거름이됩니다.

리액트는문법도중요하지만개념이중요합니다.핵심개념은‘상태’,‘상태관리’입니다.그래서전역상태관리에활용하는리덕스툴킷과주스탠드를모두다루고,별도의백엔드없이도데이터베이스와스토리지를구현할수있는파이어베이스연동까지학습합니다.이를통해단순UI개발을넘어,실제서비스에가까운완성도높은애플리케이션을직접구축하며리액트생태계전반에대한이해를넓힐수있습니다.

최종적으로는직접만든앱을깃허브페이지에배포하는과정까지다루어,개발부터실제서비스공개까지의전체흐름을경험하게설계했습니다.

독자여러분의어려움을풀어주고자온라인에서질문과답변을할수있는채널을마련해두었습니다.〈리액트를위한자바스크립트핵심문법익히기〉도무료PDF로제공합니다.이책이실력있는프론트엔드개발자로성장하는발판이되길희망합니다.