VSCode Extension
최근에 VSCode 를 사용하게 됐는데 꽤 빠르고 괜찮은 것 같다.
확실히 아톰보다 훨씬 가벼운 느낌이 든다.
그리고 확장 프로그램 설치 할 때 빠르다…
react 프로젝트 진행 할 때 이 정도로 설치하면 좋은 것 같다 :))…
Category: dev.log
[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:
로그인 페이지: …
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');
/* .. 코드 생략…
React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (1)
시작하면서..
React.js 코드랩에 참여하신 모든 개발자 여러분! 환영합니다!
저희는 이제 배경지식을 어느정도 공부 한 상태이고, 이제 마지막 프로젝트를 진행해볼 차례입니다.
(코드랩 세션을 참석하지 못하셨다면, https://velopert.com/reactjs-tutorials 에서 React 입문을 하고나서 이 강좌를 진행해주세요.)
이전에 만들었던 예제 프로젝트와는 달리 이번에는 조금은 멋진?…