[React.js] React-Router v4 Pre-Release 사용해보기
리액트 라우터 v4 공식 릴리즈되어 새 자료를 만들었습니다. 이 포스트에 있는 자료는 deprecated 되었으니 새 포스트를 참고해주세요.
최근, React Router 가 v4 버전을 pre-release 하였습니다. 어떻게 달라졌나 알아보고, 사용법도 알아봅시다. 제가 사용해본 결과, 기존의 사용법과 정말 많이 달라졌으며, 사용법이 정말…
처음으로 영어로 동영상을 만들어보았다
요새 React 관련 동영상 만들다가, 갑자기 한번쯤 영어로도 만들고싶다는 생각이 들어서 만들어보았다.
최근 동영상 많이 만들어봐서인지.. 딱히 어려움이 없었다. 영어가 불편한건 아니지만 그래도 제 2 외국어이기때문에 발음이 더 많이 꼬일 줄 알았는데 그렇진 않았다.
시간날때마다 조금씩 만들어봐야겠다.. 라고…
VSCode Extension
최근에 VSCode 를 사용하게 됐는데 꽤 빠르고 괜찮은 것 같다.
확실히 아톰보다 훨씬 가벼운 느낌이 든다.
그리고 확장 프로그램 설치 할 때 빠르다…
react 프로젝트 진행 할 때 이 정도로 설치하면 좋은 것 같다 :))…
[ERROR] React: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
이번에 한번 프로젝트를 create-react-app 으로 시작해서 진행해볼까.. 하고 시작하는데 갑자기 날 멘붕하게 한 이 에러 메시지.
Uncaught Invariant Violation: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional…
[Node.js] Tip: Node는 LTS버전을 사용하더라도, NPM은 최신버전을 사용하자
저는 보통 프로그래밍 작업을 서버컴퓨터나, 클라우드 IDE 를 사용하여 작업을 합니다. 그러다가, 오늘은 제 노트북에서 React.js 프로젝트를 클론하여 npm install 을 했는데, node_modules 디렉토리 의 크기가 어마무시하게 크다는걸 발견했습니다.
거의 200MB ??? 디스크 할당 크기는 276MB!!? 어쩐지…
[JS] JQuery 를 이용한 반대반향 무한스크롤 (Reversed Infinite Scroll) 예제
See the Pen Reversed Infinite Loading (Like Chat) using JQuery by velopert (@velopert) on CodePen.
CodePen Link
정방향 무한스크롤링을 구현해봤다면, 반대방향 무한스크롤링은 더! 쉽다.
이번 예제에선 로딩 대기시간을 주고, 로딩 효과를 주었다.
var page = 2;
var isLoading = false;…
[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:
로그인 페이지: …