메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

오래된 내 정보 속 옥의 티를 찾아라(2022.9.22~12.31) / 회원정보 UPDATE하고 선물도 받고!

소문난 명강의 : 소플의 처음 만난 리액트

리액트 기초 개념 정리부터 실습까지

한빛미디어

집필서

판매중

  • 저자 : 이인제
  • 출간 : 2022-05-31
  • 페이지 : 504 쪽
  • ISBN : 9791162245682
  • 물류코드 :10568
초급 초중급 중급 중고급 고급
4.8점 (41명)
좋아요 : 19

리액트 기초 개념을 배우고 간단한 실습을 따라 하며 사용법을 익히는 가장 쉬운 입문서

 

이 책은 오픈소스 자바스크립트 라이브러리인 리액트를 처음 배우는 개발자를 위한 책이다. 먼저 웹 서비스를 위해 알아야 할 리액트의 필수 개념을 짚어 본다. 그리고 간단한 실습을 통해 리액트 사용법을 익힌 뒤 마지막으로 미니 프로젝트(미니 블로그 만들기)를 통해 직접 프로젝트 기획부터 개발까지 경험해 본다. 리액트의 핵심 개념을 기초부터 탄탄히 익히고 실제 업무에 도움을 줄 수 있는 프로젝트 진행을 통해 체계적인 학습을 할 수 있도록 구성했다. 

 

 

상세이미지_소플의 처음 만난 리액트.jpg

이인제 저자

이인제

어려서부터 컴퓨터와 프로그래밍에 관심이 많아 커서 멋진 개발자가 되는 것이 변함없는 꿈이었습니다. 숭실대학교 컴퓨터학부를 3년 만에 조기 졸업하고 카이스트에서 전산학 석사 학위를 취득했습니다. 대학원 졸업 이후 다양한 회사와 스타트업에서 경험을 쌓았고 프리랜서 개발자로도 활동했습니다. 분야를 가리지 않고 항상 즐기면서 개발하고자 노력하며 소프트웨어 교육에도 관심을 갖고 꾸준히 참여하고 있습니다. 무료 온라인 강의를 운영 중이며 이노베이션 아카데미의 비상근 멘토로 활동 중입니다. 현재는 스타트업을 창업하여 열심히 제품 개발과 회사 운영에 힘쓰고 있습니다.

0장 준비하기

0.1 HTML 살펴보기

0.2 CSS란 무엇인가?

0.3 자바스크립트

0.4 개발 환경 설정하기

0.5 마치며

 

1장 리액트 소개

1.1 리액트는 무엇인가?

1.2 리액트의 장점

1.3 리액트의 단점

1.4 마치며

 

2장 리액트 시작하기

2.1 HTML만으로 간단한 웹사이트 만들기

2.2 CSS를 사용하여 웹사이트 스타일링하기

2.3 웹사이트에 React.js 추가하기

2.4 create-react-app

2.5 마치며


3장 JSX 소개

3.1 JSX란?

3.2 JSX의 역할

3.3 JSX의 장점

3.4 JSX 사용법

3.5 JSX 코드 작성해 보기

3.6 마치며

 

4장 엘리먼트 렌더링

4.1 엘리먼트에 대해 알아보기

4.2 엘리먼트 렌더링하기

4.3 렌더링된 엘리먼트 업데이트하기

4.4 시계 만들기

4.5 마치며


5장 컴포넌트와 Props

5.1 컴포넌트에 대해 알아보기

5.2 Props에 대해 알아보기

5.3 컴포넌트 만들기

5.4 컴포넌트 합성

5.5 컴포넌트 추출

5.6 댓글 컴포넌트 만들기

5.7 마치며


6장 State와 생명주기

6.1 State

6.2 생명주기에 대해 알아보기

6.3 State와 생명주기 함수 사용하기

6.4 마치며

 

7장 훅

7.1 훅이란 무엇인가?

7.2 useState

7.3 useEffect

7.4 useMemo

7.5 useCallback

7.6 useRef

7.7 훅의 규칙

7.8 나만의 훅 만들기

7.9 훅을 사용한 컴포넌트 개발

7.10 마치며 

 

8장 이벤트 핸들링

8.1 이벤트 처리하기

8.2 Arguments 전달하기

8.3 클릭 이벤트 처리하기

8.4 마치며


9장 조건부 렌더링

9.1 조건부 렌더링이란?

9.2 엘리먼트 변수

9.3 인라인 조건

9.4 컴포넌트 렌더링 막기

9.5 로그인 여부를 나타내는 툴바 만들기

9.6 마치며

 

10장 리스트와 키

10.1 리스트와 키란 무엇인가?

10.2 여러 개의 컴포넌트 렌더링하기

10.3 기본적인 리스트 컴포넌트

10.4 리스트의 키에 대해 알아보기

10.5 출석부 출력하기

10.6 마치며

 

11장 폼

11.1 폼이란 무엇인가?

11.2 제어 컴포넌트

11.3 textarea 태그

11.4 select 태그

11.5 File input 태그

11.6 여러 개의 입력 다루기

11.7 Input Null Value

11.8 사용자 정보 입력받기

11.9 마치며

 

12장 State 끌어올리기

12.1 Shared State

12.2 하위 컴포넌트에서 State 공유하기

12.3 섭씨온도와 화씨온도 표시하기

12.4 마치며


13장 합성 vs. 상속

13.1 합성에 대해 알아보기

13.2 상속에 대해 알아보기

13.3 Card 컴포넌트 만들기

13.4 마치며

 

14장 컨텍스트

14.1 컨텍스트란 무엇인가?

14.2 언제 컨텍스트를 사용해야 할까?

14.3 컨텍스트를 사용하기 전에 고려할 점

14.4 컨텍스트 API

14.5 여러 개의 컨텍스트 사용하기

14.6 useContext

14.7 컨텍스트를 사용하여 테마 변경 기능 만들기

14.8 마치며

 

15장 스타일링

15.1 CSS

15.2 styled-components

15.3 styled-components를 사용하여 스타일링해 보기

15.4 마치며

 

16장 미니 프로젝트_미니 블로그 만들기

16.1 미니 블로그 기획하기

16.2 프로젝트 생성하기

16.3 필요한 패키지 설치하기

16.4 주요 컴포넌트 구성하기

16.5 폴더 구성하기

16.6 UI 컴포넌트 구현하기

16.7 List 컴포넌트 구현하기

기초적인 내용 위주로 빠르고 쉽게 만나는 리액트!

 

리액트는 오픈소스 자바스크립트 UI 라이브러리입니다. 최근 웹사이트(또는 웹 애플리케이션)의 규모가 커짐에 따라 수많은 페이지를 만들어 관리하는 것은 매우 어렵습니다. 따라서 복잡한 웹사이트를 쉽고 빠르게 구현 및 관리할 수 있도록 도와주는 것이 리액트입니다. 이 책은 리액트의 주요 개념을 익히고 간단한 실습을 통해 실제 웹사이트에 리액트를 적용해 보며 학습할 수 있도록 구성되어 있습니다. 

 

 

★ 이 책에서 배우는 내용

 

☑ 필요한 기초 지식 및 개발 환경 

☑ 리액트 소개 및 준비 

☑ JSX

☑ 엘리먼트 렌더링

☑ 컴포넌트와 Props

☑ state와 생명주기

☑ 훅  

☑ 이벤트 핸들링

☑ 조건부 렌더링

☑ 리스트와 키

☑ 폼

☑ State 끌어올리기 

☑ 합성과 상속

☑ 컨텍스트

☑ 스타일링

☑ 미니 블로그 만들기

 

 

★ 이 책의 구성

 

0장은 리액트를 배우기 전에 알아야 할 기초 지식과 실습을 진행할 개발 환경 설정에 대해 설명합니다. 1~2장은 리액트의 기본 개념과 장단점에 대해 배우고 간단한 실습을 통해 리액트를 적용해 봅니다.

 

3장부터 14장까지는 리액트의 각 요소별 기능에 대해 설명합니다. 각 챕터의 전반부는 해당 챕터에서 배우고자 하는 리액트의 각 요소별 기본 개념을 설명합니다. 해당 챕터의 후반부에는 앞에서 배운 기본 내용을 바탕으로 실습을 통해 실제 리액트 사용법을 익히는 학습 형태로 구성되어 있습니다.

 

15장에서는 스타일링을 하기 위해 CSS의 기본적인 문법과 선택자에 대해 배우고 styled-components를 다루는 법을 간단하게 배웁니다. 

 

16장에서는 앞에서 배운 내용을 토대로 미니 블로그를 직접 만들어 봅니다. 프로젝트 생성부터 각종 컴포넌트를 모두 직접 코드를 작성하며 개발해 봅니다.

 

 

★ 대상 독자

 

이 책은 리액트를 처음 접하는 입문자를 대상으로 합니다. HTML과 자바스크립트를 다뤄본 경험이 있다면 수월하게 이 책의 과정을 따라갈 수 있습니다. 이와 같은 웹 개발을 위한 기초 내용을 배운 적이 없거나 웹 개발 경험이 없더라도 이 책의 학습 과정을 따라갈 수 있도록 HTML과 자바스크립트, CSS의 기초적인 내용을 설명하고 있습니다. 

 

★ 예제 소스

https://github.com/soaple/first-met-react-practice

 

★ 유튜브 강의

https://youtube.com/c/소플TV

 

 

추천사

 

리액트가 웹 프런트엔드 분야에서 사실상 하나의 표준으로 자리 잡으면서 배우고자 하는 사람들도 크게 늘어나고 있습니다. 이 책은 처음 리액트를 배우고자 하는 독자에게 매우 적합하다고 생각합니다. 코딩에 뛰어난 사람이 아니더라도 처음부터 단계별로 따라 하다 보면 어느새 리액트를 자유자재로 활용할 수 있는 단계에 도달하게 될 것입니다. 리액트라는 세계에 입문하는 것에 약간 두려움을 느끼고 있다면 이 책을 통해 리액트 학습을 시작해 보기 바랍니다.

_이민규_(주)엠케이랩스 대표 / StarUML 개발자

 

리액트 개발을 시작하거나 다시 도전하는 독자에게 추천합니다. 개발 환경 설정부터 현업에서 쓸 수 있는 개발 팁 그리고 최신 트렌드까지 배울 수 있는 입문서입니다.

리액트의 중요한 개념을 모두 다루고 있고 챕터별로 요점 정리가 잘 되어 있어서 코딩 인터뷰를 보러 가기 전에 빠르게 복습하기에도 좋을 것 같습니다. 다년간 현업에서의 경험을 기반으로 한 저자의 현실적인 조언과 내공이 돋보입니다.

_김유민_Take App 창업자 / 전 페이스북 엔지니어링 매니저 

 

개발을 잘하는 것과 개발을 잘 알려주는 것을 모두 할 줄 아는 개발자가 쓴 책을 찾기란 생각보다 쉽지 않습니다. 상용 서비스 개발, 오픈소스 프로젝트 활동, 강의, 멘토링 등 다양한 방면에서 두 가지를 동시에 병행하고 있는 저자의 책이라면 리액트를 처음 접하고 시작하는 데 좋은 지침이 될 것이라 믿어 의심치 않습니다. 읽어보니 실제로 그랬습니다!

_장래영_(주)커먼컴퓨터 소프트웨어 엔지니어

 

리액트를 이용해 프런트엔드 개발자로서 첫발을 내딛고자 하는 독자에게 추천하고 싶은 훌륭한 안내서입니다. 빠르게 리액트 개발을 시작할 수 있도록 지루하거나 많이 쓰지 않는 내용은 과감히 제외하고 컴포넌트와 State, 훅, 이벤트 핸들링 등 자주 사용되고 필수적으로 알아야 할 내용만을 압축해서 설명합니다. 중간중간 독자가 궁금해할 만한 부분에 대해 추가적으로 설명하고 있어 누구나 충분히 따라올 수 있도록 배려한 저자의 친절함이 느껴집니다. 챕터마다 다양한 실습 예제와 깔끔하게 정리된 요약을 제공하여 개념을 올바르게 이해하고 있는지 확인할 수 있도록 해 줍니다. 리액트 개발의 문턱이 높게 느껴지는 분들, 도전을 망설이고 있는 분들에게 추천합니다.

_장영재_KAIST / 소프트웨어 엔지니어

 

리액트 개발에 입문하는 독자에게 잘 맞춘 책입니다. 전반부에는 프런트엔드 개발에 필요한 방대한 지식 중 리액트 개발에 필요한 핵심 개념을 전달하고 있습니다. HTML, CSS, 자바스크립트와 같은 필수 지식을 거쳐서 리액트가 무엇이고 어떻게 동작하는지, 왜 사용하는지를 쉽게 풀어썼습니다. 또한 리액트에 입문할 때 시행착오를 겪을 수 있는 조건부 렌더링이나 리스트 렌더링, 리액트 훅에 대한 부분도 다루고 있습니다. 각 챕터는 개념을 익히는 부분과 실습 부분으로 나누어져 있는데 앞에서 잘 이해되지 않는다면 실습을 해 보면서 감을 잡을 수 있게 구성되어 있습니다. 전반적으로 부담 없이 따라갈 수 있어 리액트 개발을 처음 시작하시는 분에게는 좋은 입문 서적이 될 수 있을 것입니다.

_강지현_(주)맘편한세상 공동 창업자 / 백엔드 엔지니어

 

비 개발자가 쉽게 이해할 수 있고 접근할 수 있도록 충분한 예제와 설명이 가득합니다.

특히 개발 환경 구축을 비 개발자는 익숙하지 않고 어려워하는데 이러한 부분도 세심하게 다루고 있습니다. HTML과 CSS에 대한 배경지식을 어느 정도 가지고 있는 분이라면 이 책을 통해 충분히 리액트에 대한 매력에 흠뻑 빠질 수도 있을 것입니다. 또한 지금과는 다른 제품을 구상할 수 있는 기회를 얻을 수 있다고 생각합니다. 개발자와 함께 협업을 진행하는 디자이너 또는 기획자들에게도 이 책을 추천합니다.

_이유번_(주)딥네츄럴 디자인 디렉터

 

이 책은 예시와 예제 위주로 이해하기 쉽게 기술하고 있습니다. 웹 개발자가 아닌 탓에 리액트를 제대로 사용해 본 적이 없어서 뒷부분으로 갈수록 조금 어렵게 느껴졌지만 리액트에 대한 방대한 내용을 어렵지 않게 설명해 주고 있습니다. 덧붙여 저는 이해하며 공부하는 것을 좋아해서 예제 위주의 책보다는 원리, 개념 위주의 책을 더 선호하는 편인데 다른 리액트 개념서의 경우 어려운 설명 때문에 리액트 공부는 반쯤 포기했었습니다. 그런데 이 책은 다양한 실습과 마지막 장에는 알찬 프로젝트까지 포함하고 있어 리액트에 대해 재미있게 공부할 수 있었습니다. 웹 개발에 대한 지식이 없어도 차근차근 단계를 밟아가며 쉽게 학습할 수 있었으므로 리액트 입문용으로 최고의 책이라 생각합니다.

