swk의 지식저장소

이 문서는 패스트캠퍼스 오프라인 강의를 위해서 준비된 문서이기에, 일부 내용들은 설명이 생략되어있을 수도 있습니다.이번 강의에서 다룰 주제는 리덕스 미들웨어를 사용하여 외부 데이터를 연동하는 방법을 다뤄보겠습니다.외부 데이터를 연동하기 위해서 리덕스, 그리고 리덕스 미들웨어들이 꼭 필요한것은 아닙니다. 리액트 컴포넌트와 내부 state 만을 사용하여 모든 것 들을 할 수 있어요. 하지만, 좋은 도구들과 함께하면 좋은 개발자경험 (Developer Experience)이 따라옵니다.어플리케이션을 만듬에 있어서는, UX 도 매우 중요하지만, 이를 개발하는 개발자들의 정신건강을 위하여, 개발자경험 또한 놓칠 수 없습니다. 네트워크 요청의 상태 관리와 전달받은 데이터 상태 관리를 효율적이고 쉽게 할 수 있도록,..

이 포스트는 React 에서는 불변함 (Immutability) 를 지키며 상태 관리를 하는 것을 매우 편하게 해주는 라이브러리 Immutable.js 에 대해서 알아보겠습니다.서론리액트를 사용하신다면, Immutability 라는 말, 한번쯤은 들어보셨을겁니다. 리액트 컴포넌트의 state 를 변경해야 할 땐, 무조건, setState 를 통해서 업데이트 해주어야 하며, 업데이트 하는 과정에서 기존의 객체의 값을 직접적으로 수정하면 절대!! 안됩니다.예를 들어서 컴포넌트의 state 에 users 라는 배열이 있다고 가정해봅시다.state = { users: [ { id: 1, username: 'velopert' } ] };자, 우리가 만약에 이 users 배열에 새로운 객체를 추가한다면 어떻게 해야..

이 포스트는 이어지는 튜토리얼 입니다. 1편 을 먼저 읽고 오시길 바랍니다.리덕스의 3가지 규칙리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다.1. 하나의 애플리케이션 안에는 하나의 스토어가 있습니다.하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용합니다. 사실, 권장되지는 않습니다. 여러개의 스토어를 만들고 싶다면 만들 수는 있습니다. 특정 업데이트가 너무 빈번하게 일어나거나, 애플리케이션의 특정 부분을 완전히 분리시키게 될 때 그렇게 여러개의 스토어를 만들 수도 있습니다. 하지만 그렇게 하면, 개발 도구를 활용하지 못하게 됩니다.2. 상태는 읽기전용 입니다.리액트에서 state 를 업데이트 해야 할 때, setState 를 사용하고, 배열을 업데이트 해야 할 때는 배열..

이 포스트는 리덕스의 리도 모르는 독자들을 대상으로 작성된 글입니다. 리덕스가 왜 필요한지 알아보고, 리덕스를 편리하게 사용하기 위한 발악을 한번 해보겠습니다.리덕스 왜 쓸까?리액트애서 애플리케이션을 만들 때, 기본적으로는 보통 하나의 루트 컴포넌트 (App.js) 에서 상태를 관리합니다. 예를들어서, 투두리스트 프로젝트에서는, 다음과 같은 구조로 상태가 관리되고 있죠. 리액트 프로젝트에서는 대부분의 작업을 할 때 부모 컴포넌트가 중간자 역할을 합니다.컴포넌트 끼리 직접 소통 하는 방법은 있긴 하지만, 그렇게 하면 코드가 굉장히 많이 꼬여버리기 때문에 절대 권장되지 않는 방식입니다. (ref 를 사용하서 이러한 작업을 할 수 있긴 하죠.)App 에서는 인풋의 값인 input 값과, 이를 변경하는 onCh..

다음은 회원가입 프로젝트를 이용한 라우트 분리와 게시글의 추가, 수정, 삭제 기능을 물리적으로 합치는 것에 대해서 진행하겠습니다. 소스코드 : https://github.com/swk3169/nodejs-membership 라우트 : 길을 내다 라우트를 분리하는 이유 : 코드의 가독성을 높이기 위해서 코드를 필요에 따라서 길을 나누는 것 기존의 facebook인증을 통한 회원가입 프로젝트 코드 app_passport_facebook_mysql.js var express = require('express');var session = require('express-session');var MySQLStore = require('express-mysql-session')(session);var bodyPars..

다음은 Facebook API를 이용한 회원가입, 로그인 시스템입니다. Facebook에 가입이 되어 있어야만 사용할 수 있으니 유의바랍니다. https://developers.facebook.com/ 개발자 페이스북 사이트에 접속합니다. Facebook API를 위한 App 추가합니다. 등록할 App 이름, 본인 facebook 연락처 이메일을 등록합니다. 보안 서명 확인 후 제출합니다. 생성된 Facebook API App을 확인합니다 App의 대시보드 화면입니다. 본인이 등록한 App이 맞는지 확인합니다. 기본 설정에 들어간 후 앱 ID와 앱 시크릿 코드를 확인합니다. 향 후 Facebook API를 Node.js에 등록할 시 필요한 정보입니다. 카데고리는 기호에 맞게 선택해줍니다. ex) 웹 사이..

Passport 모듈을 이용한 사용자 인증을 진행해보겠습니다. 모듈 설치 http://www.passportjs.org/ passport 모듈에 관한 정보들을 담고 있는 웹사이트 Documentation -> Configure Passport 모듈을 사용하기 위한 환경설정 가이드입니다. 모듈에 따른 설정 방법들이 잘 가이드 되어 있으니 참고하시면 됩니다. var session = require('express-session');var passport = require('passport')var LocalStrategy = require('passport-local').Strategy; 모듈 선언 app.use(session({ // session 미들웨어 secret: '1234DSFs@adf1234!@..