그래서 그 유명한 React가 대체 무엇인가요?

React는 싱글 페이지 애플리케이션에서 사용자 인터페이스를 만들기 위해 사용하는 JavaScript 라이브러리에요. 무슨 뜻인지 너무 어렵나요? 쉽게 말해, JavaScript를 더욱 효율적으로 사용할 수 있는 문법 모음집이라고 생각하면 됩니다. HTML로 웹사이트의 뼈대를 만들고, CSS로 뼈대에 살을 붙였다면, JavaScript로 웹사이트의 활발한 움직임을 만든다고 생각하시면 좋을 것 같아요. 즉, 사용자가 UI 조작으로 웹사이트와 상호작용할 수 있는 동적인 웹사이트를 만들기 위해 JavaScript가 필요한 것이죠. 그리고 React는 JavaScript의 수많은 문법을 편하게, 효율적으로 사용하기 위해 도움을 주는 라이브러리입니다.

여기서 잠깐! 라이브러리란?
자주 쓰는 함수를 가공해 놓은 저장 공간입니다. 다른 개발자가 미리 만들어 놓은 유용하고 효율적인 코드들을 라이브러리에서 꺼내어 사용할 수 있어요. 라이브러리를 통해 개발 효율을 상승시킬 수 있기 때문에 많은 개발자들이 프로그래밍 언어와 더불어 라이브러리를 함께 사용한답니다.

React는 2013년 페이스북이 자사의 서비스 UI를 효율적으로 만들기 위해 배포한 라이브러리이며, 현재는 Airbnb, Netflix 등 전 세계를 선도하는 서비스들이 React를 사용하고 있습니다. 페이스북에서 배포했기 때문에 더욱 빠르게 퍼질 수 있지 않았을까요? 실제 React는 JavaScript 프레임워크 점유율에서 수년간 1위를 차지하며 개발자들의 실사용 점유율이 가장 높은 라이브러리라고 해요. 자연스럽게 취업시장에서도 프론트엔드 개발자의 자격요건으로 React 사용 경험을 가장 많이 요구하고 있습니다. 프론트엔드 개발자를 꿈꾸고 계시다면 꼭 한 번쯤 경험해봐야겠죠? 그렇다면 React의 어떤 특성에 사람들은 열광하는 것인지, 어떤 순서대로 공부해야 하는지 함께 알아보겠습니다!

React의 대표적인 매력 3가지! 

1. Independent Components

React는 UI(View)를 여러 컴포넌트로 쪼개어 만듭니다. 한 페이지 내에서 여러 각 부분들(ex. 버튼, 입력창, 표 등)을 독립된 컴포넌트로 만들고, 이를 조립해 화면을 구성하는 것이죠. 컴포넌트 단위로 쪼개져 있기 때문에 전체 코드를 파악하는데 상대적으로 유용하다는 장점을 갖게 됩니다. 

무엇을 의미하는지 잘 모르시겠다고요? 부분 수정이 필요할 때 전체 페이지에서 수정할 필요 없이, 컴포넌트 하나를 수정하면 전체 페이지에 반영시킬 수 있다는 뜻입니다. 따라서 애플리케이션이 복잡해지더라도 코드의 유지, 보수, 관리에 용이하다는 장점을 가지고 있습니다. 이런 특징은 규모가 큰 프로젝트일수록 적합하겠죠?

2. One-way data flow

React는 데이터가 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. 양방향 데이터 바인딩은 코드의 양이 줄어드는 대신, 규모가 커질수록 데이터의 흐름을 추적하기 힘들어요. 그러나 단방향 데이터는 복잡합 앱에서도 데이터 흐름에서 일어나는 변화를 예측할 수 있어 데이터 흐름의 이해와 관리에 용이하다는 장점을 가집니다. 앞서 살펴본 독립된 컴포넌트의 장점처럼 단방향 데이터 흐름 역시 규모가 큰 프로젝트에서 장점을 발휘한다는 특징을 가지고 있어요. 이때 양방향 데이터에 비해 코드의 양이 복잡해질 수 있다는 단점을 가지게 되지만, React에서는 이를 VDOM으로 보완해 주고 있습니다.