_강경완_(주)우아한형제들 안드로이드 개발자

 

이제 리액트는 웹은 물론 데스크톱과 모바일 앱 제작에도 쓰이는 강력한 라이브러리로 자리 잡았습니다. 워낙 많은 기능을 담고 빠르게 발전해 온 만큼 처음 리액트를 접하면 인터넷상의 불친절하게 던져진 방대한 자료에 압도되기 쉽습니다. 긴 시간 리액트 프로젝트를 진행한 저자의 경험을 바탕으로 리액트를 소화하기 위해 반드시 알아야 하는 기본 개념부터 실습 프로젝트까지 차곡차곡 쉬운 언어로 전달하고 있습니다. 물 흐르듯 이어지는 설명을 따라가다 보면 어느새 리액트를 소화하고, 그 매력에 빠진 자신을 발견할 수 있을 것입니다.

_전웅_(주)아씨오 소프트웨어 엔지니어

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

장점

  • 훅이나 State관리, 이벤트 렌더링과 같이 초보자 입장에서는 우선적으로 기능적인 부분이 이해가 어려워 하지만 이 책에서는 원리 시각화, 상세 설명, 실습, 요약 의 패턴을 통해 전반적으로 간단한 이해 후 실습을 하여 원리가 쉽게 와닿으며 초반에 HTMLCSS, JS에 대해 기본적으로 설명해주어 따라가는데 지장이 없음

  • 최종적으로 미니 프로젝트를 해볼 수가 있어 배운 것을 응용하여 추후 관련 프로젝트를 할 때 적절하게 적용해볼 수 있음

후기

  • 요즘 취업 시장에서는 리액트를 보는 비중이 증가하여 관심이 있었는데 리뷰어를 통해 읽을 기회가 생겨 읽어 보게 되었다. 책을 읽으면서 리액트는 컴포넌트(화면 부분)을 나누어 사용하다보니 관리가 쉽고 코드가 간략해져서 매력적이라고 느꼈으며 특히 재사용하는 부분에 있어 유지 보수가 쉬워진다는 장점을 느꼈다. 특히 페이스북과 같은 SNS는 리액트로 개발했다고 하니 관련 개발을 배우고 싶은 사람은 이 책에서 리액트의 기능 부분들을 잘 설명해주어 원활하게 이해할 수 있을꺼같다.

  • 스크린샷, 2022-06-29 10-00-14.png

     

     

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.
아무래도 웹을 주로 하는 것은 아니다 보니 낯섦이라는 벽이 있긴 했지만
필수적인 개념에 대해 빠르게 큰 그림을 살펴봄으로써주요 개념들에 대해 빠르게 익숙해지고 막연함이 사라졌다.
 
그 과정에서 예제를 활용하여(미니블로그 만들기) 서술하고 있어 실무적인 이슈에 대해서도 미리 느낄수 있었다.
웹프론트엔드인지라 내가 작성한 코드가 바로바로 반영되며 문제가 있는 부분은 디버깅하는 과정이 학습곡선을 더욱 가파르게 하는 것 같았다.입문서이지만 HTML과 CSS에 대해서 어느정도 알고 읽어 보기를 바란다.

IMG_2260.JPEG

 

IMG_2259.JPEG

 

	

백엔드 개발자인 저로서 백엔드 관련 기술만 공부하다가 프론트 기술은 언젠간 습득해야겠다는 생각을 가지고 있었습니다.

그러던 찰나에 소플의 처음 만난 리액트를 접하게 되었습니다.

리액트는 다른 라이브러리보다는 러닝 커브가 높다는 얘기를 많이 들었기에 책을 접할 때 조금 걱정이 되었습니다.

이 책은 리액트 입문자의 눈높이에 맞게 설명이 되어 있고,

리액트를 시작하기 전에 chapter0 준비하기 부분에서 html css javascript 기초 지식을 설명하고 있어

이해를 쉽게 돕고 있기 때문에 크게 걱정하지 않아도 될 거 같습니다.

다양한 그림의 등장과 컬러풀한 이미지만 봐도 이해도가 높아지는 느낌이 들었습니다.

 

	

리액트를 왜 배워야 하는지는 책의 서두에도 나오지만 시장에서 리액트 개발자를 많이 원하고 있고

JD에도 프런트엔드 개발자 채용에 있어 많이 요구하는 기술 중에 하나이기 때문입니다.

그렇다면 리액트가 핫한 이유는 빠른 업데이트와 렌더링 속도 재사용성이 높은 컴포넌트 기반의 구조,

메타(구 페북)의 지원, 리액트 네이티브를 통한 모바일 앱 개발이 가능하다입니다.

(책 내용 중) 반면에 단점도 없지 않아 있지만 러닝 커브가 높고 상태 관리가 복잡하다는 것입니다.

 

책을 한번 정독하게 되면 방대한 공식문서를 읽는 것보다 리액트의 개념,

문법이 튼튼해지는 느낌이 들 것 같습니다.

책의 후반부에 기초 개념을 토대로 미니 프로젝트 실습도 할 수 있어 실제 만들어보며

개념을 리마인드 할 수 있는 부분도 준비되어 있습니다.

책 읽다 이해가 되지 않는 부분은 유튜브나 무료 강의(인프런)를 통해 복습할 수 있는 기회까지 있으니...

올해는 무조건 프런트엔드 기술 하나는 가져갈 수 있을 것 같습니다.

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

 

토요일 MS MVP 행사가 있었다. 일요일 오후 즈음에는 도서 리뷰를 하려고 했는데, 이젠 나도 많이 늙었나보다. 오늘이 다 가는 시점에 컴퓨터를 켠다.
책은 받고 진작에 읽었는데...
리액트는 예전 초창기때부터 대충 알고 있었지만, 내 프로젝트에서 사용할 일이 없어서, 그냥저냥 새소식이 들려올때만 간간히 관심을 가졌다.
그러다, 최근에 MS 서비스 통합할때 자바스크립트 언어로 만든 것들이 많아서, 리액트를 다시 공부해보고자 마음을 먹었다.

요즘 대부분의 IT 기술이 너무 빠르게 나오기 때문에, 속도가 매우 중요하다.
그 속도에는 배움의 학습 커브와 품질도 중요한 요소가 된다.
이 책은 리액트를 배우려는 초보 개발자에게 많은 도움이 될 것 같다.
그 이유는 나도 잘 모르기 때문에, 이 책을 통해 얼마나 빠르게 이해할 수는지도 하나의 기준이 될 수 있기 때문이다.
이 책을 읽으면서 별로 어렵지 않다고 생각되었다.
쉽게 설명되어진 글들과 간단한 이미지들이 리액트를 이해하는데 도움이 되었고, 예전 소스코드도 이해하는데 어려움이 없었다.
물론 오늘 처음으로 HTML 소스 코드를 보는 분들이 어렵게 생각할 수 있다. 다른 HTML, CSS, 자바스크립트 기본 문법을 알고 오는 것이 좋다.
문제는 중반이후 리액트의 주요 개념들로 들어가면서 부터, 개념들 부터 생소하여 나에게는 어려움으로 다가왔다.
그래도 이번 기회에 새로 나온 개념들까지 알게된 것 큰 수확이다.
다시 천천히 따라해보면서 공부하면 되니까...
약간의 단점이라면, 실습 내용의 소스 코드를 이미지로 올리셔서, 소스 코드 읽기가 좀 불편하였다.
텍스트로 제공하였으면 하는 생각이 들었다.

속도전이 가속화되는 시점에, 누가 더 쉬운 책으로 개념을 잘 잡느냐는 현재를 살아가는 우리에게는 중요한 문제이다.
그런 면에서, 처음 만난 리액트는 초보에게는 좋은 책일 것 같다.

소문난 명강의라는 부제가 붙은 것 보면, 학원 내지 동영상 사이트에서 유명하신 분인 것 같은데, 다음에는 무료 동영상으로 한번 접근해봐야겠다.
생활 코딩의 이고잉님의 리액트 강의도 유명한 것 같은데, 다음에 두 분 강의 다 듣고, 리뷰를 해보아야겠다.


"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

1748.jpg

 

리액트는 개인적으로 배우고 싶은 자바스크립트 라이브러리이다. 플랫폼 강의나 유튜브 아니면 인터넷 문서를 통해서도 익힐 수 있지만, 나에게 맞는 책을 찾아 읽어가면서 배우고 싶었다. 시중의 수많은 리액트 중에서 '소플의 처음 만난 리액트'가 바로 나에게 딱 맞는 리액트 입문서이자 학습서였다.

 

이번에 만난 '소플의 처음 만난 리액트'는 리액트 초급자를 대상으로 쓰여진 책이고, 기존에 프로그래밍이나 웹사이트 개발을 해본 사람이라면 쉽게 배울 수 있게 구성되어 있다. 또 웹 프로그래밍의 기초인 HTML, CSS, 자바스크립트 등의 경험이 전혀 없는 독자여도 부담없이 학습할 수 있는 내용으로 되어 있다.

 

 

저자 이인제(소플)님은 초등학교 시절부터 프로그래밍을 배우고 싶어 받은 세뱃돈으로 책을 구입한 후부터 소프트웨어 교육에 대한 꿈을 갖게 되었다고 한다. 그리고 언젠가는 IT 관련 기술서적을 자신의 이름으로 내고 싶다는 다짐을 한 후 이렇게 책을 출간하게 되었다고 한다.

 

 

1749.jpg

 

이 책은 초급자, 입문자를 대상으로 한 책이기 떄문에 책의 구성은 다음과 같다.

처음 0장부터 2장까지는 리액트를 배우기 위한 WARM UP 단계로 리액트를 배우기 위한 기초 지식, 개발환경 구축을 확인하고, 리액트가 무엇인지에 대해 알아보는 구성으로 되어 있다.

 

 

1750.jpg

 

3장부터는 본격적으로 리액트를 배우는 구성으로 되어있다. 리액트의 각 요소별 기능을 학습한 후 15장은 스타일링, 마지막 16장은 미니 프로젝트를 수행하는 것으로 구성되어 있다. 3장부터 시작되는 리액트 학습은 우선 프리뷰를 통해 각 장에서 배울 내용을 알아보고, 로드맵을 통해 각 장의 주제 및 주요개념을 큰 맥락에서 확인할 수 있게 큰 그림이 제공된다. 각 요소의 기능을 학습했다면 간단한 실습을 통해 기능을 다시 한번 익히고, 요약을 통해 학습한 내용을 복습하는 구성으로 되어있다.

 

1751.jpg

 

 

초보자들이 쉽게 접근할 수 있게 구성되어 있어, 학습하는 내내 어렵지 않게 책장이 넘어가고, 책의 분량 또한 알맞게 구성된 것 같다. 소플의 처음 만난 리액트를 통해 나도 이제 리액트를 할 수 있다는 자신감이 생겼다.

 

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

 

 

#소플의처음만난리액트 #소플 #리액트 #자바스크립트

 

 

웹 프론트엔드를 입문할 때 많이들 추천하는 라이브러리, 프레임워크가 리액트입니다.

취업 시장에서 리액트 프론트엔드 개발자를 많은 비중으로 뽑는다고 합니다.

리액트 기초 서적은 리액트 공식 문서, 여타 인터넷 문서에 비해 퀄리티가 부족하다.

리액트를 기초 지식으로 무난한 TODO 프로젝트를 만들고 끝내는 것 보다는

무단에서 빠르게 어떻게 쓰는지 감을 잡게 해주는 게 더욱 낫다고 생각했었다.

그러던 중 리액트 기초를 빠르게 설명하고 상황에 따라 어떻게 리액트를 사용해야하는지 코드와 함께 나와버렸다!


개념 설명을 비중에 많이 차지하지 않는다.

요약을 깔끔하게 잘해놓았고 중요한 부분은 볼드와 글자색 처리가 되어있어 읽기에 무척 편했다.

개인적으로 연한 녹색, 연한 주황색 등 연한 색만을 사용하여 눈에 피로가 적었다.

대신 코드 설명과 함께 기재된 경우가 많다.

글 대신 코드 읽는게 더 빠른 사람들에겐 더 없이 좋은 책이었다.


리액트 기초를 다지고 상태주기 / 훅 / 커스텀 훅 / 이벤트 핸들링 / 리스트 / 폼을 가르친다.

실무 레벨과 완전히 같지는 않지만 바로 실무단에서 쓰일만한 코드로 설명을 하고 있다.

리액트를 빠르게 코드로 소화시킬 수 있었다.

당장 필요한 챕터만을 봐도 큰 상관은 없었다.

예시 코드만 봐도 어떤 역할을 하는지 직관적으로 알 수 있도록 코드 가독성을 높였고

아래 코드 설명도 자세하게 서술되어 있다.


한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

리액트가 궁금했던 차에 만나게 된 소플의 처음 만난 리액트. ​ 리액트는? 자바스크립트 ui 라이브러리로 주로 웹사이트 제작에 최근 많이 쓰이는 언어다. ​ 저자 소개 이인제님. 컴퓨터학부를 전공하며 개발자로 활동중이시다. 책을 읽어보면 이해하기 쉽게 설명을 잘해놨다. ​ ​ 누구에게 맞는 책일까? 이 책은 리액트를 처음 접하는 입문자를 대상으로 쓰여졌다. 나도 리액트는 이름만 들어봤지 해본적이 없는데 입문용으로 좋을 것 같아서 선택했다 ㅎㅎ 실제 읽어보면 쉽게 이해가 가능하고 예제를 직접 해볼 수 있어서 처음 개발을 하더라도 부담없이 따라할 수 있다! ​ 책에서 다루는 내용은? 크게 3파트로 나뉘어진다. 처음은 리액트에 대한 소개와 리액트를 해보기 위해 필요한 사전 셋팅작업을 한다 ㅎㅎ 그리고 챕터3부터 본격적인 리액트에서 쓰이는 개념과 내용들을 차례차례 설명한다. 그리고 css를 접목해서 배울수 있는 파트와 실제 미니프로젝트를 해볼 수 있는 실습용 내용이 포함되어져 있다. ​ 책의 실습 부분 이렇게 각 챕터마다 소개되는 개념에 대해 실습해볼 수 있다. 실습 예제는 아래 깃헙에서 받을 수 있다. github.com/soaple/first-met-react-practice GitHub - soaple/first-met-react-practice: 소플의 처음 만난 리액트 실습 소스코드 소플의 처음 만난 리액트 실습 소스코드. Contribute to soaple/first-met-react-practice development by creating an account on GitHub. github.com 로컬pc에 소스를 받아서 하나하나 해보는 맛이 있다. ​ ​ 책의 좋았던 점은? 일단 설명이 쉽게 되어있다는 점! 처음 리액트를 접하는데도 많은 어려움 없이 할 수 있었다. 그리고 예제를 같이 코드로 치다보면 눈앞에서 웹사이트가 만들어지는 재미도 있다. 그리고 챕터별로 들어가기 전 마인드맵으로 정리도 잘되어져 있어 어떤 걸 배우는지 대략적으로 알 수 있고 챕터가 끝날때마다 정리요약도 잘되어져 있어 내용 정리하기에 좋다. ​ 책 내용에 재해 동영상 강의도 무료로 제공이 되기때문에 함께 활용해보면 좋을 것 같다. youtube.com/c/소플tv "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

