따라하기, 실습 리액트 편
프롤로그
리액트를 배울지 말지 고려한다는 건 HTML, CSS, JS 그리고 node.js나 sql에 대한 기본적인 지식이 있는 상태일 것이다.
아니면 c나 java 또는 python을 통해 기본적인 코딩에 대한 개념이 숙지된 상태에서 보다 효율적인 코딩을 위해 새로운? 환경을 고민하는 과정일 것이다.
아마도.
https://www.youtube.com/watch?v=p1asWglxMZs
리액트와 유사한, 효율적인 코딩을 위해 활용하는 프론트엔드 라이브러리(또는 프레임워크)는
| 앵귤러 Angular | 리액트 React | 뷰 Vue |
| 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있다 | 컴포넌트 라는 개념에 집중이 되어있는 라이브러리이고 HTTP 클라이언트, 라우터, 심화적 상태 관리 등의 기능들은 내장되어 있다 | 앵귤러와 리액트와 달리, 단순히 CDN 에 있는 파일을 로딩 하는 형태로 스크립트를 불러와서 사용하기도 편하다 |
이밖에 Angular, Backbone, Knockout.js, Ember 등의 수많은 프레임워크들이 존재한다.
*프론트엔트 : 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다.
* 컴포넌트 : 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여주는 역할을 한다
* 리액트 활용 사례 : Facebook, Airbnb, BBC, eBay, Twitch, Walmart, Yahoo 등
배경지식
사실 HTML, CSS, JS부터 하려다가.. 바로 리액트 부터 시작해도 되겠다 생각하게된 까닭은
요즘엔 코딩없이 만드는 사이트가 이미 많은 까닭과
코딩이 과거처럼 단순히 웹 페이지가 아닌라 웹 어플리케이션 개념으로 발전하고 있는 부분도 큰 이유이다.
위 이미지의 출처인 모리오닷컴에 방문하면 주요 기능에 대해 이미지로 매우 친절히 잘 설명하고 중복해서 복붙할 필요는 없을 것 같고, 필요한 사람은 위 링크를 타고 방문해서 참고해봐도 좋을 것 같다.
사실, 웹 어플리케이션에 대한 개념은 HTML5가 나오면서 시작된 큰 흐름이기도 하다.
위 문서는 whatwg에서 제공하고 있는 문서이다.
* whatwg : 웹 하이퍼텍스트 애플리케이션 테크놀로지 워킹 그룹 Web Hypertext Application Technology Working Group, WHATWG 은 HTML 및 관련 기술을 발전시키는 데 관심이 있는 사람들의 모임이다. 2004년 애플, 모질라 재단, 오페라 소프트웨어의 개인들이 설립하였다
물론 하나도 모르는 상태에서의 시작, 그냥 따라하기는 무의미할 수 있을 수 있으니
모질라( 파이어폭스 만든 회사)에서 제공하는 자바스크립트 튜토리얼을 훑어보는 것도 좋을 것 같다.
JavaScript 재입문하기 (JS 튜토리얼)
어째서 재입문일까요? 왜냐하면, JavaScript는 세계에서 가장 오해받고 있는 프로그래밍 언어로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에는 몇 가지의 강력한 언어 기능이 숨어 있습니다. Javascript는 현재 엄청나게 많은, 요즘 가장 뜨고있는 애플리케이션들에 사용되고 있어서, 웹 또는 모바일 개발자 누구에게라도 이 기술에 대한 깊은 지식이 중요한 기량이 된다는 것을 보여주고 있습니다.
developer.mozilla.org
자바스크립트를 훑어 본 다음엔 어떻게 학습을 하면 좋을까?
리액트 공식 사이트에서도 튜토리얼(자습서)를 제공하고 있다.
https://ko.reactjs.org/tutorial/tutorial.html
자습서: React 시작하기 – React
A JavaScript library for building user interfaces
ko.reactjs.org
앞으로 코딩 방향
물론 공식 사이트의 튜토리얼이 가장 모범?적인 학습 코스가 될 수도 있겠지만..
코박사는 앞으로 자주 찾아가 눈팅하고 있는 블로거 https://velopert.com/ 가 정리해둔 내용을 따라가며
VELOPERT.LOG
react-redux v7.1 alpha 에 드디어 Hooks 기능이 지원되었습니다. 아직 alpha 이기에 프로덕션에서 사용하기엔 아직 이르지만 한번 사용법을 알아봅시다. 정식 릴리즈 때 많은 변화가 없었으면 좋겠네요 ㅎㅎ 원본 포스트는 https://velog.io/@velopert/react-redux-hooks 에 게재되어 있습니다 🙂… 2018년을 마무리하며, 회고록을 포스팅하였습니다. 다들 연말 잘 마무리 하시고 활기찬 2019년 보내시
velopert.com
나에게 필요한 부분을 별도로 기록하고 추가로 자료를 찾는 방식으로 진행해보려고 한다.
그럼, 내일부터는 환경 설정부터 시작해보기로 하고 오늘은 이만 끝.
코인깎는노인