3. VDOM (Virtual Document Object Model)

DOM은 코드 내에 원하는 위치에 접근하기 위한 하나의 방식입니다. 기존의 방식은 DOM 객체의 변화를 감지하면 DOM을 다시 그리는 방식이었어요. 이렇게 DOM을 다시 그리게 되면 브라우저의 리소스를 사용하기 때문에 성능의 이슈가 생기게 됩니다. React는 가상의 DOM을 만들어 변경사항이 있을 때, 전체가 아닌 해당 부분만 실제 DOM에 반영하는 방식으로 작업을 수행하여 브라우저 리소스를 최소화하고 효율성과 속도를 높입니다.

대규모 프로젝트에 사용하기 적합한 특성을 가진 React의 특징을 알고 나니 기업들이 왜 react 사용 경험을 개발자 채용의 주요 자격요건으로 요구하는지 알 것 같지 않나요?

React 개발자가 되기 위해 무엇을 공부해야 할까요?

앞선 본 React의 장점 덕분에 프론트엔드 개발자들은 JavaScript의 라이브러리 중 React를 가장 많이 이용하고 있어요. 혹시 프론트엔드 개발자가 목표이지만 무엇부터 시작해야 할지 고민인 분들이 계신가요? 이제는 개발자로서 필수적으로 공부해야 하는 React!  단계별 학습 방법을 제시해드리겠습니다.

1단계. 웹의 기초인 HTML과 CSS

HTML은 웹 개발자를 목표로 입문한다면 아마 모두가 한 번쯤 다뤄봤을 마크업 언어라고 생각하는데요, 가장 기초가 되는 만큼 그 개념의 기반을 튼튼히 다져야 합니다. HTML은 웹페이지를 구성하는 골격을 만들기 위해 사용합니다. 텍스트, 이미지 등 웹페이지에 담기는 기본적인 정보를 표현할 수 있어요. CSS는 HTML로 만든 웹 페이지를 디자인적으로 꾸미기 위해 사용합니다. 골격을 만들고 살을 붙여 조금 더 풍부해 보이도록 하는 역할이라 생각하면 좋을 것 같아요. 글자의 크기와 색상, 배열 등 문서의 스타일을 표현할 수 있습니다.

모든 언어가 그렇듯, HTML과 CSS를 공부하실 때도 개념을 눈으로만 따라가는 것이 아니라, 실습을 통해 경험적으로 학습하는 것을 추천드려요. 아래 강좌들을 통해 HTML, CSS의 개념부터 프로젝트를 통한 실습까지 학습하실 수 있습니다.

추천 강좌

• 한 눈에 끝내는 HTML5/CSS3
• 그림으로 배우는 HTML-CSS, 입문!
• 김버그의 CSS는 재밌다 – 기초부터 실무 레벨까지
• 김버그의 HTML은 재밌다 – 기초부터 실무 레벨까지

2단계. 동적인 웹 페이지를 위한 JavaScript

HTML과 CSS를 통해 웹 페이지의 뼈대를 만들었다면, JavaScript는 사용자가 UI를 조작하며 웹사이트와 상호작용하기 위해 사용됩니다. 여러분이 페이지 스크롤을 내리거나, 팝업창을 클릭하는 등 웹페이지의 동적인 사용에 필요한 언어가 바로 JavaScript에요. JavaScript에 대한 기초적인 지식이 선행된 후, 웹 프레임워크나 라이브러리를 통한 효율적인 개발 환경에 입문하시는 것을 추천드려요.

추천 강좌

• 처음 시작하는 JavaScript Programming
• 프레임워크를 위한 JavaScript ES6
• React로 가기 위한 첫 걸음, Vanilla JS 기초

3단계. React 입문과 활용