한빛미디어 “나는 리뷰어다” 활동을 위해서 책을 제공받아 작성된 서평입니다.

TL;DR

  • React를 처음 접하는 분들에게 적극적으로 권함
    • 핵심 개념이 매우 잘 설명되어 있어서 초급자에게 적극 권장
    • 중급자의 경우 7장, 14장 등과 같이 꼭 필요한 개념 부분만 발췌해서 복습 중심으로 진행해도 좋음
    • 회사에서 디자이너, 기획자들과 함께 작은 스터디를 진행해도 좋을만큼 개념설명과 실습이 충실함
  • React 이외에 다른 내용을 다루고 있지 않음
    • Redux, React-Router, React Query 등을 다루고 있지 않기 때문에 학습 후 부가적인 학습이 필요
    • 이후에 Next.js, React Native 등을 공부하면 좋을 듯

1. 대세는 React인가?

요즘(2022년 6월) 대부분의 프로젝트에서 꼭 거론되는 것 중 하나가 React라 할 수 있다. SPA(single page application)를 기반으로 진행되는 Next.js, 모바일 크로스 플랫폼 중 하나인 React Native, 데스크탑 크로스 플랫폼 중 하나인 Electron 등 거의 대부분 영역에서 React를 확인할 수 있다.

책표지

개발자를 지망하는 분들을 비롯해서, 나와 같은 백엔드 API를 만드는 개발자까지 정도의 차이는 있지만 React에 대한 관심과 영향력은 여전하다. 불과 1~2년전만 해도 국내에선 VueAngular 등에 대한 논의도 활발하게 진행되었지만 요즘은 React를 기반으로 프로젝트를 세팅하는 곳이 늘었고,전자정부프레임워크에서도 React기반의 예제를 제공한다.

React가 이렇게 활발하게 사용되는 이유는 다양하겠지만, Meta와 같은 대규모 서비스를 제공하는 곳에서 지속적으로 관리하고 지원을 아끼지 않고 있다는 점과 RN 등과 같은 다양한 분야에 활용할 수 있다는 것이 크게 작용했을 것으로 본다. 반면에 학습(learning curve)이 어렵다는 점은 React의 가장 큰 단점이라 할 수 있다. React는 공식 문서를 통해서 핵심 개념과 개발에 필요한 필수적인 내용을 설명하고 있다. 초급자의 경우 ‘How’에 대한 이야기는 공식 문서나 검색을 통해서 해결할 수 있지만, ‘Why’에 대한 내용은 쉽게 찾을 수 없기 때문에 React의 에코시스템(redux, react-router)등을 사용하면서 React의 필수적인 개념 부족으로 인해서 부가적인 기술에 대한 난이도가 급상승하기 때문에 학습이 어려움을 겪고 있다고 생각한다.

2. React를 처음 접하는 사용자를 위한 교재

이 책의 경우 후반분의 미니 프로젝트를 제외하면 총 15개의 장으로 React와 관련된 내용을 설명하고 있다. 각 장은 크게 설명-실습-요약 3단계로 이뤄져 있으며 15개의 장이 모두 동일한 형태로 구성되어 있어서 4~5장 정도만 읽고 실습을 병행하다보면 쉽게 익숙해진다. 설명 내용은 길지 않지만 반드시 알아야 하는 핵심적인 내용은 모두 설명하고 있다. 5장 컴포넌트와 Props, 7장의 훅, 14장의 컨텍스트 등 React 사용자가 꼭 알아야 되는 핵심적인 내용 뿐마니 아니라 15장에선 styled-components 까지 React를 처음 배우는 학습자가 배워야한 거의 대부분의 내용이 포함되어 있다.

각 장에서 소규모의 작은 예제를 만들고, 16장에서 미니 프로젝트를 진행하기 때문에 충실하게 학습만 한다면 거의 React의 기본적인 내용은 모두 학습했다고 봐도 과언은 아니다. 기존에 React를 학습했던 분들 중에서 개념적인 부분을 보강해야 한다면 이 책으로 가볍게 훑어보면서 진행해도 좋다. 그리고 각 장은 하나의 주제를 다루기 때문에 필요하다면 필요한 부분만 발췌해서 봐도 좋다. 실습 자체가 별도의 장으로 구성되어 있기 때문에 필요부분만 발췌해도 핵심 개념은 빠르게 학습할 수 있다.

설명이 좋음

대부분의 프로젝트에서 활용되는 Next.js나 React Native를 사용하기 위해서 React를 빠르게 배워야 한다면 이 책은 좋은 선택이다.

3. 처음 만난 Next.js/React Native를 기대!

한 가지 매우 아쉬운 점은, 가끔 예제 코드가 스크린샷으로 대체되어 있다는 점이다. 특히 실습 중에 일부는 스크린샷에 들어있어서 생각보다 난이도가 높아진다. 다르게 표현하면 파일 구조 및 위치를 알 수 있어서 좋을 듯 하지만 이미지에 있는 글자가 잘 읽혀지지 않거나 코드로 이뤄진 이미지를 그냥 지나쳐버릴 수 있어서 이 점은 아쉬움을 남는다. 이 책의 코드를 제공하는 Github 저장소를 즐겨찾기에 저장해두고 학습을 진행하길 권한다.

이것은 아쉬움

이 책은 React만 다루고 있기 때문에 ReduxReact-Roduter나 React Query 등을 다루지 않는다. React의 기본적인 내용을 제외한 다룬 주제를 다루지 않은 것은 분량도 한 몫하겠지만 이 책의 목표가 초급자를 대상으로 하고 있기 때문관련 내용을 다루고 있지 않을 것으로 예상된다. 상대적으로 아쉽긴 하지만 그렇다고 무작정 분량을 추가할 수 없다는 점도 동의한다. 향후에 기회가 된다면 이런 형태의 Next.js나 React Native 책도 출간되기를 기대한다.

Written on June 20, 2022

# 소플의 처음 만난 리액트

 

- 자바스크립트는 웹 애플리케이션 개발에 많이 활용하는 프로그래밍 언어입니다.

- 자바스크립트는 다양한 라이브러리를 사용합니다. 이 책은 웹 서비스를 개발하는 리액트(React) 라이브러리를 대상으로 하고 있습니다. 리액트는 사용자와 상호작용이 많은 UI(User Interface)를 만들 때 주로 활용하는 라이브러리입니다.

 

## 처음 키보드를 잡아보는 사람에게 적합한 책

 

- 소플의 처음 만난 리액트의 가장 큰 특징은 리액트를 처음 접하는 입문자를 대상으로 한다는 점입니다. 이는 프로그래밍 관련 경험이나 지식이 없더라도, 책에서 소개하는 내용을 따라가다 보면 자연스럽게 하나의 웹 서비스(미니 블로그)를 만들 수 있습니다.

- 또한 리액트 라이브러리에 대한 내용만을 다루는 것이 아니라 HTML과 자바스크립트, CSS와 같이 웹 애플리케이션을 구성하는 핵심 요소를 추가적으로 설명하고 있습니다. 책에서는 CSS를 활용한 스타일링 방법을 15장에서 소개하고 있습니다.

 

## 초보자에게 친절한 내용

 

- 가끔 책을 보며 따라 하는 방식으로 학습하는 경우, 프로그래밍 언어의 버전이나 라이브러리 버전에 따라 책에서 소개하는 내용이 맞는지 확신이 안 서는 경우가 있습니다.

- 이 책은 각 장마다 실습을 진행하며 학습한 내용을 확인하는 과정을 거칩니다. 그뿐만 아니라 실습 화면을 사진으로 보여주고 확인이 필요한 부분을 표시하고 있어, 처음 배우는 사람에게도 헷갈리지 않고 잘 따라갈 수 있도록 도와줍니다.

 

> 한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

 

KakaoTalk_20220626_215459048_27.jpg

 

 

웹개발을 처음 시작하는 분들을 위한 책입니다. 또한 그 시작으로 자바스크립트의 프레임워크인 리액트를 선택한 독자들을 위한 책입니다.

최대한 간단하게 리액트에만 초점을 맞춘 내용입니다.

리액트의 장점과 단점으로 책을 시작합니다.

각 장은 프리뷰, 내용 설명, 실습 그리고 요약 이렇게 구성되어 있습니다.

개념을 익히기 위한 목적에 충실합니다.

초급의 학습자들에게 맞추어 내용을 펼쳐내고 있습니다.

책의 목적에 맞게 처음 웹개발에 발을 들인 학습자들에게 좋은 리액트 기본서가 될것같습니다.

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

리액트는 웹에서 사용자 인터페이스를 만들 때 편리한 자바스크립트 라이브러리입니다. 마치 스마트폰 앱처럼 작동하는 SPA(싱글 페이지 애플리케이션)을 만들 때 주로 사용합니다. 복잡하고 반응속도가 빠른 웹을 개발할 때 도움이 되지만 초보자가 배우기에는 많이 복잡한 것이 사실입니다. ‘소문난 명강의 소플의 처음 만난 리액트’에서는 복잡한 리액트를 최대한 쉽게 설명하려고 노력합니다. 리액트(React)에만 집중하기 위해 상태관리 라이브러리인 리덕스나 복잡한 프로젝트는 다루지 않습니다. 저는 리액트를 대충 알고 그냥 쓰는 수준인데 이 책을 통해 좀 더 기초를 다질 수 있었습니다.

 

0, 1장에서는 웹개발에 필요한 기초를 설명하고 2장부터 본격적으로 리액트에 입문합니다. 2장 리액트 프로젝트를 생성하는 것에서 시작으로 3장 JSX 부터는 본격적으로 리액트 개발에 필요한 내용을 배웁니다. JSX, 엘리먼트 렌더링, 컴포넌트, Props, State, 생명주기, 이벤트 핸들링, 폼, 합성, 상속, 컨텍스트 등을 설명합니다. 전반적으로 설명이 자세해서 좋았는데 7장 훅에서 한 번에 이해가 안돼서 2번 읽으니 조금 감을 잡을 수 있었습니다. 웹 개발 전문가라면 모르겠지만 자바스크립트를 잘 모르거나 처음 개발을 시작하는 분에게는 리액트는 확실히 쉬운 라이브러리는 아닙니다. 한 번에 다 이해하는 건 쉽지 않을 것 같습니다. 이 책으로 대충 감을 잡고 코드를 짜면서 익숙해지는 과정이 필요해 보입니다.

 

리액트라는 자바스크립트 라이브러리를 다루는 책이지만 15장에서는 CSS에 대해서도 나름 자세히 설명해줍니다. 이걸 읽으니 CSS 내용도 정리가 되네요. 마지막으로 16장에서는 미니 블로그 만들기를 하면서 기획에서 구현까지 앞에서 배운 내용을 어떻게 사용하는지 알 수 있습니다. 제 바람이지만 프로젝트가 조금만 더 실용적이였으면 좋았을 것 같습니다. 아마도 데이터베이스까지 다루려면 책이 조금 더 두꺼워졌겠지요.

 

소문난 명강의 소플의 처음 만난 리액트. 리액트 입문자에게 딱 어울리는 책입니다. 리액트에만 집중하는 책이라 좀 더 큰 프로젝트에서 활용하기 위해서는 다른 책이나 자료를 봐야 하겠지만 일단 리액트에 집중하기에는 괜찮습니다. 무료 동영상 강의도 있어서 이해하는데 도움이 될 것 같습니다. 이 책의 단점이라면 실습화면 글자 폰트가 너무 작다는 거. 개정판에서는 수정이 되면 좋을 것 같습니다.

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

이인제님이 지은 소플의 처음 만난 리액트 책입니다.

 

 

이 책은 리액트에만 집중하기에 초보자를 위한 책입니다.

또한 무료 동영상까지 제공하니 같이 보면 좋을 것 같네요

책에 최대한 핵심만 담겨 있습니다.

 

 

리액트를 처음 접하는 입문자를 위한 책입니다.

또한 리액트를 하기 전에 HTML, CSS, JS를 해야 되나라고 고민하는 경우가 많은데

 

이런 고민을 덜어낼 수 있도록 3개에 대한 기초적인 내용도 담겨있습니다.

 

 

책은 크게 4개 요소로 나눠져있고 챕터는 16개가 있습니다.

리액트가 무엇인지, 리액트의 기본 요소, 스타일링

 

그리고 마지막에 프로젝트까지도 진행할 수 있게 책을 만들었네요.

 

 

저는 책의 가독성을 굉장히 중요하게 생각합니다.

이 책은 중요한 부분에 하이라이트도 되어있고

 

그림도 자세하게 나와있어서 좋았습니다.

코드도 읽기 쉽게 글씨가 이쁘게 나와져있습니다.

챕터의 마지막마다 "마치며"를 통해서 그 챕터에서 배운 걸 정리해 줍니다.

 

그림을 통해서 쉽게 설명해 주는 부분이 좋았습니다.

또한 매 챕터마다 실습하기도 있어서

배운 내용을 실습할 수 있게 구성을 했습니다.

이론을 배우는 것도 좋지만 실습하는 게 개발에 있어서 정말 중요하다고 생각합니다.

마지막 챕터에서는 배운 걸 토대로 해서 미니 블로그를 만들 수 있습니다.

 

 

리액트를 처음 해보는 사람이라면 많이 배울 수 있는 책이라고 생각합니다.!

책과 무료 강의 영상을 같이 보면 초급자에게 많은 도움이 될 거라고 생각합니다!

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

Intro

