Category: tech.log

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

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

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

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

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

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)

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

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

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

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

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

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

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)

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

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

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 태그로 변환하기

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) 예제

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><BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~"); } }); 이런식으로 윈도우의 스크롤을 감지해서 맨 아래에 닿는다면 html 을 append 하는 방식이다. 만약…

Sass 강좌 – 한 눈에 보기

velopert18 Comments
이전부터 Sass 의 존재를 알고있었고,배우고싶었는데, 미뤄오셨나요? 그렇다면 잘 오셨습니다. 이 포스트에서는 Sass 의 특징에 대하여 알아보고, Sass 로 할 수 있는 멋진 것들을 알아볼테니까요. Sass 가 뭐죠? Sass (Syntactically Awesome Style Sheets : 문법적으로 짱 멋진 스타일시트) 는 CSS pre-processor…