[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에 따라서 다른…
[Release] Whotalk.us
WhoTalk.us 는 채팅 기반 SNS 시스템으로서, N:1 채팅을 제공해줍니다. 서비스를 한마디로 설명을 하자면, 익명 혹은 비익명의 유저들이 당신에게 말을 걸 수 있게 해줍니다. 프론트엔드엔 React.js 가 사용되었으며, 백엔드엔 Node.js 가 사용되었습니다. 데이터베이스는 MongoDB 가 사용되었습니다.
이 프로젝트는 중규모의 사이드 프로젝트…
2016.log
이 포스트는 2016년을 정리하며, 저의 인생 중 “개발” 에 관한 이야기 이것 저것을 적은 회고록입니다. 딱히 대단한 내용은 없지만, 재미있게 읽어주세요 🙂
끝나지 않을 것 같았던 나의 2016년이 드디어 막을 내려간다. 이번 2016년은 나에게 있어서 나름대로 힘들었지만 의미있는 한 해였으니,…
[React.JS] 강좌: React 컴포넌트 구성 & AJAX 비동기 작업 처리하기 & CSS 애니메이션 처리
이 포스트에서는 React 프로젝트에서 Ajax 와 같은 비동기 작업을 효율적으로 처리하는 방법을 다뤄보겠습니다. Ajax 처리 외에도, 컴포넌트 구성 및 응용, 애니메이션 처리도 다루니, React 입문자들은 한번 따라서 진행해보시면 많은 도움이 될거에요. 만약에 이해가지 않는 부분이 있거나 틀린 부분이 있다면 언제든지…
[Node.js / JWT] Express.js 서버에서 JWT 기반 회원인증 시스템 구현하기
이 강의에서는 Node.js 의 인기있는 웹서버 프레임워크인 Express.js 서버에서 JSON Web Token 을 사용하여 회원인증 시스템을 구현하는 방법을 알아보겠습니다.
사전 지식
이 강의에서는 Node.js에 대한 배경지식이 있어야합니다. Node.js 를 잘 모르시는분들은 Node.js 기초 강의 를 먼저 읽어주세요. 추가적으로, 토큰 기반…
[JWT] JSON Web Token 소개 및 구조
지난 포스트에서는 토큰 기반 인증 시스템의 기본적인 개념에 대하여 알아보았습니다. 이 포스트를 읽기 전에, 토큰 기반 인증 시스템에 대해서 잘 모르시는 분들은 지난 포스트를 꼭 읽어주세요.
이번 포스트에서는, 토큰 기반 인증 시스템의 구현체인 JWT (JSON Web Token) 에 대한 소개를…
[JWT] 토큰(Token) 기반 인증에 대한 소개
소개
토큰(Token) 기반 인증은 모던 웹서비스에서 정말 많이 사용되고 있습니다. 여러분이 API 를 사용하는 웹서비스를 개발한다면, 토큰을 사용하여 유저들의 인증작업을 처리하는것이 가장 좋은 방법입니다.
토큰 기반 인증 시스템을 선택하는데에는 여러가지 이유가 있는데요, 그 중 주요 이유들은 다음과 같습니다
Stateless 서버…
요새는 블루스크린이 호러영화보다 무섭다
옛날엔 블루스크린뜨면 음 뭐지 재부팅되겠네
뭐.. 작업하고있었더라면,, 아.. 날라갔네.. 이런… 이 정도 였는데
최근에 SSD 에 노트북을 달은 이후에, 블루스크린이 생기고나면 SSD를 인식못하던 치명적인 문제가 생겨서…
인식 안되다가다도 가끔씩은 또 인식이 되서 작동하다가 그러다가 갑자기 또 Freeze 되면서 멈추고…
GraphQL 강좌 1편: GraphQL이 무엇인가?
최근 페이스북에서 만든 어플리케이션 레이어 쿼리 언어인 GraphQL 이 공식릴리즈되어 여기저기서 적용한 사례가 생기고있죠 (페이스북은 원래부터 사용하고있었고, 대표적으로 갓 GitHub..) 이 GraphQL 이 뭔지, 이게 왜 필요한건지, 기존의 방식과 뭐가 달라지는건지, 한번 갈피를 잡아봅시다.
GraphQL 강좌 1편: GraphQL이 무엇인가?
소개…
[Release] MEMOPAD: React.js 를 사용하여 만든 간단한 메모 웹 어플리케이션
React.js, Redux, Express.js, 그리고 MongoDB 를 사용해서 만들어진 싱글 페이지 무한 스크롤링 메모 어플리케이션입니다.
이 어플리케이션은 React.js 강의 진행을 위해서 만들어졌습니다. 이를 만드는 내용은 https://velopert.com/tag/reactcodelab 여기에서 다루고 있습니다.
Preview: https://memo.vlpt.us/
Source: https://github.com/velopert/react-codelab-project
기능
회원인증 (가입/로그인)
메모 작성 / 수정 /…
[Release] SaySomething. Long-polling 기법을 사용하여 구현한 실시간 채팅 예제 웹 어플리케이션
Express.js, MongoDB 를 사용하여 구현한 채팅 예제 웹 어플리케이션 입니다.
Long-Polling 구조를 자체적으로 구현하여 Ajax 를 통해 메시지를 통신합니다.
서버측에선 MessageCache 를 구현하여 실질적을 MongoDB 에 쿼리를 할 때는,
초기에 데이터 불러올 때랑, 이전 데이터를 불러 올 때 입니다.
클라이언트…