백엔드만 공부하던 학생이지만, 언젠가는 프론트도 해봐야 하지 않겠나 매번 생각했습니다. 그러나 자바스크립트까지 자세히 공부하기에는 시간이 항상 부족했습니다. 백엔드를 위한 기술스택 공부하기에도 바쁜데 프론트까지 언제 하고 있겠어요. 또한, 서점에 가서 책들을 살펴보면 자바스크립트 책이 두껍더라고요. 그래서 자연스럽게 프론트는 알아야 할 것도 많고 진입장벽이 높다는 생각을 갖게 됐었습니다. 그러던 중 이 책을 발견하게 됐고, 이 책의 대상 독자에  HTML과 자바스크립트를 다뤄본 경험이 있다면 수월하게 이 책의 과정을 따라갈 수 있습니다. 이와 같은 웹 개발을 위한 기초 내용을 배운 적이 없거나 웹 개발 경험이 없더라도 이 책의 학습 과정을 따라갈 수 있도록 HTML과 자바스크립트, CSS의 기초적인 내용을 설명하고 있습니다. 라고 적혀져 있어서 선택하게 됐습니다.

Book Review

리액트 입문자를 위한 책

위의 Intro에서도 언급했듯이 초반부에 HTML, CSS, JavaScript에 대해 먼저 간단하게 설명합니다. 솔직히 이 책을 읽는 사람이 정말 HTML, CSS, JavaScript에 대해 모를리는 없지만 그래도 간단하게라도 정리해주고 시작하는 것이 입문자에게는 매우 도움이 될 것이라 생각했습니다. 그 후 리액트가 무엇이고 리액트가 어떻게 동작하는지, 왜 리액트를 사용하는지 등을 잘 설명합니다. 전체적인 설명이 적절한 비유와 예시를 들어가며 설명하여 이해하기 편했습니다.

또한, 저는 저자분께서 제공하는 강의를 활용하면서 공부했습니다. 그렇게 길지 않고 짧은 강의들이라 듣는데도 부담감이 없었고 저 같은 입문자들에게는 많은 도움이 될 것 같습니다.

Chapter마다 마지막에 간단하게 정리가 되어 있어 이번 Chapter에서는 무엇을 배웠나 다시 생각해볼 수도 있어서 좋았습니다.

마지막에는 지금까지 배운 내용을 활용하여 간단하게 블로그를 만들어보는 미니 프로젝트를 진행합니다. 점검 차원에서 매우 도움이 됐습니다. 조금 아쉬운 점은 또 다른 주제의 프로젝트도 있었다면 복습하는 데 도움이 됐을 것 같습니다.

대상 독자

리액트에 입문하시는 분께 추천합니다. 또한, 프론트엔드 개발자를 목표로 하시는 분들께 추천합니다. 개발자와 함께 일하시는 분들께도 추천합니다. 특히 비개발자인 기획자, 디자이너분들께도 큰 도움이 될 것 같습니다.

 

회사에서 내부적으로 사용할 웹사이트가 필요할 때

다른 개발자들이 종종 리액트를 추천하곤 했고, 결국은 리액트로 만들었었다.

 

Long long time ago,

PHP / ASP / JSP 시절에 웹사이트를 만들었었던 나는 ...

 

"그게 대체 뭔데!?"

 

Kubernetes 공부하면서 동작 테스트를 위한 간단한 웹서버를 띄울 때

Node.js를 이용해 정말 간단한 웹페이지를 만들어 보면서

새로운 세계를 살짝 엿보기는 했었지만 ...

 

그러던 중 집으로 배달된 아름다운 책 한 권 !!!

표지

나처럼 리액트가 뭔지 모르는 초심자를 위한 책이다 !!!

거기에다가 무료 동영상 강의까지 제공 되다니 !!!

나를 위한 찰떡 궁합 !!!

목차

목차를 살펴보면,

정말 말 그대로 초심자를 위해 엄청난 고민을 했다는 것이 딱 느껴진다.

 

일단, 너무 많은 내용을 포함하지 않아서 부담감이 크지 않은 점이 너무 좋았다.

 

꼭 알아야할 기초 중심으로 설명해주면서

마무리로 미니 프로젝트를 하나 함으로써 정리를 할 수 있게 해주고 있다.

동영상 강의

이 책의 가장 큰 매력 ... 동영상 강의 !!!


아는 사람은 알고 있는 goormedu에서 찾아볼 수 있다.

  - https://edu.goorm.io/

goormedu

goormedu 사이트에서 '리액트'로 검색을 해보면

리액트 관련한 많은 강의를 찾아볼 수 있다.


'처음 만난 리액트(React) v2' 강의를 선택하면 된다!!!

처음 만난 리액트(React) v2

무료다!

강의 목차
강의

책 없이 강의만 봐도 충분할 것 같은 퀄리티다.


인프런에서도 강의를 볼 수 있다.

  - https://www.inflearn.com/course/처음-만난-리액트/

인프런

동영상 강의 내용은 같다.

인프런 강의

유튜브로도 바로 볼 수 있다.

  - https://www.youtube.com/c/소플TV

유튜브

동영상 강의의 컨텐츠 내용은 모두 같다.

각자 편한 방식으로 선택하면 된다.


유튜브가 접근성이 편리해 보이지만,

goormedu 또는 inflearn을 통해서 강의를 듣게 되면 진도 체크 같은 도움을 받을 수 있어서 좋다.


그러면, 이제 GitHub를 방문해보자.

  - https://github.com/soaple

GitHub

저자의 사진도 볼 수 있다! (어?! 훈남이시네!!!)

실습 코드

실습코드도 제공되니 이를 활용하면 보다 편하고 재미있게 공부할 수 있다.


 

다시 책 내용을 살펴보도록 하자.


각 장의 앞 부분에는 어떤 것을 공부할 것이라고 알려주는 Preview 내용이 있다.

Preview

장을 마칠 때에는 Summary로 정리까지 해준다.

마무리

개인적으로 이렇게 정리해주는 것을 정말 좋아한다.

 

작은 요소에 매몰되지 않고 전체적인 큰 그림으로 보면서

지금 무엇을 공부하려고 하는 지, 지금까지 무엇을 공부한 것인 지 알면서 공부하는 것이 정말 중요하다!!!


마지막으로 살펴볼 내용은 ...

리액트를 공부하기 위한 책인데, 리액트의 단점에 대해서도 설명해주고 있다.

리액트 단점 1


리액트 단점 2

 

단점을 설명하긴 했지만,

그렇다고 절대 리액트의 매력이 떨어진다고는 생각하지 않는다.


개인적으로 크로스-플랫폼 프레임워크로써 플러터(Flutter)의 세상이 오기를 기다리고 있는 입장이지만

최소한 아직까지는 리액트의 세상이기에~

 

 

책 내용을 살펴본 느낌을 적어보자면,

저자가 정말 많은 고민을 하고, 애정을 쏟아서 정성들여 만든 초급자를 위한 안내서라고 느껴졌다.

 

강의를 많이 하던 분이라거 그런지

내용 하나 하나가 직접 설명을 해야하는 책임감을 갖고 작성된 것 같았다.


리액트 초급자라면 정말 무조건 선택해야 하는 책이라고 추천하고 싶다!!!


"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

리액트가 처음인 사람들을 위한 안내서

처음 만난 리액트.png

저자가 생각하는 대상 독자는 둘인 듯합니다.

 

하나는 웹 개발을 처음 시작하면서 리액트 쪽으로 방향을 잡은 분들입니다. 다른 하나는 프로그래밍 경험은 있으면서 리액트를 빠르게 알아보고 싶은 분들입니다.

 

어디에 속하든 리액트가 처음이라면 괜찮은 선택이라고 생각합니다.

너무 무겁지 않으면서 리액트를 알아갈 수 있습니다.


알맞은 분량

미니 프로젝트인 마지막 장을 빼면 15개 장으로 리액트를 알려주고 있습니다.

각 장은 프리뷰, 내용 설명, 실습, 요약으로 이루어져 있습니다. 모든 장이 같은 구성 즉, 패턴을 반복합니다. 읽어갈수록 패턴에 익숙해지는데 이게 새로운 내용을 접하는데 꽤 도움이 됩니다.

모른다는 걱정보다 대략 어떻게 접근할 수 있겠다는 자신감을 가지게 합니다.


내용 설명이 그렇게 길지 않습니다. 처음 접하는 분들이 알아야 할 내용에 집중하여 설명합니다. 주제에 따라 내용이 어렵거나 무거워질 수 있습니다. 그렇다는 건 처음 하는 분들에겐 오히려 독이 될 수 있기에 적절한 선에서 멈추고 반드시 알아야 하는 내용만 이야기합니다.


설명을 하다 보면 추가적인 개념이나 설명이 필요한 부분이 없을 수 없습니다. 이럴 때면 조금 뒤쪽에 관련 내용을 박스 형태로 제공하도록 합니다.

내용 설명을 방해하거나 설명이 곁길로 새지 않도록 합니다.


아쉬운 분량

상대적으로 중요한 주제처럼 보이기에 설명이 조금 더 있었으면 하는 부분도 있습니다.

리액트를 알려주겠다는 것이지 분해 조립하겠다는 게 아니라는 걸 떠올려야 할 시점입니다.

리액트를 시작하는 것에 집중합니다. 이로 인해 어쩔 수 없이 생기는 아쉬운 부분입니다.

어떻게 보면 좋은 동기부여가 되리라 생각합니다.

책 한 권으로 리액트의 모든 것을 알고자 하는 게 오히려 지나친 욕심이기도 하고요.


이제 걸음마를 시작할 수 있으니 넘어지며 걸음걸이를 익히고 달려 나갈 일만 남았군요.



"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

	

최근에 개인 홈페이지를 만들면서 웹에 대해서 공부를 해보고 있다. 깃허브 블로그로 만들고 있는데, 처음에는 jekyll로 사용해보다가 뭔가 수정할 수 있는 것이 참 많아보이면서도 뭔가가 부족해 직접 html, css, js 파일들을 만들어서 웹페이지를 만들었다. 그리고 직접 짜는 것이 진짜 멋이지 라는 생각도 있었다. 물론, 직접 하게 되니 꽤 불편한 점들도 많았는데, 하나하나씩 짜보니 재미있었다. 그리고 jekyll을 사용하지 않는다고 하더라도, 몇몇 유명한 홈페이지들을 참고하고 코드펜 웹사이트처럼 웹페이지 분야에서도 사용할 수 있는 예제 코드들을 참고해보니 괜찮은 기능들을 손쉽게 내 홈페이지로 옮길 수 있었다.

리액트는 사실 들어만 보고 어떤 것인지조차 잘 모르고 있었다. 리액트는 자바스크립트 라이브러리 중 하나라고 한다. 약간 직접 하나하나 다 짜는 것이 아니라 리액트를 이용하면 조금 더 간편하게 웹페이지를 만들 수 있는 툴이라고 생각할 수 있다. 이 책을 통해 조금 알아볼 수 있었는데, 굉장히 입문자에게 맞춰져 있다보니 나에게는 조금은 심심했다.

 

책은 다음과 같이 생겼다.

 

 

디자인이 꽤 예쁘다. 뭔가 최근 개발 쪽 책들은 디자인을 예쁘게 해서 내는 것 같다. 

 

저자와 책에 대한 설명은 다음과 같다

 

 

.카이스트를 다녔다고 해서 반가웠다. 최근 또 개발자 중에도 유튜브나 강의를 운영하면서 부수입을 벌어들이는 경우가 꽤 있던데 나도 해보고 싶긴 한데 엄청 노력이 많이 들 것 같다. 책 내용은 "리액트를 처음 접하는 입문자"를 대상으로 하고 있어 웹 개발 경험이 아예 없더라도 따라올수 있도록 되어 있다.

 

 

전반적으로 살펴보면 처음에는 그냥 환경 설정과 리액트에 대한 설명, 그 이후는 리액트에 있는 문법적인 부분들을 다루고 마지막으로는 작은 프로젝트를 하게 된다. 여기에서 미니 블로그를 만들게 되고, 그 안에서 댓글 작성과 같은 요소들까지 구현을 하지만, 실제 서버나 데이터베이스와 연동을 하는 것이 아니기 때문에 댓글을 작성한다고 실제로 작성되지는 않는다.

 

 

 


전반적으로 책을 읽으면서 느낀 점이 리액트에 대해 엄청 친절하고 자세하여 입문자가 따라오기 쉽긴 하지만, 프로젝트 부분의 양이 조금 적다고 느껴졌다. 사실 코딩은 직접 해보면서 실전으로 배우는 것이 제일 좋은 것 같은데, 미니 프로젝트가 한 두 개 정도만 더 있고 앞에서 내용을 설명하는 부분에서도 짤막짤막하게 등장했다면 훨씬 재미 있었을 것 같다.

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

출처: https://honeyjamtech.tistory.com/94 [취미생활하는 공대생:티스토리]

 

Author: 이인제 지음

출판사: 한빛미디어

Score /5: ⭐️⭐️⭐️⭐️⭐️

현재 대세로 보이는 자바스크립트 프레임웍중 양대 산맥은 React와 Vue라고 개인적으로 생각합니다.
하지만 일반적으로 (또는 귀동냥으로) 프로젝트에서 많이 채용되는 프레임워크는 React가 Vue보다 더 많이 들립니다.
그만큼 리액트가 현재 트렌드에서 수요가 많고 매우 중요한 포션을 차지하고 있는 것을 확인해 볼 수 있습니다.

 

지난 5년간 국내에서 react와 vue 검색비율 - 둘다 꾸준히 관심이 올라가지만 react (파랑)에 대한 관심이 더 높은것을 볼 수 있음

 

 

하지만 리액트가 좋다라는 것을 알고 있지만 vue보다 진입장벽이 높음을 익히 들어 알고 있었습니다.
개인적으로 자바스크립트도 일부 기초만 알고 있는 초보 레벨이기 때문에 생각보다 부담스러운 상황이었습니다.

해당 상황에서 소플의 처음만난 리액트는 저를 손쉽게 리액트에 입문하도록 도왔습니다.
개발자가 가장 힘들어하는 개발환경세팅 부터 각각의 소스코드 및 개념을 성실하고 차분하게 설명해 줍니다.

 

엘리먼트에 대한 설명 - 차분하게 히스토리 설명부터 해주는 것이 좋았음!

 

 

여러분들이 초보 개발자 또는 프론트엔드 기술에 관심있는 엔지니어라면 입문서로 소플의 처음 만난 리액트를 선택하는 것을 추천합니다. 

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

# 멀고먼 React 개발자 되는 길

FE 의 대세는 React (이하 리액트) 라고 하여 리액트를 배워 보기로 했다.근데 갈길이… 멀다.

 

20220626_002.png

 [리액트 개발자 로드맵... 의 일부]

 

# 쉽게 시작하자모든 것이 그렇지만 처음에 시작하는 것이 제일 어렵다. 그래서 소플의 처음만난 리액트는 어려운 내용은 덜어내고 최대한 리액트에만 초점을 맞춰서 설명 한다. 또한 HTML, CSS, JS 에 대한 간단한 설명과 초심자가 가장 헷깔려 할 수 있는 리액트 개발환경 설정에 관한 내용도 충실하게 담겨 있다.

 