웹 페이지를 만드는 데 필요한 기본적인 언어와 지식을 학습하셨나요? 이제 React 라이브러리를 통해 실제 프로젝트를 진행하며 경험적으로 체험할 수 있는 실습형 강좌 위주로 수강해보세요. 또한, React는 JavaScript의 라이브러리이지만 TypeScript 역시 React에서 사용할 수 있습니다. 

여기서 잠깐! TypeScript란?
TypeScript는 MS에서 만든 프로그래밍 언어로, JavaScript를 기반으로 개선사항이 추가된 언어에요. 최근 개발자 사이에서 뜨거운 감자인 TypeScript는 사용률과 만족도 측면에서 빠른 성장세를 보이고 있어 가장 주목해야 할 언어로 꼽히고 있습니다.

JavaScript에 어느 정도 익숙하신 분 혹은 TypseScript에 대한 기초적인 이해를 원하시는 분들은 React와 함께 학습해보는 것도 좋을 것 같아요.

React가 무엇인지 감이 오시나요?

지금까지 사람들이 React에 열광하는 그 이유와 React를 위한 단계별 학습 방법을 살펴봤습니다. 구름EDU에는 위에서 소개해드린 강의 외에도 웹 개발자로 성장하는 데 도움이 될 수 있는 강의들이 더 많이 준비되어 있어요. 입문자를 위해 기초를 튼튼히 세울 수 있는 강좌부터 따라 하면서 배울 수 있는 클론 코딩까지. 매달 다양한 주제로 돌아오는 ‘이달의 강좌’와 함께 개발자로서 폭풍 성장해 보세요!

구름EDU에서 이달의 강좌를 확인해보세요

The post 웹 개발자라면 한 번쯤 써본다는 React! 개념부터 학습 방법까지 한눈에 살펴보자! appeared first on 구름 공식 블로그 (goorm blog).

바로 ‘버그 없이 웹 개발‘ 강좌를 기획해주신 박성민님인데요!
쉽지만 너무 기본적이고 실무와 동떨어진 프로젝트에서 한 걸음 더 나아가 클라이언트부터 서버까지 연결된 실용적인 웹 애플리케이션을 만들어볼 수 있는 강의를 만들어주셨어요

‘버그 없이 웹 개발‘ 강좌를 구성해 주신 박성민님을 만나 이야기를 나누어 보았습니다!

: 안녕하세요 박성민님, 구르머분들께 자기소개 부탁드립니다!

: 안녕하세요 박성민입니다!
저는 소프트웨어 공학을 전공해서 졸업 후 쭉 개발자로 일을 해오고 있습니다.

처음에는 C# 를 활용한 게임 개발을 조금 하다가 웹개발 일을 맡게 되어 지금까지 실시간 영어 첨삭 서비스, 제3자 물류 시스템 등의 프로젝트에 참여했습니다.

오픈소스 생태계에도 관심이 많아 사용했던 오픈소스들에 코드나 재정적으로
기여하려고 노력하는 편입니다.

: 이번에 공개해 주신 [버그 없이 웹 개발] 강좌는
웹 개발자로 커리어를 시작하고 싶거나, 취미로 나만의 앱을 만들고 싶은 분
혹은 리액트(React)에서 타입스크립트(TypeScript)가
어떻게 사용될 수 있는지 궁금한 분들에게 추천한다고 설명해주셨는데
혹시 이 강좌를 구성하게 된 동기가 있다면 무엇인지 궁금합니다!

: 제가 실무에서 사용해보고 효율적이라고 느꼈던 기술스택인
React와 TypeScript를 아직 경험해보지 못한 분들에게 소개해보고 싶었습니다.

React의 경우 HTML & CSS & JS 를 한 군데로 응집시킨 컴포넌트를 기반으로 한 개발을 유행시켜 복잡한 애플리케이션의 개발을 크게 단순화 시켰고,

GraphQL은 데이터 요구사항(Data Requirement)까지 컴포넌트화 하는 것을 가능하게 했다고 볼 수 있습니다.

결과적으로 앱 내에서 변경사항이 발생하더라도 모든 컴포넌트가 느슨한 연결로 각자의 책임을 맡고 있기 때문에, 부작용(side effect)을 최소화하는 효과를 내는 것입니다.

