7월, 2016 | VELOPERT.LOG

[React.JS] Tip: create-react-app 사용하기 + react-hot-loader 적용 + Express.js 와 함께 사용하기

2016년 7월 23일2016년 9월 7일 velopert26 Comments

Redux 를 개발한 Dan Abramov, React 가 릴리즈 된 이후에 React.js 생태계에 가장 큰 영향을 끼친 인물이 아닐까요? 2016년 7월 22일, 그가 React 블로그를 통하여 멋진 소식을 전했는데요. React 작업환경을 명령어 하나로 설정 할 수 있는 “공식 도구” 를 릴리즈하였습니다!…

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (7)

2016년 7월 23일2016년 8월 5일 velopert10 Comments

6편에선 저희 프로젝트의 핵심기능을 모두 완료하였고, 성능을 최적화하는 방법도 가볍게 배웠습니다. 이번 편에서는 (마지막 편입니다! 야호~) 유저 검색기능을 구현해보겠습니다. 강좌 후반부에서는 제가 핵심코드만 제공해드릴테니, 한번 여러분이 직접 구현해보세요. 25. 유저 검색기능 구현하기 – 담벼락 우리가 구현 할 기능은 이렇게…

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (6)

2016년 7월 22일2016년 8월 5일 velopert6 Comments

5편에서는 메모를 수정하고 삭제하는 기능을 구현해보았습니다. 이번 편에서는, 별 주기 기능을 구현해보겠습니다. 이 작업은 수정 기능과 매우 비슷하므로 쉽게 구현 하실 수 있을겁니다. 23. 별 주기 기능 서버 – 별주기 API 구현하기 (server/routes/memo.js) /* TOGGLES STAR OF MEMO: POST /api/memo/star/:id…

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (5)

2016년 7월 19일2016년 8월 4일 velopert1 Comment

4편에서는, 메모를 쓰고 읽는 기능을 구현했습니다. 지금까지 잘 따라와주셨다면, 이번 코드랩의 목표를 이미 달성 한 셈입니다. 여러분들은 React 컴포넌트를 다루는 방법을 어느정도 숙지하였고, Redux 데이터 흐름 구조에도 익숙해졌으며, 서버와 커뮤니케이션 하는 방법 또한 배웠습니다. 저희가 지금까지 해왔던 지식과 방식을…

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (4)

2016년 7월 18일2016년 10월 3일 velopert10 Comments

3편에서는 계정인증 부분을 완료했었습니다. 어떤가요? 조금 복잡했나요? 이 파일 수정하고.. 저 파일 수정하고, 조금 정신없었을 수도 있지만, 결국엔 비슷한 동작이 계속해서 반복되기 때문에 몇번 해보면 쉬워진답니다. 이런 동작이 반복되죠 action type 만들기 action creator 만들기 reducer 만들기 컴포넌트에서 사용 이번…

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (3)

2016년 7월 16일2016년 10월 13일 velopert46 Comments

2편에서는, 클라이언트 사이드의 초기 구조를 대충 잡았죠, 이번 편에서는 Redux 구조를 설정하도록 하겠습니다. 계속해서 컴포넌트를 뚝딱뚝딱 만들어봅시다. 11. Authentication 컴포넌트 만들기 Login 과 Register 라우트는 상당히 비슷하기 때문에, Authentication 이라는 컴포넌트를 만들어서 같이 사용하도록 하겠습니다. CodePen Link: 로그인 페이지: …

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (2)

2016년 7월 16일2016년 8월 28일 velopert10 Comments

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)

2016년 7월 14일2016년 11월 30일 velopert18 Comments

시작하면서.. React.js 코드랩에 참여하신 모든 개발자 여러분! 환영합니다! 저희는 이제 배경지식을 어느정도 공부 한 상태이고, 이제 마지막 프로젝트를 진행해볼 차례입니다. (코드랩 세션을 참석하지 못하셨다면, https://velopert.com/reactjs-tutorials 에서 React 입문을 하고나서 이 강좌를 진행해주세요.) 이전에 만들었던 예제 프로젝트와는 달리 이번에는 조금은 멋진?…

React.js Codelab 2016 – 진행을 위한 사전 작업환경 설정하기

2016년 7월 13일2016년 8월 23일 velopert8 Comments

React.js 코드랩 세션을 시작하시기전에 설치해야 할 것들은 4 가지가 있습니다. GIT NPM / NODE MONGODB EDITOR (Atom, Bracket, Sublime, Editplus, Vim …) 위 프로그램들을 설치하는 방법을 알아보도록 하겠습니다. 1. GIT 개발자라면 한번쯤은 들어봤을 Git 은 버전관리 시스템입니다. 다운로드: …

[React.js] Tip: string 형태의 html을 렌더링하기, newline(\n) 을 BR 태그로 변환하기

2016년 7월 4일2016년 7월 4일 velopert8 Comments

React 매뉴얼의 “Dangerously Set innerHTML” 페이지에 따르면, React에서는 cross-site scripting (XSS) 공격을 막기 위하여, 렌더링 메소드 내부에서 html 태그가 담겨있는 string 형태를 렌더링하면, 태그가 안 먹히고 문자열 그대로 렌더링되게 됩니다: See the Pen React.js CodeLab by velopert (@velopert) on CodePen.…

[JS] JQuery 를 사용한 무한 스크롤 (Infinite Scroll) 예제

2016년 7월 4일2016년 7월 5일 velopert3 Comments

Link: CodePen 생각보다 많이 간단하다 var page = 1; $(window).scroll(function() { if ($(window).scrollTop() == $(document).height() - $(window).height()) { console.log(++page); $("#enters").append("<h1>Page " + page + "</h1> So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~"); } }); 이런식으로 윈도우의 스크롤을 감지해서 맨 아래에 닿는다면 html 을 append 하는 방식이다. 만약…