# 체계적인 구성과 쉬운 설명

각 챕터를 개념정리, 실습, 마치며(요약) 의 3단계로 필요한 내용을 제대로 배울수 있도록 체계적으로 구성 되어 있다.

저자의 개념정리를 보면 초심자를 위하여 얼마나 많이 고민하여 쉽게 설명하고 정리했는지를 알 수 있다. 

(붕어빵에 비유한 설명 재미있다. 궁금하면 책을 보자)

20220626_006.png

[챕터 프리뷰]

 

# 책의 전체 구성

체계적인것은 챕터의 구성만이 아니다. 전체적인 책의 내용 구성도

WARM UP > TUTORIAL >  STYLING > PRACTICAL EXERCISE 의 순서로 되어 있어

준비하고, 배우고, 실습하여 마무리 하는 구성을 큰 흐름에서도 진행하도록 한다.

 

리액트의 기본요소를 다루는 TUTORIAL 에서는 실제 리액트로 개발할 때 사용하는

외부라이브러리 등에 대한 많은 내용이 생략된 것도 사실이지만

꼭 필요한 내용은 모두 포함 하고 있다.

 

20220626_007.png

[책의 전체 구성]

 

# 소문난 명강의

책보다 동영상 강의가 더 익숙한 세상이다. 책을 보다 어려울 때 동영상 강의를 활용하면 학습효과가 두배가 된다. 

이 책의 시리즈명이 “소문난 명강의” 이다. 얼마나 좋은 강의 이길래 소문이 다 났을까. 꼭! 확인 해보자.

귀에 착착 감기는 나긋나긋한 목소리는 덤이다.

 

# 보기 좋은 떡이 먹기도 좋다

처음 보는 어려운 내용을 설명 하고 있지만, 눈에 확 들어오는 책의 구성과 적절한 이미지 사용으로 지루하지 않고 내용에 좀 더 쉽게 다가갈 수 있도록 한다. 쳐다만 봐도 하품 부터 나오는 지루한 개론서가 아니다.

 

# 추천 대상

저자 QNA 에서도 이야기 하지만, 이책은 어려운 내용은 다 덜어내고 최대한 리엑트에만 초점을 맞추어 설명한 책이다. 

그래서 다음과 같은 사람들에게 추천 하고 싶다.

 

1) 배워야 할 것은 많다던데 뭐부터 시작해야할지 모르는 진짜 초심자

2) 리액트는 해본적이 있지만 기초가 부족한 사람

3) jquery 등 기존에 사용하던 라이브러리를 리액트로 변경할 때의 높은 러닝커브를 조금이라도 줄여보고자 하는 개발자 

 

# 다음권을 주세요

이 책으로 초심자를 벗어나게 된 독자들을 대상으로 한 리액트 책을 저자가 되도록 빨리 써주었으면 좋겠다. 

(현기증 난단 말입니다.)

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

20220626_171403.jpg

 

리액트 입문자 중심으로 쓰인 책이라 정말 리액트 처음 접하는 학습자가 보기에도 무리가 없음! 

입문 도서라고 해놓고 선수 지식들이 필요한 말만 입문 도서인 책이랑은 다르더라고요. 

웹페이지를 구성하는 html 관련 내용과, 동적 페이지 구성에 사용되는 자바스크립트 문법도 자주 사용되는 부분은 다 설명되어 있어서 

프런트 개발에 지식이 하나도 없더라도 볼 수 있는 도서입니다.

html, css도 모르는 코린이 이거나, 업무에 적용하기 위해 리액트를 처음 접하는 학습자 모두 리액트 입문을 성공적으로 할 수 있는 도서라고 생각합니다. 

체계적으로 리액트 기본부터 다지고 싶다면, 소플의 처음 만난 리액트 책으로 학습하길 추천드려요.

무료로 제공되는 인강도 있고, 각 챕터별 실습과 요약정리까지 되어 있는 데다가 컬러풀해서 눈에 잘 들어오는 점도 굿. 

리액트 입문 도서로 아주 좋은 도서 같습니다 :)

 

** 본 리뷰는 한빛미디어 <나는 리뷰어다> 리뷰어 활동으로 도서만을 제공받아, 리뷰어의 주관적인 견해로 작성된 리뷰입니다. **

 

2013년에 오픈 소스화 된 React는 프런트에서 사용되는 언어다. 아마 가장 많이 사용되고 있는 자바스크립트 UI 라이브러리가 아닐까 생각된다. 빠른 퍼포먼스를 발휘하며 관련 정보도 많은 만큼 사용하는 곳도 계속 늘어나도 있는 추세라 여겨진다. 아직 리액트 프로젝트를 접해보지 못한 입장에서 리액트 프로젝트는 꼭 해보고 싶기에 우선은 책을 통해 기초적인 지식을 습득하고자 했다. 뭔가를 새로 익히는게 점점 힘들다는 생각도 들지만 이왕이면 좀 알기 쉬웠으면 좋겠다는 욕심이 있다. 

리액트는 쉽지 않다

특정 분야에서는 아직까지 React를 활용할 일이 없다. 특히나 보안이 많은 이슈로 작용하는 분야에서는 도입 자체가 어렵다. Node 설치 자체를 거부하는 곳도 있으니까. 그렇지만 전체적으로 이러한 분위기도 바뀌고 있는 만큼 언젠가는 전체적인 프로젝트들이 이쪽으로 바뀔 것이라 생각되긴 한다. 국내 작업환경 특성상 도입되는 시기가 언제일지 갈피를 잡지는 못하겠지만.. 따라서 어디까지나 개인적으로 연상하고 있는 이미지에 지나지 않지만, 이미 성숙기를 지나 안정기를 달리고 있는 React에 대해 지금이라도 익히지 않는다면 두고두고 후회하게 될 것 같은 생각이 든다.

뷰를 살짝 접했을 경우 컴포넌트 설계를 잘해두면 아주~ 좋다는 것을 경험한 기억이 있다. 뷰나 리액트가 나왔을 당시 생명주기라던가 훅이라던가 용어는 물론이고 개념이 잡히지 않아 고생한 기억이 있다. 물론 지금도 큰 차이는 없다. 쉽지 않은 리액트, 과연 처음 배우는 사람들에게 필요한 건 무엇일까. 어떤 과정을 거쳐야 기본적인 것들을 책 없이 혼자 해낼 수 있을까. 많고 많은 책 중에 처음 만난 리액트는 어떤 과정으로 리액트를 알려주고 있을까.

처음 만난 리액트

책을 보면서 리액트를 처음 접하는 사람의 입장을 고려해서 잘 만들어진 개념서라는 생각이 들었다. 유튜브와 인프런에서도 동영상 강의를 무료로 확인할 수 있다. 책을 읽고 동영상을 보기를 반복하다 보면 좋은 성과가 있을 것 같다.

여러 가지 새로운 개념들이 난무하는 관계로 익숙하지 않은 개념들은 받아들이고 이해하는데 많은 시간이 소모된다. 그런 의미에서 소플의 처음 만난 리액트는 이론에 대한 할애가 착실하게 이루어져 있다는 인상을 받았다. 기본적으로 각 장의 전반부에 개념을 다루고 후반부 실습에서 관련 내용을 코딩해보는 방식으로 구성되어 있는데 좋은 것 같기도 하고 애매하기도 한 느낌이 들긴 했는데 이유는 실습에 사용되는 코드를 스크린샷이 적용된 책만으로는 판독해서 따라 하기 어려움이 있다는 생각이 들었기 때문이다.(이게 제일 아쉽다)

리액트를 공부하는데 있어 필요한 다양한 지식을 한 권으로 접할 수 있다는 것은 무척 반가운 이야기다. 초보자가 한글로도 이해하기 어려운 내용을 영어로 된 공식 사이트를 보면서 따라 한다고 해봐야 큰 발전을 기대할 수 없는데 한글로 초보자를 대상으로 집필된 내용은 조금이나마 리액트에 접근하려는 문턱을 낮게 해 준다는 느낌을 받을 수 있었다.

이미 만들어진 강의를 기반으로 진행된 서적이라서 새롭게 코딩을 하고 그 코드를 가공해서 책에 적용하는 과정을 생각하면 나쁘지 않은 방법이겠지만, 책을 보는 입장에서는 아쉬운 부분이 아닐 수 없다.

후기

학습하는 입장에서 잘 읽히지 않는 스크린샷의 활용이 살짝 아쉬움이 있는 책이긴 하지만 개념을 이해하기 위해 다루는 다양한 내용들은 확실히 도움이 되었다. 어째서 JSX를 사용하는지 엘리먼트와 컴포넌트의 개념, 생명주기에 대한 이해 등 알차게 준비되어 있는 내용을 확인할 수 있었다.

HTML/CSS만으로 생활해온 사람의 태반이 다음 스탭으로 생각하는 곳이 프런트 앤드다. 소플의 처음 만난 리액트는 훌륭한 가이드가 되어줄 것 같다. 교제는 준비되어 있으니 이제 남은 건 학습하기 위한 나의 끈기와 의지뿐.

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

	

 

 

 

 

 

 

 

 

 

 

SPA (Single Page Application)의 시대에, 아직까지 React가 대세라는 것은 누구도 부정하기 힘든 사실입니다. 후발 주자인 Vue가 React와 Angular의 여러 특징, 장점을 잘 흡수해서 훨씬 좋은 사용성을 가지고 있다는 의견도 있지만, 혹자는 오히려 React의 자유도를 따라가기 어렵다고 평하기도 합니다.

Meta를 등에 업고 있어 지속적인 지원과 메이저 업데이트를 기대할 수 있다는 점, 추후 React Native를 통해 앱 개발까지 병용할 수 있다는 점들 또한 상당한 매력 포인트 입니다.

 

반면, 가장 큰 단점으로 지적되는 부분이 바로 '배우기 어렵다'는 점인데요. 이를 일명 '러닝커브가 비효율적이다'라고 하기도 합니다. 즉, Vue보다 배우기 어렵고, 학습해야 하는 절대적인 콘텐츠가 더 많다는 것입니다.

 

저 역시, 과거에 여러 React 도서를 보면서 때때로 힘겨운 싸움을 해온 기억이 있습니다. 웹 개발의 근간이 되는 베이스 지식이 탄탄하지 못 해서인지, 일단 '어떻게 저떻게' 코딩을 하면 된다는 것은 알겠지만, 왜 그렇게 해야 하는지에 대한 의문들이 수없이 생겨나곤 했습니다. 이는 후반부로 갈수록 더욱 극심해져서, 한 챕터를 학습하고 나서, 학습한 내용의 대부분이 기억이 안 나는 지경에 이르기도 했습니다.

 

리액트를 비롯한 여러 프론트엔드 라이브러리를 강의하는 모 강사님은, 이를 두고 '과도하게 어려운 개발자 용어를 써가며 어렵게 설명하기 때문'이라고 평하기도 했습니다. 

 

리액트의 여러 핵심 기능과 구조들, 예컨대, 훅, State, JSX, 상태관리, 이벤트 핸들링과 같은 요소들은 모두 처음 리액트를 배우는 이들에게 생소한 개념입니다. 대부분의 프론트엔드 프레임워크(또는 라이브러리) 도서가 'HTML/CSS/JS를 정도만 알면 된다'는 전제를 깔고 있지만, 저는 사실 전제가 하나 더 깔려있다는 생각이 들었습니다. 바로 '챕터마다 나오는 새로운 개념과 콘텐츠를 한번 보면 이해하고, 사용할 수 있다'는 것입니다. 난립되는 여러 개념들을 쉽게 풀어서 설명하기보단, 그냥 무작정 쌓아올리는 느낌이 강했고, 결국 심화 학습은 오로지 학습자의 몫이 되는 책들이 많았습니다.

 

내용이 어렵다거나, 혼자 학습해야 하는 부분이 많다는 것이 문제는 아니었습니다. 사실 알아서 학습하고, 알아서 이해하는 것이 개발자의 덕목 중 하나이니까요. 문제는 "기초 교재"를 표방하는 책들이 이렇게 가르친다는 것이 문제였습니다. 책의 절반 정도를 쭉쭉 보다 보면, 이미 너무 많은 개념이 지나가서, 이후 파트를 이해하기 어려운 문제가 왕왕 발생합니다. 분명 훅, State, Props 같은 것들을 배우긴 배웠는데, 이걸 왜 이렇게 사용하는지 알 수 없는 것입니다.

마치 학창시절 '수포자'가 양산되는 것과 비슷한 느낌이었습니다.

 

이 책은 확실히 초심자를 위한 책입니다. 리액트를 다루는 데에 필요한 최소한의 개념과 내용은 모두 담고 있으면서도, 한편으로는 정말 최소한의 심화 학습만 진행하는 구조로 되어 있습니다. 

추후 리액트로 개발하면서 당연히 사용하게 될 Redux, Axios 등의 학습은 배제하여, 오로지 리액트의 기초를 쌓는 데에 중심을 둡니다. 이미 웹 개발 지식이 충분한 개발자가 '이 한권으로 리액트 개발의 모든 것을 끝내버리겠다' 라는 생각이 아니라면, 초심자에겐 오히려 이로운 구조입니다. 

 

한 가지 아쉬운 점은, 상대적으로 중요성이 낮은 예제 코드는 스크린샷으로 삽입되어 있다는 점입니다. 코드가 모두 책의 본문으로 들어가지 않아서, 실습 중에 일부는 스크린샷에 들어있는 텍스트의 가독성이 떨어지는 탓에 타이핑 하기 다소 어려울 수 있겠습니다. 이 부분은 책에 삽입된 Github 레포지토리의 코드를 이용하시길 추천 드립니다.

 

 

모쪼록, SPA 대세의 시대가 찾아온 후로 양산된, 전국의 React 포기자, 리포자 분들께 이 책을 강력 추천 드립니다.

 

 

 

 

 

 

본 리뷰는 한빛미디어의 도서 서평단 <나는 리뷰어다 2022> 프로그램의 일환으로, 무상으로 도서를 증정 받고 작성된 리뷰임을 고지합니다.

 

 

이제 10년차가 넘어버린 백엔드 개발자인 나는

지금까지 풀스택 개발 방식으로  개발해왔다

(풀스택: 스프링프레임워크+JSP+html 이렇게 얘기하면 다들 아시쥬?)

 

근래에 들어서 프론트엔드와 백엔드가 구분된

플랫폼 방식으로 개발하고 있는데 ( 한참된 이젠 트렌드)

백엔드 개발자로서 프론트엔드 분야도 어느 정도는

알고 있어야 함을 업무 중에 느끼게 되었다

