react.js

React.js 스터디 – 시작하기

RYUHA/ editor

  • 2 comments
  • 1,287 views
  • 2017년 8월 7일

요즘 핫하게 뜨고 있는 리액트 react.js를 같이 공부해봅시당

# 시작

친구가 우리 사이트 접속을 모바일로 할 경우 들어올 때마다 로그인을 계속해야 한다는 불편함을 이야기하며 앱도 만들 것을 권유했습니다.

그래서 손쉽게 크로스 플랫폼으로 개발이 가능하다는 리액트 네이티브를 통해 만들어볼까 하고 시작했습니당 게다가 제가 만들어보고 싶은 프로젝트가 있었는데 마침 앱으로 만들면 좋겠다 싶어서 겸사겸사 시작했지요.

 

# 리액트 네이티브

리액트 네이티브를 공부하기 위해 이리저리 찾아보는데 모두들 리액트를 먼저 공부하고 시작하라고 합니당.

하지만 전 패기 넘치게 거기서거긴데 뭔 차이가 있겠나 싶은 마음에 바로 네이티브로 들어갔지여.

뷰를 구현하는 것은 커스텀 태그도 만들어 사용할 수 있고 편하고 좋은걸? 하면서 했지만 서버사이드 들어가고 db와 연결하기 위한 작업을 하는데 아직 리액트의 대표적인 개념, this, props, state 등등 개념도 잘 안 잡혀있는 채로 하다보니 계속 막히고, 웹 상의 자료도 적고 몇 번이나 삽질을 했습니다ㅠㅠ

그래서 다시 리액트로 돌아가서 초심으로 시작하기로 결심했지요.

 

# 스터디 순서

리액트로 기본적인 개념을 익히고 redux를 통한 데이터 플로우(?)를 이해한 후, express, mongodb, node.js를 이용한 (가장 기본적이고 익숙한)crud 예제를 진행해보려 합니다. 그렇게 리액트 마스터 후에 네이티브로 넘어가 (우리나라엔 거의 자료가 없다고 보면 좋은, 혹시 있거나 아시는 분은 알려주세요..ㅠㅠ) react-native with mongodb 예제를 꼭 만들어 볼 예정입니다!!!

 

#기타

지금껏, 확립되어있는 예제나 자료가 방대한 언어들만 공부하다가 처음으로 새로운 언어를 혼자 해보려 하니 순간순간 ‘난 개발자가 안 맞나’ 하는 생각이 들 정도로 우울했습니다ㅠㅠ 그래도 열심히 했으니 혹시 부족한 부분이 있다면 댓글로 많이 달아주세요!! 저의 성장기를 함께 봐주세요ㅠㅠ

 


 

# 리액트의 기본

페이스북에서 만든 자바스크립트 라이브러리로 사용자 인터페이스를 만들기 위한 것으로 기존의 ‘MVC(Model View Controller)’ 패턴에서 View 에 집중하고 있습니다. 그래서 다른 파트들은 모듈들이 조금 필요하게 되었지요.

리액트는 커스텀 태그를 통해 뷰를 꾸밀 수 있어서 굉장히 매력적이기도 하지요! 이를 통해 모듈화도 쉽게 되어 소스 유지보수가 편해집니다.

리액트 특징으로는 이렇게 이야기 합니다. jsx, components, unidirectional data flow and flux, license.

jsx는 자바스크립트 확장 문법으로 (Javascript XML) html과 비슷하지만 약간 다릅니다. 또한 ECMAScript6를 써서 이걸 익히는 것이 좋아요!

또 컴포넌트를 통해 뷰를 구성하므로 굉장히 유연하게 사용이 가능합니다. 컴포넌트는 화면을 구성하는 부분부분의 조각들인데 웹페이지를 업데이트할 때 필요한 컴포넌트만 업데이트가 가능합니다.

데이터는 한 방향으로만 흐릅니다. 상위에서 하위 컴포넌트로.

리액트는 페이스북에서 만들고 페이스북, 인스타그램, 에어비앤비 등에서도 많이 쓰이고 잇어서 앞으로 한동안 인기가 계속 될 것 같습니다.

 

이러한 장점이 있는 리액트이기에, 또 쉽게 접근하고 익힐 수 있다는 점으로 같이 공부하면 좋을 것 같습니다.


 

#리액트 처음 보기

리액트는 간단하게 시작할 수 있습니다.

터미널에 직접 프로젝트를 생성해서 만들 수도 있는데 제가 공부하다보니 관련 글들이 굉장히 많더라구요. 그래서 쉽지만 그래도 또 다른 방법인 웹스톰을 통해 구현하는 것으로 해보겠습니다.

시작을 위해선 ‘create-react-app’이 필요합니다. 이것은 리액트 작업환경을 순식간에 생성해주는 것입니다.(무려 공식이구요)

npm install -g create-react-app

터미널에 위 명령어를 입력해주세요.

설치가 완료 되면 웹스톰을 켜줍니다. 새 프로젝트 만들기를 선택하고 아래처럼 나오면 프로젝트 명을 넣어주고 생성해줍니다.

그런 다음 웹스톰 내의 터미널에 npm start 를 해줍니다.

그럼 에러가 날 거예요.

eslint-plugin-import 일수도, eslint-plugin-react, eslint-plugin-flowtype, eslint-plugin-jsx-a11y 중에 하나가 뜰 것입니다(결국엔 4개 다 떠요.)

eslint 에러인데 모듈들을 하나씩 설치해주어야 합니다. 그리고 중요한게 꼭 –save를 통해 package.json에도 올려줘야 합니다!!! 계속 에러가 나길래 뭘까 싶었는데 그렇게 하니까 더이상 나지 않더라구요.

그리고 다시 npm start를 하면 기본 화면이 뜹니다.

 

이렇게 첫 글이 끝났어요. 다음 글에선 꼭 설치하면 좋을 모듈들과 간단한 뷰 컴포넌트 익히기를 해볼게요.

 

참조:
튜토리얼 포인트
참조사이트

RYUHA

만들어 보면서 하나씩 글 씁니당:)

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
RYUHAEdgar Recent comment authors
newest oldest most voted
Edgar
Member

앵귤러로는 안하시나요?~ 앵귤러는 진입장벽이 높은대신 나중가면 생산성이 더좋다는데!!, Ionic과 연관도 많구요!!