마지막으로 TypeScript 의 타입 안전성이 각 컴포넌트마다 아주 작은 테스트 케이스들을 만드는 효과를 주고 GraphQL의 Type 시스템을 활용하여 서버에서 오는 응답에 대한 타입까지 공짜로 사용하도록 해줍니다.

저는 최근 1년간 위 스택으로 개발해오면서 엄청난 생산성 향상 뿐만 아니라 만족스러운 개발자 경험까지 얻으며 즐겁게 일했다고 자신있게 말씀드릴 수 있습니다.

지난 1년간 웹 개발을 주제로 1:1 개인 레슨을 해오면서 자연스레 정립된 커리큘럼을 갖게 됐습니다. 구름EDU를 통해 더 많은 분들과 함께 React와 TypeScript가 가진 매력을 공유해보고 싶어 도전하게 됐습니다.

기존에 12시간 분량으로 강의하던 튜터링 커리큘럼을 정말 필요한 부분만 압축해서 전체 약 2~3시간 분량으로 제작했습니다. 서론만 길고 내용이 부실한 강의를 만들지 않으려 많이 노력했으니 궁금했던 부분에 대해서 잘 배워가셨으면 좋겠습니다.

: React와 TypeScript로 개발을 하기 전에는
어떤 스택을 사용해 프론트엔드 개발을 시작하셨는지도 궁금해요!

: 첫 웹 개발은 PHP 5.6 + JavaScript 로 전통적인 서버 사이드 앱을 만들어보며 시작하게 되었는데요, 돌이켜 생각해보면 네이티브 모듈 시스템이 없는 상황에서 덕지덕지 하나씩 의존성을 추가해 나가며 열악한 환경에서 개발했던 것 같습니다.

그러던 와중에 자연스럽게 Webpack, node, node package manager 같은 신기술에 매료되어서 JavaScript 생태계로 본격적으로 빠져들게 되었습니다. 원래 신입 때는 최신기술이 괜히 멋져 보이고 좋아 보였던 탓도 있던 것 같습니다.

그러다가 React를 접하게 되고, 그 단순함과 빠른 개발 사이클에 매료됐습니다. 덕분에 지금까지 React 와 TypeScript를 기반으로 한 다양한 기술을 활용해 개발을 진행하고 있습니다.

: 이번 강좌가 처음으로 만들어본 영상 강좌이신 것으로 알고 있어요!
혹시 구름EDU와 강좌를 만들어볼까 고민하는 분께 경험담을
한 문장으로 전해주신다면 어떤 내용일까요?

: 강좌 기획안을 구성하는 것 뿐만 아니라 컨텐츠를 만드는데 집중할 수 있도록
구름EDU의 콘텐츠 매니저분이 지원을 많이 해주셨습니다.
한 문장으로 하려고 했는데 조금 더 늘어날 것 같은데 괜찮을까요?

: 네! 당연하죠!

: 일단 영상 편집도 처음이고, 수강생 없이 혼자서만 말을 하려니 많이 어색했는데, 강좌 구성이 마무리가 되어가는 단계에 들어서면서 이것 저것 노하우도 많이 생기더라고요.

필요한 부분이 있거나 강좌 구성을 위해 논의가 필요할 때마다 구름EDU 콘텐츠 매니저님께 도움을 청했는데 저와 함께 고민해주셔서 많이 수월했던 것 같습니다.

구름EDU에서 강좌를 해볼까 말까하고 고민하는 개발자분들도 많은 것으로 아는데 용기와 시간을 갖고 시도해보시면 어떨까 합니다.

박성민님의 React & TypeScript & GraphQL 로 버그없이 빠르게 개발하기!
강좌는 구름EDU에서 만날 수 있습니다.

박성민님 GITHUB: https://github.com/ifndefdeadmau5

The post [버그 없이 웹 개발]이 하고 싶다면 박성민님의 꿀팁을 놓치지 마세요 appeared first on 구름 공식 블로그 (goorm blog).