(FE:리액트 + BE:자바/파이썬 등)

 

그러다보니 리액트나 뷰(vue.js) 등을 한 번은 공부하려고 했는데

마침 소플의 처음 만난 리액트 (*이인제 지음)를 접하게 되었다

그래서 본인은 리액트를 처음 접하지만

완전 입문자의 입장은 아닐 수도 있다

 

 

책의 구성

이 책의 구성을 요약하면 다음과 같다

 

- 필요한 기초 지식 및 개발 환경
- 리액트 소개 및 준비
- JSX, 엘리먼트 렌더링, 컴포넌트와 Props
- state와 생명주기, 훅
- 이벤트 핸들링, 조건부 렌더링
- 리스트와 키, 폼, State 끌어올리기
- 합성과 상속, 컨텍스트, 스타일링
- 미니 블로그 만들기

 

 

나의 리뷰

이 책은 비개발자까지는 아니더라도

리액트를 처음 접하는 입문자가

html과 자바스크립트에 대한 어느 정도 이해가 있다면

쉽게 따라갈 수 있다고 생각한다

 

나는 책을 보면서 가독성을 중요시 생각하는데

한 문장을 읽더라도 이해가 얼마나 쉽고 빠르게 되는지를 판단한다

이 책의 이해를 위한 가독성은 매우 뛰어나다

책이 얇지는 않지만

어느 정도의 이해 지식이 있다면

빠르게 볼 수도 있을 정도로 설명을 쉽게 해주었다

 

나는 이렇게 좋은 정보를 바탕으로 잘 써준 책을 읽고 나면

저자에게 감사함을 느낀다

나 또한 언젠가 이러한 저자가 되고 싶다

5.jpg

 

 

프론트엔드 라이브러리의 3대장이라고 하면 리액트, 뷰, 스벨트가 생각난다. 그리고 이 순서대로 아마 우리나라에서 많이 쓰이지 않을까 싶다.

또한 리액트 하나를 쓸 줄 알면 뷰나 스벨트 모두 SPA이기 때문에 배우는데 크게 어렵지 않다고 생각이 든다.

 

단, 리액트는 다른 라이브러리보다는 러닝커브가 조금 높기 때문에 처음에 리액트를 배워두면 다른 라이브러리들은 오히려 더 배우기 쉽다는

생각이 드는것 같다. 그렇기에 리액트를 책으로 공부한다고 하면 어렵지 않게 쉬운 책으로 시작하는게 처음에 포기하지 않고 끝까지 배울 수 

있다는 생각인데, 이번에 ‘소플의 처음 만난 리액트’가 그 책이지 않을까 싶다.

 

저자분께서는 유튜브채널과 무료로 인프런 강의도 하고 계시는 분이기에 책으로 부족한 부분은 영상을 통해 배울 수 있다는 장점이 있다.

- 유튜브 채널: https://www.youtube.com/c/소플TV

- 인프런 강의(무료) : https://www.inflearn.com/course/처음-만난-리액트

- 블로그: https://blog.soaple.io

 

각설하고, 책은 초보자들을 위해 쓰여졌다. 웹에 대해서 잘 알지 못하더라도 이런 독자들을 위해 쓰여져서 책의 내용이 어렵지 않게 되어 있어

학습하는데 어려움이 없다. 또한 글도 강의 하듯이 대화체로 쓰여져 있어 집중하는데도 도움이 되는 것 같다.

 

그리고 이 책에서는 외부 라이브러리들의 사용법에 집중하는 것보다 목차를 보면 리액트의 기본을 배우는데 중점적으로 다루어 진것을 알 수 있다. 

.리액트 소개, JSX, 엘리먼트 렌더랑, 컴포넌트와 Props, State과 생명주기

.Hook, 이벤트 핸들링, 조건부 렌더링, 리스트와 키

. 폼, State 끌어올리기, 합성 VS 상속, 컨텍스트, 스타일링

 

기본적인 내용들을 배우고 나면 미니 프로젝트로 미니 블로그를 만들어 볼 수 있게 되어 있어 앞에 배운 내용을 정리할 수 있어 좋았던 것 같다.

 

그리고 이 책에서 가장 좋았던 부분 중 하나는 훅 챕터 였던 것 같다. 지금까지 훅에 의존성 변수들을 의무적으로 다 적어놓고 쓰기만 했었는데

이 챕터를 다시 공부하면서 훅의 역할과 어떻게 사용하는지 정리가 잘 되어 있어 많은 도움이 된 것 같다.

 

55.jpg

 

 

16.8버전부터 훅이 라이프 사이클을 대체할 수 있게 업데이트 되면서 훅을 제대로 이해하는 것은 매우 중요한 것 같다. 

그리고 챕터 마지막엔 항상 정리가 잘 되어 있다. 요약된 내용을 잘 짚어보면 정리하는데 도움이 되니 꼭 읽으면서 정리하는 습관을 가지면 

좋을 것 같다.

 

입문자를 위해 쓰여 졌기 때문에 리액트를 써본 사람보다는 리액트를 처음 접하는 분들이 보면 쉽고 빠르게 정리할 수 있는 좋은 책인 것 같다.

리액트를 잘 쓰기 위해서는 써드파티 라이브러리들도 잘 활용을 해야되지만 가장 중요한 건 리액트의 기본기를 얼마나 잘 이해하고 쓰는 것이

중요한 것 같다. 입문자 분들은 학습하는데도 버전차이로 실습하는데 어려움이 없기 최신 책으로 리액트를 공부하는 것도 하나의 좋은 방법이

되는 것 같아 추천한다.   

 

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

네이버 블로그를 하면서도 개인적으로는 블로그를 개인적으로 만들어야 하는가? 라는 고민들이 많이 존재한다.

왜냐하면, IT를 하는 사람들은 구글에서 검색하지 네이버에서 검색하지 않기 때문이다.. ㅠ (미안해 네이버)

그럼에도 불구하고, 취미생활과 아직은 IT를 입문하시는 분들이 보기 좋게 네이버 블로그에서 진행하고 있지만,

연차가 지나가고 올리는 포스팅의 개인적인 퀄리티가 변해가면서, 슬슬 나만의 홈페이지를 만들고 싶은 욕구가 생기고 있다.

 

이러한 개인적인 욕구들과, 업무적 스킬 향상

그리고 홈페이지를 만들 때 최근 대표적으로 사용되는 리액트가 내가 이 책을 선택하게 만들게 되었다.

 

#1. 구성

대상 독자는 리액트를 처음 접하는 입문자를 대상으로 하고, 밑에 링크처럼 유튜브를 통해 강의도 제공하고 있다.

 

1. Warm up

2. Tutorial

3. Styling

4. Practical exercise

 

단계 별로 마지막에 단순하지만 블로그까지 만드는걸 보여주어 책의 구성 또한 탄탄하다.

이 포스팅에 내가 만든 블로그 주소를 짜잔~ 올리면 좋았겠지만,

아쉽게도 현실에 시달려서 거기까지는 진행하지 못했다.

 

#2. 내용

 

책의 가독성과 도식화가 마음에 들었다. 생각보다 컬러책이 주는 가독성은 구분하기 편하게 되어있었고,

단순히 문체로만 읽는 것이 아니라, 도식화된 표를 보면서 어떠한 흐름으로 흘러가는지도 볼 수 있어서 좋았다.

여러 내용을 적는 것보다 위의 구성에 따라 해당 내용들을 천천히 초심자도 따라갈 수 있게 만드는 부분이 좋았다.

 

 

#3. 마무리

 

개인적으로도 나는 DBA지만 인프라를 다루시는 분들도 홈페이지정도는 만드는 역량을 가지면 좋다라고 생각한다. (개인적인 의견이다)

왜냐하면 , DBA도 한 사람당 수많은 DBMS를 다루고 있고, 물론 상용화된 관리 Tool이 있지만, 개인적인 필요에 따라 홈페이지를 만들어서

DBMS를 자동화시켜 다룰 수 있는 부분도 차별화된 역량이 될 수 있기 때문이다.

 

책의 내용만으로 어렵고 영상으로 보고싶다면 밑에 깃헙과 유튜브를 활용하면 좋을 것 같다.

 

https://github.com/soaple/first-met-react-practice

https://www.youtube.com/c/%EC%86%8C%ED%94%8CTV

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 



리액트라는 자바스크립트 라이브러리(프레임워크가 아닙니다.ㅎㅎ) 는 아주 유명한 언어입니다.

전세계에서 프론트엔드 언어로 가장 큰 자리를 잡은 언어가 바로 요녀석이거든요.

비록 러닝 커브가 길고 높다는 단점이 존재하지만, 대규모 프로젝트를 할 때에는 이녀석만한 속도를 내주는 언어가 없습니다.

[리액트, 앵귤러, 뷰 ] 프론트 엔드 3대장 중 제일 큰 인재풀, 시장규모를 갖고 있습니다. 

그래서 신입들도 모두 리액트를 배우고 싶어하며, 회사들에서도 어쩔 수 없이 리액트를 채용하고 있습니다.

자, 서론이 너무 길었네요. 이제 본론으로 들어가보겠습니다.

 


이 책은 제목값을 한다고 생각합니다.

전체적인 책의 흐름을 따라가보자면, 일단 프론트엔드 분야에서 필요한 전반적인 지식을 알려줍니다.

예를 들면, HTML, CSS .... 등등 기초 지식을 알려주고, 자바스크립트가 무엇인지, 왜 써야하는지 등 여러가지 기초 내용을 잡아줍니다.

그리고 본격적으로 리액트에 대한 내용이 있는데, 서론에서도 언급하였듯이, 단점으로 러닝커브가 높다. 라는 언급을 해줍니다.

러닝커브란 투자 대비 효용이 초반에 좋지 않다는 뜻입니다.
다른 말로는 Vue.js 처럼 공부한 만큼의 퍼포먼스가 바로바로 나오지 않습니다.

하지만 재사용성이 중요하고 렌더링 속도가 매우 뛰어나기 때문에 리액트를 채용했다고 합니다.

 


 

리액트에서는 state가 매우 중요합니다. 데이터를 매번 연산하면 product의 렌더링 속도가 그만큼 떨어지니까요.

[state와 LifeCycle 챕터] 를 봐주시면 state(상태)에 대한 설명이 간결하고 이해하기 쉽게 설명을 해줍니다.

 


그리고 놓칠 수 없는 부분이 바로 Hooks (훅) 입니다. 

가장 흔히 사용하고 중요한 훅 중 하나인 useState 훅입니다.

	const [myInfo, setMyInfo] = useState("");

myInfo 라는 state 가 있는데, 해당 state은 기본값을 "" (공백) 으로 가진다.
그리고 set(_)을 통해 해당 state의 값을 변경할 수 있다.

여기서 myInfo는 객체({ })가 될 수도 있고, 숫자가 될 수도 있고, 단순 string 값이 될 수도 있습니다.

훅에 대한 자세한 설명을 확인하고 싶으시다면, [7장 훅] 을 봐주세요!

역시나 코딩의 시작은 클론코딩이죠!

마지막에는 교재에서 가르쳐준 내용을 토대로 나만의 간단한 미니 블로그를 만들게 됩니다.

기본적인 CRUD를 모두 한다고 생각하면 됩니다.

게시글을 작성하고, 읽을 수 있고, 수정하거나 삭제가 가능한 기능을 만듭니다. [16장 블로그 만들기] 를 확인해주세요!

 

 


 

마치며,

"소플의 처음 만난 리액트" 교재는 리액트의 기초부터 간단한 프로젝트까지를 직접 다 코딩해볼 수 있게 도와준다.

설명도 요목조목 잘 따져가며 깔끔하게 설명이 되어있다. 

리액트를 처음 접한다면 추천합니다. 

추가적으로 해당 교재를 구매하시면 [무료 동영상] 이 있으니 확인 바랍니다!

 

확실히 리액트는 처음 보면, 이게 무슨소리야? 왜? 이런 소리를 할 수 밖에 없을 것입니다.

제가 그랬거든요.ㅋㅋㅋ 

프론트엔드에 대한 전반적인 지식이 부족해서 그런건지 몰라도, 리액트는 뷰에 비해서도 진짜 어렵다고 느껴졌습니다.

왜냐하면 라이브러리를 직접 하나씩 하나씩 찾아서 원하는 부분을 보고 수정하고 해야하는 번거로움이 있기 때문입니다.

원하는 라이브러리에 대해 사용을 해봐서 익숙하고 편해했다면 리액트만큼 자유분방하고 여러 라이브러리들을 폭넓게 사용할 수 있는 건 없을겁니다. 

해당 책은 React의 가장 중요하고, 기본이 되는 핵심요소에 대해서 가장 쉽고 명확하게 전달하려는 의도가

100% 그 목적을 달성하는 책이라고 생각되어 집니다.

 

React의 가장 기본이 되는 사항을 잘 이해하고 동작원리를 잘 이해하고 있어야

위에서 언급한 다른 Library 중에서 자신의 프로젝트에서 가장 필요한 기술을 선택할 수 있다고 생각합니다.

React의 기본동작을 알지 못하고 바로 다른 것을 사용하고 되면 어느순간 문제가 발생되었을때 

어려움을 경험할수 있다고 생각합니다.

해당 책은 아래 독자 대상으로 가장 기본이 되는 React의 가장 중요한 부분을 설명하는것에 Focus가 있어서서

리액트를 처음 시작하는 분들에게 좋은 지침서가 될거 같습니다.

컴퓨터/IT] 소플의 처음 만난 리액트

 

웹사이트와 하이브리드 웹앱을 만들어 본 경험으로

요즘 관심이 가는 리액트관련해서 공부하기 좋은 책이 무엇이 있을까하고

찾아보다 이 책을 만났다.

일단 유투브 강의가 있다는게 좋았고

후루룩 흝어 보니 구성이 깔끔하고 설명과 함께 친절해 보였다.^^;

코드도 차근차근 설명도 차근차근

먼가 스텝바이스텝으로 확장되어 가며 알아가는 구조가

좋아서 이 책으로 공부해보기로 하고 겟!

전체 구성이 일단 급하지 않고

큰 구조를 먼저 보고 조금씩 조금씩 안으로 파고드는 구성이라

초보부터 차근차근 따라하며 깊이를 더하기 좋은거 같다.

웹사이트를 만드는데 필요한 주요 핵심 언어들

HTML, CSS, JS는 한번 흝어보고 그 다음으로

이 책을 통해 리액트를 활용해 웹사이트를 만드는 방법을

알아가길 추천한다.

적어도 웹페이지를 좀 만들어서 실행해보고

vs code로 웹페이지 만들어서 실행하는게

조금 익숙한 상태서 진행하면 좋을꺼 같다.

