React로 웹을 만들기 위한 학습방법

오늘은 사이드프로젝트로 진행했던 리액트로 웹만들었던 내용에 대해서 이야기를 해볼까 합니다. 웹은 굉장히 트렌디한 개발 영역으로 빠르게 변화하고 사람들에게 시각적으로 보여지기 때문에 재밌기도 하지만 그 만큼 버그나 에러에 민감하기도 합니다. 초기에 개발에 입문시에 크게 3가지 부류를 많이 접할 수가 있는데 그 중 하나는 웹으로 프로젝트 하는 것이고, 다른 하나는 아두이노 같은 센서들을 조합하여 프로토타이핑 하는 프로젝트, 다른 하나는 앱 개발이 그것인데요. 저의 주 전공은 C/C++/golang 등의 전형적인 개발 언어임에 웹은 과목 수강하는 정도 들었지만 중간에 그누보드 기반의 웹 페이지를 만들어 보면서 html/css/javascript와 레이아웃을 구성할 때 주의해야 하는 것들은 어느정도 감으로 알고 있습니다. 하지만 그 당시에는 굉장히 하나하나 레이아웃이나 컴포넌트를 만드는게 잔일들이 많아서 공수가 많이 들었었고 렌더링이나 여러가지 측면에서 라이브러리 접목에도 애를 먹었었는데요. 리액트는 속도면에서도 또 여러 라이브러리를 붙여가는 측면에서도 굉장히 좋다는 이야기를 들었기에 속성으로 공부하면서 프로젝트를 완성해가려고 합니다.

어떻게 공부해야 할까?

무조건 책을 사는 것보다는 온라인 무료 강의를 보면서 예제를 따라하는 것이 가장 중요하다고 생각했고 어떤 강의들을 볼수 있는지 찾아 보았습니다. 그리고 어떤 개발 툴로 하는 것이 효과적인지도 같이 찾아보았는데요. 기초 강의는 아래 3가지 정도 추려볼 수 있었습니다.

• 생활코딩 리액트 : 빠르게 리액트의 중요한 요소들을 집어 준다 설명이 자세하고 천천히 해서 필강
  • React - 생활코딩
• 웹사이트 (알찬 1장을 마스터하고, 리덕스로 넘어가면서 API 등 붙일 때 필독)
  • 벨로퍼트와 함께하는 모던 리액트
• 파이어베이스 연동 프로젝트 로그인 서비스만들기 기초(스텝바이스텝으로 되어있어 볼만하다 다만 버전이 구버전 것들이 있어서 에러날 수 있음에는 염두에 둘 것)
  • 트위터 클론코딩 - 노마드 코더 Nomad Coders

React - 생활코딩

벨로퍼트와 함께하는 모던 리액트 · GitBook

트위터 클론코딩 – 노마드 코더 Nomad Coders

물론 모든 강의를 다 보면 좋겠지만 시간은 모두에게 공평하기 때문에 핵심적으로 들을 필요가 있는 것들 우선 들어주시고 자신이 만들 사이드프로젝트의 기능별로 필요한 게 더 많이 있다면 그 부분부터 공략하시는게 좋습니다. 리액트라는 것이 지속적으로 발전하고 있고 그에 따라 라이브러리도 빠르게 변화하고 있어서 다 알았다고 할지라도 버전 업하면 안되는 듯 문제가 발생할 수 있기 때문에 라이브러리 버전관리도 중요하구요. 따라서 가능하면 초반에 기초 강의를 들을때 어떠한 개발환경을 주로 설정해서 설명하는지도 유심히 볼 필요가 있습니다. 나중에 이러한 조그만 차이들이 개발 속도에 영향을 반드시 주거든요.

중급 강의는 아래 강의 정도인데, 초급강의는 무료인 반면 중급강의는 유료이기 때문에 어느정도 할 줄 안다고 생각 했을때 구입하시는것을 추천합니다. 강의만 잔뜩 쌓아놓고 안보면 마음만 더 아프잖아요!.

• React JS 마스터클래스 - React Router, Styled Component, React Hook, ApexChart(Data Visualization) 등
  • React JS 마스터클래스 - 노마드 코더 Nomad Coders
• 만들어보며 익히는 React & Reduct
  • 김민태의 프론트엔드 아카데미 : 제 2강 만들어보며 이해하는 React & Redux | 패스트캠퍼스

김민태의 프론트엔드 아카데미 : 제 2강 만들어보며 이해하는 React & Redux | 패스트캠퍼스

React JS 마스터클래스 – 노마드 코더 Nomad Coders

어떤 개발 도구로 할까?

개발 도구는 웹개발을 이미 해보신 분들은 본인과 잘 맞는 도구들이 있을 건데요, 무료이면서 플러그인들을 잘 적용할 수 있는 대표적인 것은 아무래도 VSCode인 것에 이견이 없습니다.

Download Visual Studio Code - Mac, Linux, Windows

Download Visual Studio Code - Mac, Linux, Windows

Prettier와 ES Lint를 기본적으로 설치하고 사용하면 개발효율을 굉장히 높일 수 있을합니다. 다만 강력하게 룰을 적용하면 오히려 개발 할 때 귀찮아 질 수 있으니 적당한 예외 룰을 적용하는 것도 필요하구요.

리액트의 핵심은?

모든 개발언어에 주요한 핵심이 있죠. golang의 경우 고루틴과 채널 이듯이 리액트의 경우에는 컴포넌트별 통신을 어떻게 하느냐가 초급에서 중급으로 넘어가는 요소로 보입니다. 물론 css를 적용하는 방법으로 scss나 스타일드컴포넌트 등 재활용하는 방법 또는 코드를 간결하게 만드는 방법도 중요하고 이 외에도 중요한 요소들이 있지만 단기간에 모든것을 다 잘 하기는 어렵겠죠? 그리고 리액트는 원래 javascript로 구성되어있지만 typescript로도 가능합니다. javascript에 비해서 type이 있는 javascript이다보니 잠재적인 결함이 좀더 적고, 속도면에서 유리할 것으로 보이는데요, 그러다보니 타입스크립트라는 언어 자체에 대해서도 이해할 필요가 있어 보입니다. 물론 예제 따라하면서 하나하나씩 쌓아가는 것도 충분합니다. 저도 리액트나 typescript 책은 지금 전혀보지 않고, 저와 같이 블로그를 작성해주신 분들의 도움과, 여러 무료강의와 웹 내용들을 참고로 빠르게 공부하며 적용해 나가고 있습니다. 훅이나, 리덕스, 리코일등 다양한 개념이 많이 나오지만 겁먹지 마시고 재미를 붙여보면서 하나씩 해보면 좋겠습니다.  그러면 이제 하나하나씩 리서치한 내용들을 다음 글부터 적어 나가도록 하겠습니다. 리액트를 이용한 사이드 프로젝트 대쉬보드 만들기! 기대해주세요!