[Next.js 2.0] 간단한 React 전용 서버사이드 프레임워크, 기초부터 본격적으로 파보기
Next.js, 작년부터 존재함을 인지해왔고, 뭔가 멋지다는것도 알고있었지만 그 동안 딱히 필요성을 못 느껴서 오랫동안, 아주 오랫동안 미뤄왔습니다. (이 포스트를 보시는 여러분들중 일부도 그러하리라 생각합니다) 그런데 어느새 벌써 2.0이 런칭되었고 왠지 사용을 해봐야 할 것 같습니다.
Next.js 란 무엇인가?
독자 여러분의…
Tag: React.js
[React.JS] 강좌: 함수형 컴포넌트 (Functional Component)
이번 포스트에서는 React 에서 함수 형태로 컴포넌트를 정의하는 방법을 알아보겠습니다.
React 에서 컴포넌트를 정의 할 때는 보통 EcmaScipt 6 에 도입된 class 문법을 사용합니다. 컴포넌트에서 라이프사이클 API 를 사용해야 하거나, state 를 사용하는 경우에는 꼭 이렇게 정의를 해야하죠.
View the…
[React.JS] 강좌: 리액트 프로젝트에서의 라우터, React-router v3 사용하기
아직 React-Router v3 는 유지보수가 이뤄지고 있는 상태이며, 현재 2017년 3월 기준 가장 최신 버전은 v4 입니다 (한동안 베타였는데 정식 릴리즈되었습니다. 관련 동영상이 만들어졌으니 여기를 참조해주세요)
리액트 프로젝트에서 여러 페이지가 있을 땐, 라우터를 사용합니다. 라우터는 사용자가 요청한 URL에 따라서 다른…
[React.JS] 강좌: React 컴포넌트 구성 & AJAX 비동기 작업 처리하기 & CSS 애니메이션 처리
이 포스트에서는 React 프로젝트에서 Ajax 와 같은 비동기 작업을 효율적으로 처리하는 방법을 다뤄보겠습니다. Ajax 처리 외에도, 컴포넌트 구성 및 응용, 애니메이션 처리도 다루니, React 입문자들은 한번 따라서 진행해보시면 많은 도움이 될거에요. 만약에 이해가지 않는 부분이 있거나 틀린 부분이 있다면 언제든지…
[React.js] React-Router v4 Pre-Release 사용해보기
리액트 라우터 v4 공식 릴리즈되어 새 자료를 만들었습니다. 이 포스트에 있는 자료는 deprecated 되었으니 새 포스트를 참고해주세요.
최근, React Router 가 v4 버전을 pre-release 하였습니다. 어떻게 달라졌나 알아보고, 사용법도 알아봅시다. 제가 사용해본 결과, 기존의 사용법과 정말 많이 달라졌으며, 사용법이 정말…
[React.JS] Tip: create-react-app 사용하기 + react-hot-loader 적용 + Express.js 와 함께 사용하기
Redux 를 개발한 Dan Abramov, React 가 릴리즈 된 이후에 React.js 생태계에 가장 큰 영향을 끼친 인물이 아닐까요?
2016년 7월 22일, 그가 React 블로그를 통하여 멋진 소식을 전했는데요.
React 작업환경을 명령어 하나로 설정 할 수 있는 “공식 도구” 를 릴리즈하였습니다!…
React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (7)
6편에선 저희 프로젝트의 핵심기능을 모두 완료하였고, 성능을 최적화하는 방법도 가볍게 배웠습니다.
이번 편에서는 (마지막 편입니다! 야호~) 유저 검색기능을 구현해보겠습니다.
강좌 후반부에서는 제가 핵심코드만 제공해드릴테니, 한번 여러분이 직접 구현해보세요.
25. 유저 검색기능 구현하기 – 담벼락
우리가 구현 할 기능은 이렇게…
React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (6)
5편에서는 메모를 수정하고 삭제하는 기능을 구현해보았습니다.
이번 편에서는, 별 주기 기능을 구현해보겠습니다.
이 작업은 수정 기능과 매우 비슷하므로 쉽게 구현 하실 수 있을겁니다.
23. 별 주기 기능
서버 – 별주기 API 구현하기 (server/routes/memo.js)
/*
TOGGLES STAR OF MEMO: POST /api/memo/star/:id…
React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (5)
4편에서는, 메모를 쓰고 읽는 기능을 구현했습니다.
지금까지 잘 따라와주셨다면, 이번 코드랩의 목표를 이미 달성 한 셈입니다.
여러분들은 React 컴포넌트를 다루는 방법을 어느정도 숙지하였고,
Redux 데이터 흐름 구조에도 익숙해졌으며, 서버와 커뮤니케이션 하는 방법 또한 배웠습니다.
저희가 지금까지 해왔던 지식과 방식을…
React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (4)
3편에서는 계정인증 부분을 완료했었습니다.
어떤가요? 조금 복잡했나요? 이 파일 수정하고.. 저 파일 수정하고, 조금 정신없었을 수도 있지만,
결국엔 비슷한 동작이 계속해서 반복되기 때문에 몇번 해보면 쉬워진답니다.
이런 동작이 반복되죠
action type 만들기
action creator 만들기
reducer 만들기
컴포넌트에서 사용
이번…
React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (3)
2편에서는, 클라이언트 사이드의 초기 구조를 대충 잡았죠, 이번 편에서는 Redux 구조를 설정하도록 하겠습니다.
계속해서 컴포넌트를 뚝딱뚝딱 만들어봅시다.
11. Authentication 컴포넌트 만들기
Login 과 Register 라우트는 상당히 비슷하기 때문에, Authentication 이라는 컴포넌트를 만들어서 같이 사용하도록 하겠습니다.
CodePen Link:
로그인 페이지: …
React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (2)
1편에서 우리는 기본적인 Backend 를 완성하였습니다.
우리가 만든 Backend 를 기반으로 React 어플리케이션을 만들어봅시다!
6. webpack 설정 추가 및 클라이언트사이드에서 필요한 모듈 설치
webpack 에 resolve 설정 추가하기 (webpack.config.js & webpack.dev.config.js)
var path = require('path');
/* .. 코드 생략…