안그러면 새롭게 알아가야할 내용이 너무 많아져서

헷갈릴꺼 같다^^;

 

앞서서 기초지식 정리를 위해 HTML, CSS, JS

내용을 큰 맥락으로 정리해주지만

모르고 본다면 굉장히 어려울 거 같다.

대신에 이런 기초적인 부분을 가볍게 흝고 지나갔기에

리액트에 대해 좀 더 다룰 수 있는 거 같다.

 

기초 정리가 끝났다면 이제 본격적으로 리액트를 활용한

웹페이지

만들기를 해볼 시간!

 

항상 챕터 시작 전 해당 챕터에서는 어떤 내용을 다루고 있는지

개념정리와 실습 파트를 구분하여 도식화해서 보여줘서

어떤 내용을 배울지 미리 체크해볼 수 있어서 좋았다.

웹페이지를 만들때의 차이점부터 차근차근

내용을 다뤄줘서 기존 알고 있던 지식에 더해

새로운 내용으로 확장해나가는 것도 재미있었다.

이걸 사용해서 이렇게 만들어야 합니다가 아니라

이걸 사용해야 하는데 왜 사용해야하냐면~

이런 차이점 때문에 이렇게 사용하는 것이 더 좋습니다.

라는 식으로 설명해줘서 특히나 마음에 들었다.

 

설명을 읽으며 코드를 따라하다보면

아 이걸 이래서 사용하는구나 라고 이해가 된다.

어떻게 보면 책을 만드는 데 있어 대게 귀찮았을법도 한데

이렇게 차근차근 진행해주니 내용을 따라가는 입장에서는

좋은거 같다.

 

리액트의 단점이 어떻게 보면 복잡하고 알아야할 내용이 방대하다는 것인데

장점과 단점을 내용을 따라가며 잘느낄 수 있도록

조금씩 난이도를 조절해가며 내용을 잘 풀어나가는거 같다.

4.jpg

부가설명이 필요한 부분들, 더 알았으면 좋을꺼 같은 내용들

즉, 깊이를 더해줄 설명들은 NOTE를 통해 알려준다.

이 부분도 배우는 입장에서는 굿!

5.jpg

각 챕터들 마다 이렇게 마무리로

어떤 내용들을 배웠는지 정리도 해준다.

아주 친절한 책이다. 입문서, 기초서로 최고다!

 

 6.jpg

 

좀 어려울수도 있는 개념들은

비유로된 도식화로 전체 이해를 돕고

그 다음 세부적으로 어떻게 활용되는지를

도식화하여 이해에 이해를 더해준다^^*

 

7.png

이런 류의 언어들을 공부하는데 있어 어려운건

부분 부분 수정해나가면서 코드를 완성하는 건데

초보자들이 가장 힘들어 하는 부분이다.

그런데 이 책은 이렇게 어떤 부분이 바뀌었는지

설명만 하는것에 그치지 않고

눈에 가시적으로 표시도 해줘서 변경할 부분 찾아보기도 좋았다.

 

8.jpg

IT는 기술이 참 빠르게 변하지만

그 중에서도 웹과 앱은 정말 빠르게 변하는거 같다.

그래서 늘 새로운 기술에 관심을 가지고 공부해나가야 하는데

그럴때 필요한건 독학하기 좋은 친절한 기초서이자

활용하기 좋은 기본서이다.

 

이 책은 리액트를 독학하기에 좋은

친절한 기초서이자

활용하기 좋은 기본서인거 같다.

그래서 리액트를 독학하고자 하는 사람에게

이 책을 추천하고 싶다.

 

---------------------------------------------------------------

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

---------------------------------------------------------------

 

 

KakaoTalk_20220625_221900466.jpg

 

이번에는 또 리액트 책을 받았다. 집에 리액트 책만 꽤나 있는데도 아직도 리액트로 제대로 된 토이 프로젝트를 하지 못했다. 이런 게으름에 반성하며 이번에 받은 책을 읽었다.

한빛미디어에서 처음 만난 OO 시리즈로 책을 좀 내고 있는 것 같은데, 하나같이 정말 명료한 설명으로 처음 접해보는 사람들이 쉽게 이해할 수 있도록 의도하고 지은 책들이다. 이번 책도 그런 것 같다.

JS설명이 앞에 조금 있긴 하지만 거의 깊이가 없어서 사실상 JS에 대해서 기본적인 지식은 알고 있는 상태에서 이 책을 봐야 한다. 리액트에 대해서는 아주 친절하게 설명해주시고 계시다. 리액트의 버추얼 돔이나 스테이트에 따라 그려진다는 것들 등등 기초적인 개념을 쉽게 설명해주고 있다. 책이 컬러로 되어 있어서 보기도 좋고 중요한 부분들이 눈에 확 띄어서 좋은 것 같다. 그림도 많아서 진짜 쉽게 설명해주려고 많이 노력하고 있는 것 같다.

 

 

 

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

이 책은 자바스크립트 UI 라이브러리인 리액트에 관한 책입니다. 프로그래밍에 뛰어 나지 않은 초보 개발자들도 쉽게 이해할 수 있도록 쓰여져 있으며, 단계별로 실습하며 따라할 수 있도록 책이 구성되어 있습니다.


 

목차

 

0장 준비하기

 

1장 리액트 소개

 

2장 리액트 시작하기

 

3장 JSX 소개

 

4장 엘리먼트 렌더링

 

5장 컴포넌트와 Props

 

6장 State와 생명주기

 

7장 훅

 

8장 이벤트 핸들링

 

9장 조건부 렌더링

 

10장 리스트와 키

 

11장 폼

 

12장 State 끌어올리기

 

13장 합성 vs. 상속

 

14장 컨텍스트

 

15장 스타일링

 

16장 미니 프로젝트_미니 블로그 만들기

 

본문


 


 


 


 


 

▶ 유투브를 활용한 무료 강의 제공 및 저자의 질문 답변 제공

 

책의 특징

· 각 단원 별 개념 학습 및 실습으로 구성

· 미니 프로젝트도 수록하여, 앞서 배운 리액트 개념을 직접 적용해 볼 수 있다.

· 저자가 유투브를 통한 무료 강의와 질문 답변이 최고의 장점이라고 생각한다.

 

추천 독자

· 리액트를 처음 접하는 입문자

· 웹 개발을 위한 기초 내용을 배운 적이 없거나 웹 개발 경험이 없는 일반인

· HTML과 자바스크립트, CSS의 기초는 알고 있는 프론트엔드 개발자

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

IMG_4626.JPG

 

한빛미디어에서 펴낸 “소플의 처음 만난 리액트”를 읽어보았습니다. 책 제목에서 알 수 있듯이 리액트를 처음 만나는 입문자에게 정말 좋은 책이라고 할 수 있겠습니다. 요즘 IT 개발쪽으로 직종을 전환하여 개발자가 되시는 분들이 많은데 그런분들이 읽으셔도 충분히 신입 리액트 개발자가 될 수 있겠다라는 생각을 책을 읽으면서 했습니다. 저는 리액트를 실무에서 조금 사용해 보았었는데 프로젝트가 중단되는 바람에 한동안 리액트를 사용하지 않았었습니다. 시간이 지나 다시 리액트를 사용해야 할 때가 와서 리액트 개념들을 리프레시 하는 마음으로 책을 읽었습니다. 예전에 리액트를 사용하면서 이해하지 못했던 개념들이 많았는데 이번에 그 궁금증들을 해결 할 수 있어 좋았습니다. 챕터마다 실습을 통해 배운 내용을 사용해 볼 수 있었는데 이렇게 직접 실습을 하게 되면 기억에도 오래 남고 실무에서도 큰 도움이 되겠다 생각했습니다. 코드의 양이라던가 텍스트 컬러 등이 적절하여 부담감 없이 책을 읽을 수 있는 점도 추천드릴 포인트입니다. 책 내용을 복습하기 위해서 저자의 무료 동영상 강의를 시청하는 것도 좋겠습니다. 차근차근 챕터를 클리어하시고 마지막 미니 프로젝트까지 완료하시면 리액트 개발자로 충분히 명함을 내밀어도 되실 듯 합니다.

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.”

 


"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

제목 : 소문난 명강의 소플의 처음 만난 리액트


리뷰 요약

리액트를 배우려고 하는 초심자에게

강추 하는 입문서적!

 

 

이 서적의 핵심

 

1. 입문자 또는 초심자를 위한 책이기 때문에,

내용이 쉽게 구성되어있고,

요약 & 정리가 잘 되어있음.

- 0장, 1장은 웹 개발을 좀 해봤거나

'html로 화면 출력정도는 할 수 있다!' 하면

넘어가도 상관없는 정도의 수준으로 매우 쉽게 구성되어 있다.

2장부터 리액트에 대해 설명하는데, 처음 접하기 때문에

아리송한 내용들, 조금 장황하게 설명된것 같다 생각했던 부분들도

마지막 부분에 요약으로 간단하게 써 있기 때문에 편하게 볼 수 있는 듯 하다.

 

 

2. 코드와 주석만을 활용한 설명이 아닌,

비유가 될 수 있는 그림들을 활용하여

쉽게 설명 하려고 노력한 흔적이 보임.

- 리액트 네이티브를 먼저 접했기 때문에 리액트 서적은 많이 보지 못했지만,

리액트에서 활용되는 개념들을 아기자기한 그림으로 나타내 쉽게 설명한다.

 

 

3. 기존에 사용되던 기술을 언급하면서 '지금은 안쓰지만...' 이 아닌

'왜 이렇게 변화했는가'를 알려주며 기초를 탄탄하게 만들어 줌.

- 리액트 네이티브를 배우면서 가장 당황스러웠던것 중 하나가

'함수'와 '클래스' 컴포넌트 두가지로 코드를 구성할 수 있다는 것이었다.

어떤 블로그 설명에선 최신형인 함수 컴포넌트를 예로, 또 어떤 곳에선 클래스 컴포넌트로...

혼자 공부하면서 두가지 스타일에 맞추기 너무 힘들었고, 원하는 정보를 찾기가 어려웠다.

하지만 이 책에서는 '왜 지금은' 함수 컴포넌트를 쓰는지를 설명하여

리액트가 추구하는 방향이 무엇인지를 알게 함으로써

조금 더 리액트를 쉽게 이해할 수 있게 한다.

 

 

4. 중요한 것, 어려운 것이 무엇인지 확실하게 알고 있다.

- 학생 때 안드로이드를 배우면서 가장 이해가 안갔던 것이 '생명주기'를 공부하는 것이었다.

'개발만 잘하면 됐지...'라고 생각하며 코드 작성에만 몰두하던 시절이 있었는데,

우리는 코드만 치는 '코더'가 되는것을 목표로 하는게 아닌

생각하고 창조하는 '개발자'가 되는것이 목표가 아닌가?

그 때 가장 필요한 것 중 하나가

내가 사용하고 있는 기술(프레임워크, 라이브러리 등)에 대해 잘 이해하는것이 아닐까 싶다.


'어디서 시작해 어떻게 끝나고 중간에 이런 기능은 이런식으로 동작하게 한다.'

라는것을 이해하는 것은 누군가의 노력에 산물을 사용하며 시간을 아끼기 위해선 필수적인 코스라고 생각한다.

제작자의 의도를 파악하고 정답을 맞춰 나가는 시험처럼,

우리 개발자들이 하는 개발이란 모두 시험을 보고 있는것이 아닐까?


그리고 '훅(Hook)'

리액트 16.8버전부터 등장한 개념으로 최신 리액트를 개발한다면 필수불가결한 요소이다.

이 친구를 이해하면 리액트를 마스터(?) 했다고 봐도 되지 않을까 싶은데...

되지도 않는 영어를 갖고 레퍼런스 사이트에 적혀있는 영어을 해석하며

개발을 하다보면 '왜 여기선 안돼?', '이건 왜 이렇게 동작하지?' 같은 상황이 등장하기 때문에

숙련된 경험자의 꿀팁들도 잘 읽어 내 것으로 만들어보자.

꾸르팁(?)

마무리

 

리액트 네이티브를 처음 배우는 사람에게도 추천.

리액트를 배우기 전, 리액트 네이티브를 사용하기 위해 먼저 배웠던 적이 있다.

리액트 네이티브를 처음 배울 때 가장 많이 봤던 말이

'리액트 네이티브랑 리액트는 조금 다르니까 따로 공부해도 된다'라는 것이었다.

분명 동작환경이나 많은 것이 다르지만 리액트 '문법'에 한정해선

이 책을 통해 기초를 배우면 매우 좋을 것 같다라고 리액트 초보자지만 주장해본다..!


그리고 이 책을 읽으며

네이티브를 그렇게 깊게 하진 않았지만,

리액트의 문법과 기술들이 대부분 사용되기 때문에

'그 때 이 책이 있었다면 얼마나 좋았을까?' 하는 생각이 들었다.


잘 짜여진 교과서와 같은 책.

위에서도 말했지만 입문자에게 친절하다.

사실 실력이 그렇게 뛰어나지 않아 난이도가 중급(?) 이라고 칭하는

수준 이상의 책들은 많이 읽어보지 못했지만,

이정도면 리액트의 교과서라고 해도 되지 않을까 싶다.


무엇이 어려운지 알고 '알고 있는 사람'의 입장이 아닌

머리에 '리액트'라는 개념이 없는 사람들이

어떤 시선으로 바라볼 지를 생각하고

집필한게 아닐까 하는 생각이 들었다.

'친절하다' 라는 말이 어울리는 교과서 같은 책이기 때문에

다시한번 리액트를 처음 배우는 사람들에게 추천한다.



자바스크립트 UI 라이브러리 중에서

가장 많이 사용하는 리액트를

자유자재로 활용할 수 있을 것 같다.

 

처음 배우는 사람에게 매우 적합하다.

 

 

소플의처음만난리액트.jpg

 

개발 환경 설정부터

각 요소별 중요 개념을 단계별로

필수적 내용만을 압축해서 설명해주니

어떻게 동작하는지, 왜 사용하는지 알 수 있다.

 

리액트 웹 애플리케이션 개발의 전체 흐름을 알고

복잡한 웹사이트를 쉽고 빠르게 구현할 수 있다.

 

HTML과 자바스크립트, CSS까지

미니 블로그를 만들어보며

각종 컴포넌트를 개발해 볼 수 있다.

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

 



제목을 잘 읽을 필요가 있다.

개발자가 거지 같다거나

개발자는 구걸이나 하라는 말이 절대 아니다..+_+

(진짜 아니다.)

 

 

'내가' 개발자 분들에게 맨날 구걸하러 다닌다는 뜻이다..ㅜㅠ

 

 

비 개발직군 출신으로 일을 하다보면

문득문득 만들어서 테스트해보고 싶은 아이디어들이 생기게 되는데

