안녕하세요. 저는 초보 자바 개발자입니다. 학원에서 자바교육을 수료한지 어언 2년이 되가고.. 이런저런 회사를 전전하며.. 개발다운 개발을 할 수 있는 회사에 일하기 위해 여전히 혼자 무언가를 배우고 개발하고.. 자바가 아닌 또다른 토이 프로젝트를 하나 만들까 하고 있습니다.
학원에서 자바를 배울때도 저는 자바스크립트를 엄청 사랑 했거든요. 그게 어언 2년전인데.. 그때 열심히 했으면 지금 좀 다르게 살고 있지 않았을까.. 뭐 그런 생각을 가끔합니다.
여튼 자바도 배워서 써먹고 싶고.. 초보시절에도 배워두면 쓸모가 많을 것 같아서 열심히 배워두고 나니.. 이젠 자바스크립트로 풀스택은 당연하고.. 모바일 앱까지 짜고 iOT에 데스크탑 앱 까지도 만들수 있으니 정말 알다가도 모를 일입니다.
또 글을 쓰다보니 서론이 길어졌습니다. -_-;; 여튼 나올때부터 엄청난 관심을 받았고.. 현재는 모두가 주목하고 있는 그 라이브러리.. React(리액트)에 대해 적어볼까합니다.
일단 저는 자바로 시작한 웹 개발자이고.. React를 프론트엔드로 한 토이 프로젝트를 만들 요량으로 이리저리 파고 있었는데.. 하다보니 프론트엔드 외에도 javascript를 풀스텍으로 채용해도 전혀 나쁠게 없다는 생각을 하게 되었습니다.
그 이유는 따로 배울 필요가 없기 때문 이겠지요. React를 위해 ES6를 조금 손에 익고 나니.. nodejs 코드를 조금만 사용해보면 바로 간단한 프로젝트를 만들정도의 러닝커브가 아주 금방 나오기 때문입니다. 아마도 이런 이유가 현재 React가 핫한 이유가 아닐까 싶습니다.
간결하고 코드가 깔끔해서 이런 저런곳에서 이걸로 코딩을 하려는 움직임이 나타나고 있지요. (모바일, 데스크탑, IOT 등등..)
이번 글에서는 React에 대해서만 언급을 해볼 겁니다. 이걸 써서 뭔가를 만들고 싶은데.. 공식문서를 보자니 영어 압박이 오고.. 한글로 된 문서를 보자니 잘 찾기가 어렵다 싶다면.. 이글이 약간 도움이 될거라.. (개인적으로) 생각합니다 ^^;
저는 아무래도 첫 언어를 자바로 시작해서 이것저것 얕고 넓게 많이 파다보니 정보를 찾고 숙달시키는데 오래 걸렸는데.. 혹시 저처럼 삽질하는 분들은 시간을 줄여보고자.. 하는 생각에..
그래서 리액트가 뭔데?
네.. 프론트엔드 라이브러리 입니다. jQuery 처럼 간단한.. script 태그로 로드해서 사용할 정도로 가벼운 녀석이었습니다.. 후에 많은 기능이 추가되면서 지금의 형태를 갖추게 되었습니다. 자바 웹 개발자라면 jsp와 같은 View를 책임지는 녀석으로 생각하면 간단할 겁니다.
리액트의 JSX는 javascript안에서 함수형 프로그래밍으로 코딩을 하고 HTML 요소를 추가하는 느낌입니다. 자바에서는 클래스와 객체로 분리를 한다면. 리액트에서는 컴포넌트로 분리를 합니다.
JSX가 처음엔 이상한 느낌을 많이 받는데... HTML의 DOCtype이라던가.. head body와 같은 불필요한 요소는 전부 필요하지 않아서 코드수가 적고 간결합니다. 또한 레이아웃을 컴포넌트라는 작은 단위로 나누어서 코딩하는데.. 이로 인해 재사용성이 상당히 좋은 편입니다. 아주 작은 단위로 잘라서 붙이는 형태로 View를 짜기 때문에 코드를 이해하고 협업하기 좋습니다.
리액트를 맛보는 방법?
예전 (http://liante0904.tistory.com/145?category=696349) 에서도 한번 언급한적 있는데.. CRUD를 맛볼수 있는 TodoList나.. 틱택토 게임을 만드는 튜토리얼이 React를 입문하는 예제로 보입니다..
react-movie-app
제 경우 접근 방법이 약간 잘못되서 튜토리얼도 여러번 해본 편인데.. 다 해본 결과... 아무것도 모르고 재밌게 입문 하기에는 제 예전글에 언급된 React로 Movie App만들기가 제일 적당한것 같습니다.
물론 이 강좌는 외부 API를 JSON으로 파싱하고 리스트로 출력해주는 간단한 강좌인데.. 일단 리액트의 개념을 먼저 이해하기 보다 코드로 먼저 직접 페이지를 만들어보고 개념이해는 그 뒤에 하는 방식입니다.
보통 웹을 기반으로한 프로젝트는 작던 크던 리스트나 배열 JSON의 형태로 여러 데이터를 출력시키고.. 특정 데이터를 선택하고 가공하는 흐름이 주를 이룹니다. 또한 여러 데이터를 출력하고 조건을 걸고 스타일을 추가해보면서 전반적인 이해를 코드 위주로 가는 방향이 아무래도 가장 접근성이 좋은 방법이 아니었나 싶습니다.
이 튜토리얼을 한번 따라가고 나면 리액트의 어떤 개념을 중점적으로 파악해야 할지가 떠오를 겁니다. (props나 states의 쓰임? 차이라던가.. 라이프 라이클, 생명주기 같은것 말이죠)
todolist, tic-tac-toe game
간단한 예제를 하나정도 해보면 아주 약간 더 복잡한 튜토리얼을 봐야겠죠.
TodoList와 틱택토 게임을 만들어 봅니다. TodoList는 대부분의 웹 라이브러리나 프레임 워크에서 CRUD를 익히기에 가장 좋은 예시로 사용 됩니다. (SI에선 게시판을, 스타트업에선 TodoList 구현이 몇일만에 가능하냐는 얘기를 질문으로 가장 많이 하죠)
TodoList는 국내에서 React로 유명한 velopert 님의 블로그가 가장 유익 하리라 생각됩니다. 올해쯤에 올라간 버전으로 강좌를 수정하셔서 어렵지 않게 따라 갈수 있으리라 봅니다. 그리고 구글에서 React를 검색하면 한글로 된 블로그가 가장 많이 검색 될테니.. 제 블로그보다 그분의 블로그를 먼저 보고 오신분들이 대부분 일거에요.
다음은 리액트 공식 튜토리얼을 번역해서 올려주신 분인데요. 워니라는 이름으로 개발 블로그를 하시는 분입니다. 작년 정도에 검색하다가 발견한 분인데.. React를 검색해보니 튜토리얼 번역을 올려두셔서 쭉 한번 따라 해본적이 있는데. TodoList와는 다르게 고민할 부분이 있어서 괜찮다고 생각했습니다.
예전에 안드로이드를 처음 배울때 토이 프로젝트로 틱택토 게임을 만들어 본적이 있어서.. 그때 생각이 조금 나기도 ㅋㅋㅋ
마지막으로는 zerocho 님의 블로그입니다. 블로그 전체를 js로 직접 만들어서 운영하시는 분인데요. 직접 블로그를 코딩해서 운영하시는 만큼 javascript에 대한 애정과 이해도가 높으셔서 자주 찾아가는 곳중 하나입니다. 이분의 React 강좌도 상당히 정리가 잘되 있어서 react-movie-app을 만들어보고 react 강좌를 정독하시면 막막한 상태에서 강좌를 보는 것보다 훨신 빠르게 보실수 있을 겁니다.
여기서 언급한 글들은 하단 출처에 적어두겠습니다.
React? npm? Redux? WebPack? Babel? 이게 다 뭔데?? 알아야 할게 너무 많아 ㅡㅡ
라고 저도 초기에 생각했었습니다. 하지만 차근차근 꼭 알아두시길 권장합니다. 아니 js 개발자라면 알게 됩니다 ^^;
js 자체는 태생이 한계와 문제점을 가지고 만들어진 녀석이라.. 이 점을 보완해줄 무언가가 필요한데. 그것들이 위에 거론된 것들입니다.
물론 이외에도 더 많지만 제가 생각하는 스케일의 토이 프로젝트를 하려면 최소한 저정도를 모르면 진행할수 없다고? 봐도 무방했습니다.
고로 저처럼 비슷한 생각을 하는 분들을 위해 정말 아주 간단하게 저기 있는 애들을 정리해 볼겁니다.
네이버 D2의 문서를 뜬끔없이 추천하게 되었는데. 대략 3년전에 작성된 글이지만 지금 읽어도 상당히 공감되고 도움이 되는 정보가 많이 있다고 생각되었고.. 이 글을 적게 된 주된 이유 이기도 합니다.
이 글을 읽고나면 내가 React로 크고 작은 프로젝트를 위해 구체적으로 생각해볼 내용들이 정리되는 느낌을 전 받았거든요. 이 글 또한 하단 출처에 적어두었습니다.
자 그럼 React를 이용하기 위해 보편적으로 많이 사용되는 다른 npm 패키지들을 하나하나 간략하게 알아보겠습니다.
자잘한 설명은 스스로 구글링해서 익히는게.. 하나하나 적어보니 글이 너무 길어져서 안되겠습니다 -_-)
Webpack - 여러 js 라이브러리, 의존성을 가진 패키지를 하나로 묶어줍니다. (네트워크 부하를 줄여주고 의존성을 신경쓰지 않아도 되며. 글로벌 오염을 방지 합니다)
RestAPI - URL에 불필요한 정보를 제거하고 Get, Post, Put,Delete 메서드를 이용해 구현합니다. (모바일앱의 증가와 오픈 API의 증가로 고안되었습니다)
Router - React는 프론트엔드 라이브러리임에도 Router의 개념이 존재합니다. REST API로 구현된 nodejs에는 view페이지를 렌딩하는 기능이 존재하지 않겠죠?
Flux - MVC패턴 처럼 Facebook에서 고안한 아키텍쳐입니다. Controller와 Model이 비대해지는 기존의 MVC패턴을 탈피하고자 고안되었습니다. 이는 찾아서 보셔야 개념이해가 빠를듯합니다 -_-
Redux - Redux는 React의 컴포넌트의 상태를 관리하기 위한 라이브러리입니다. 이건 React를 직접 좀 배우고 애플리케이션을 만들다보면 필연적으로 필요한 순간들을 느끼게 됩니다. 이유는 React의 특성상 데이터 Flow가 부모에서 자식으로 흘러내려가는데.. 부모 아래 여러 Depth의 자식이 생길때 각각의 상태를 제어하거나 이를 활용할때 계속해서 불필요하게 부모 -> 자식 -> 자식, 부모-> 자식 -> 자식으로 불필요하게 데이터가 흘러가 성능을 저하시키게 됩니다. 이를 개선하기 위해 사용합니다.
최대한 간단하게 쓰려고 했으나 길이 점점 길어져서 많이 축소하였습니다 -_-;;
토이 프로젝트를 만들고 삽질하며 빠르게 수정하고 다듬어지길 바라며 일단 포스팅을 마칩니다.