이게 회사일이면 그냥 미팅하고 업무할당해서 진행하면 되지만

개인적인 호기심에서 비롯된 것들은 친분이 있는 개발자 분들에게 부탁을 드려서 했어야 했다.

제목에서는 구걸이라고 했지만 실제로도 구걸에 가깝다..ㅜㅠ 점심과 커피를 수시로 조공해서 부탁한다..

 

 

보통 이런일이 진행될 때의 대화는 아래와 같다.

 

 

나 : 이런 서비스 하나 있으면 대박날것 같지 않아요?

개발팀장 : 뭐.. 좋아하는 사람들은 있겠네요..

나 : 그럼 이 핵심 기능만 간단하게 만들어 보고 싶은데.. 많이 복잡할까요?

개발팀장 : 아니 뭐.. 그냥 리액트로 금방 작업하지 싶은데..

나 : 그럼 한번 만들어 봅시다..+_+ 제가 밥살께요.. 아니 이거 대박나면 지분 나눠드릴께요!!

개발팀장 : 일단 급한일좀 처리하고 둘러볼께요..

 

 

일주일 뒤

 

 

나 : 팀장님 혹시 지난번에 이야기한거.. 한 번 생각은 해 보셨어요?

개발팀장 : 아.. 맞다.. 각잡고 하면 하루이틀이면 만들것 같은데... 통 시간이...

나 : 아 그러시구나... 시간날때 한 번 부탁드려요~!!!

 

 

일주일 뒤

 

 

나 : 혹시 그 리액트 배우려면 어떤게 제일 좋아요?

개발팀장 : 아.. 그 전에 자바스크립트도 배워야 되는데..

나 : 그럼 자바스크립트는 뭐가 좋아요? 강의나 책 좋은거 있을까요?

개발팀장 : 아.... HTML 기초도 좀 알아야 되는데..

 

 

그래서 답답해서 내가 고른 이 책

 

KakaoTalk_Photo_2022-06-20-15-23-12 Large.jpeg

 

맨날 뭐 좀 만들어 보려면 리액트로 만들면 금방이라고

이것도 리액트 저것도 리액트

뭔놈의 내가 구현해 보고 싶은건 다 리액트로 만든다고해서

답답해서 내가 배워보려고 선택한 이책!!

 

 

이 책에서 가장 마음에 들었던 부분은 HTML 및 자바스크립트에 대한 내용을

20장 정도에 싹 정리해 준다는 것

 

 

먹고 살기도 바쁜에 어느천년에 HTML 배우고

어느천년에 자바스크립트 배워서 리액트 공부 시작하겠는가

더군다나 나는 개발자로 먹고 살것도 아닌데 말이다!!

그냥 내가 필요한것 간단하게 만드는 수준이면 충분하단 말이지!!

 


image Large.jpeg

 

심지어 리액트의 단점이 방대한 학습량이라는데

그마저도 핵심만 알려주는 집필에 의해 이 책의 장점으로 승화 시키고 있다.

물론 이 책 다 보고 '뭐 이걸로는 만들 수 있는게 없는데?' 할지도 모른다.

하지만

시작부터 질릴만큼 투머취한 학습 분량만큼 흥미를 떨어뜨리는 것은 없다.

일단 시작은 가볍게!!

하다가 더 궁금한 부분이 있으면 추가로 파고 들도록 한다!!

 


image (2) Large.jpeg

 

 

또 하나의 장점은 각각의 챕터에서 하는 실습들이 정말 간단간단 하다는 것이다.

이건 책 끝부분까지도 일관되게 적용이 된다.

 

 

다만 이렇게 간단간단하게 개별 요소들에 대한 학습은 손쉽게 진행되는데

이런 것들을 복합적으로 조합해서 내가 진짜 만들고 싶은 페이지를 만들려고 했을 때에는

좀 막막한 부분이 있었다..

 

 

그리고 책을 학습해 나가면서 느낀 부분은

개념적인 부분을 설명할 때 적절한 비유와 사례 / 예시를 들어가며 설명해서 이해하기 참 좋았다.

설명 또한 군더더기 없이 핵심만 간결하게 기술해 두어 짬짬히 공부하기 좋은 편이다.

특히 아래 사진처럼 각 챕터별로 구조를 시각적으로 잘 정리해 두었고

 

image (3) Large.jpeg

 

 

중간중간 갈무리가 필요한 부분은 요약정리가 있는 것도 장점이다.

 

 

또한 영상으로도 학습할 수 있는 강의 유튭 채널이 있는 것도 장점이나 뭐 딱히 영상 설명이 없어도 책만으로도 공부하기 어렵지 않았다.

 

 

하지만 이 책 한 권을 보았다고 해서

동적 웹사이트를 자유자재로 다룰 수 있는 것은 아니었다.

무엇보다도 내가 만들어보니 정말 보기에 이쁘지 않은 결과물이 나왔다..ㅜㅠ

결국 스타일링에 대한 공부와 추가로 다양한 기능을 한페이지에 적절하게 구현해 넣는 것은 더 많은 학습을 필요로 했다.

 

 

그럼에도 불구하고 일단 시작할 수 있었다는 것만으로도 충분한 가치가 있다.

왜.냐.하.면.

 

 

내가 누더기 처럼 만들어서 개발팀장님에게 봐달라고 하면

'아.. 그냥 제가 만들어 드릴께요.....' 해주기 때문이다..+_+ㅋㅋㅋㅋㅋㅋㅋ

 

 

하.지.만.

이제는 개발팀장님이 짠 코드를 조금씩 조금씩 이해하기 시작했고

간단한 수정 정도는 할 수 있게 되었다!!

 

 

이제 조금만 더 공부하면 혼자서도 만들수 있지 않을까?



간단한 환경설정과 리액트의 ABC 내용을 담고 있습니다. 내용도 잘 읽히는 편입니다. 

 

B9365371874_l.jpg

 

 

대상 독자는?

최근 프론트앤드에 대해 관심을 가지게 되어 해당 책을 요청하게 되었다. 해당 책은 제목에서 알 수 있듯이 프론트앤드 지식이 거의 없는 나와 같은 사람에게 적합한 책인 것 같다. 초보자들이 궁금해 할 것 같은 용어들을 이해하기 쉬운 적절한 예시를 들어주어 이해하기에 좋았던 책인 것 같다.  

그림1.png

 

무엇이 좋았는가?

  1. github, youtube, 인프런 등 다양한 교육자료를 추가로 제공해줌으로써 다양한 방식으로 지식을 습득할 수 있게 도와주는 점이 좋았던 것 같다.
  2. 리엑트는 메타에서 개발한 소프트웨어라는 점을 언급해 줌으로써 다양한 프론트엔드 언어 중 왜 리엑트를 배워야하는 것인가 잘 제시해 준 책인 것 같다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

처음 프로그래밍을 공부하시는 분들은 어떤 방향으로 공부해야 할 지 많은 고민과 걱정에 시간을 할애합니다. 그러는 분들에게 저는 프로그래밍을 공부하시는데 있어서 시각적으로 먼저 결과물을 확인할 수 있는 Front end 웹개발을 추천드립니다.

본 책에서는 웹프론트엔드의 기본을 시작으로 간단한 예들을 보여주고 있습니다. 그리고 리액트가 왜 유용한지와 공부하기 전에 선행되어야 하는 길잡이까지 제공하는 점이 매력적 이었습니다.

이전에는 HTML, CSS, Javascript를 통해 Front-end 웹개발을 하였다면, 현재는 React를 통하여 우리가 일상생활에서 많이 접하는 웹페이지들을 손쉽게 구현하고 사용자 입장에서 보다 눈에 잘들어오는 웹페이지 및 랜딩 페이지를 만들 수 있다 생각이 듭니다.

마지막으로 좋은 책 제공과 기회를 주신 한빛미디어 담당자 분들께 감사 드립니다. 7월에도 내용이 탄탄한 도서를 읽고 빨리 리뷰를 남기고 싶습니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

 

소개

리액트는 메타(구 페이스북)에서 만든 오픈소스 자바스크립트 UI라이브러리입니다.

리액트의 장점은 빠른 업데이트와 렌더링 속도로 볼 수 있습니다. 리액트는 빠른 업데이트를 위해서 내부적으로 Virtual DOM 이라는 것을 사용하며 업데이트를 해야 하는 DOM 요소를 찾아서 해당 부분만 업데이트 하기 때문에 리렌더링이 잦은 동적인 모던웹에서 엄청나게 빠른 퍼포먼스를 발휘합니다.

또한 컴포넌트 구조로 재사용이 용이합니다.

HTML 파일 대신에 JSX(JavaScript eXtension) 파일을 사용하게 되는데 HTML 과 비슷하지만 XML을 기반으로 한다는데 차이가 있습니다.

 

구성

각 장의 구성은 미리 보기를 통해서 이 장에서 배울 내용을 살펴 보고, 개념을 정확히 알아보고 실습을 통해서 개념을 정리 하였습니다.

1장~3장 에서는 리액트가 무엇인지 살펴 보고 사용하기 위해서 프로그램 설치와 HTML 대신에 JSX 파일을 사용하는 법을 다루고 있습니다. JSX 파일이 무엇인지 JSX 파일을 사용함으로 리액트를 쉽게 접근 할 수 있는 방법을 설명하고 실습을 하면서 JSX파일을 이용해서 리액트를 쉽게 접근 할 수 있음을 보여 줍니다.

4장~5장 에서는 리액트의 가장 기본적인 요소인 엘리먼트와 컴포넌트를 다루면서 리액트 개념의 기본을 다지고 있다. 하나 하나의 예를 통해서 리액트에서 가장 중요한 컴포넌트의 개념을 이해 할 수 있고 이 개념을 이용하여 확장하는 방법을 살펴 볼 수 있다.

6장에서는 어느 프로그래밍 언어에서든 상태와 생명주기를 통해서 어느 시점에 프로그래밍을 해야 하는지를 알아야 하는데 리액트의 생명주기와 상태 함수를 사용하는 법을 다루고 있습니다. State를 변경 할 때 마다 리렌더링 되는 부분을 이용해서 메시지를 하나씩 출력 하는 방법을 살펴 보면서 실시간 채팅앱을 만드는 원리를 살펴 봅니다.

7장~8장에서는 훅과 이벤트 처리 방법을 이용해서 어떤 이벤트가 입력 되었을 때 데이터를 전달하고 처리 하는 과정들을 담았습니다.

11장에서는 우리가 알고 있는 HTML 을 리액트에서 처리하는 방법을 다루고 있습니다.

12장에서는 하위컴포넌트가 부모컴포넌트의 state 를 공유해서 사용하는 방법을 다루고 있습니다. 리액트는 이러한 state를 공유 함으로써 컴포넌트를 최대한 작게 쪼개서 재활용이 가능한 형태로 개발을 할 수 있습니다

13장~14장은 여러개의 컴포넌트롤 합치는 방법과 부모의 속성을 물려받는 상속,컨텍스트를 활용하여 데이터를 컴포넌트에 잔달하는 방법 등을 살펴 봅니다. 

15장에서는 리액트에서 CSS를 사용하여 폼을 꾸미는 방법을 살펴 봅니다.

16장에서는 15장까지 배운 내용을 이용하여 나만의 미니 블로그를 만들어 보면서 배운 내용을 활용하는 방법을 살펴 보게 됩니다.

 

서평

리액트가 웹프로그래밍의 일종이라고 생각해서 웹서비스를 이용해서 프로그래밍 하는 줄 알았는데 전혀 다른 느낌이어서 처음 책을 읽고 실습할때 살짝 당황을 했었는데요~

책을 차근차근 읽어 가면서 리액트의 개념을 이해하고 실습을 통해서 어떻게 사용하는지 정확히 익히다 보니 금방 친숙해 지는 느낌을 받았습니다.

 

저와 같이 Node.js 도 접해 보지 않았고 리액트도 처음 접해 본 사람들에게 처음에는 당황 할 수 있지만, 먼저 개념을 이해 해 보는 형식으로 한 단원을 모두 읽어 보신 후에 마지막 실습 파트에서 하나 하나 따라 해 보면 모든것을 이해할 수 있는 경험을 하게 될 것입니다.

4장과 5장의 엘리먼트와 컴포넌트의 개념을 이해하고 책을 읽다 보니 왜 리액트를 선호 하는지 느낄 수가 있었던것 같네요~

처음에는 리액트의 프로그래밍 언어가 생소해 보였는데 JSX 파일을 이용하여 컴포넌트를 활용하여 작성을 하다 보니 정말 간결해 지는 느낌을 받았고, 정리 되는 느낌을 받았네요~

왜 프런트엔드 개발자를 뽑는 회사에서 리액트 개발자를 선호하는지 책을 읽으면서 느낄 수가 있었던 것 같습니다.

 

이 책은 HTML/CSS 을 공부하시고 리액트를 처음 공부하시고 싶은 분들에게는 정말 좋은 안내서가 될 것 같네요.

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

  "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

리액트는 메타에서 개발한 오픈소스 자바스크립트 내 라이브러리입니다. 프론트엔드 개발자 사이에서 가장 큰 인기를 구가하고 있습니다.

이 책은 웹 서비스를 만들기 위해 알아야 할 리액트의 필수 개념에 대해 알려주고 간단한 실습을 통해 사용법을 익힐 수 있습니다.

또한, 미니 프로젝트를 통해 직접 프로젝트 기획부터 개발까지 경험해 볼 수 있기 때문에 개발자 뿐만이 아니라 디자이너나 기획자들에게 이 책을 추천합니다. https://blog.naver.com/tnsgh9603/222766590236

부록/예제소스
자료명 등록일 다운로드
DOWNLOAD 실습 화면 그림 2022-10-28 다운로드
DOWNLOAD 예제 소스 2022-10-28 다운로드
DOWNLOAD 예제 소스(리액트 버전 18 기준) 2022-10-28 다운로드
결제하기
• 문화비 소득공제 가능
• 배송료 : 2,000원배송료란?

배송료 안내

  • 20,000원 이상 구매시 도서 배송 무료
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

도서판매처

리뷰쓰기

닫기
* 도서명 :
소문난 명강의 : 소플의 처음 만난 리액트
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
소문난 명강의 : 소플의 처음 만난 리액트
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
소문난 명강의 : 소플의 처음 만난 리액트
구입처*
구입일*
부가기호*
부가기호 안내

* 온라인 또는 오프라인 서점에서 구입한 도서를 인증하면 마일리지 500점을 드립니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한되며 절판도서, eBook 등 일부 도서는 인증이 제한됩니다.

* 구입하지 않고, 허위로 도서 인증을 한 것으로 판단되면 웹사이트 이용이 제한될 수 있습니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실