쿠키란 클라이언트 측에서는 Cookie, 서버 측에서는 Set-Cookie 라는 헤더의 값을 통해 클라이언트와 서버가 정보를 전달하는 방식이다. Authentication 은 Authorization 과 구분된다. 인증 (Authentication) 은 아래의 여기서 설명하고 있는 키값을 통한 로그인을 의미하며 인가 (Authorization) 는 간단히 보면 이렇게 인증된 것만으로 인가여부가 결정될 수도 있으나 여기에 더해서 관리자, 일반사용자 와 같이 role 에 따른 권한 부여 절차까지를 의미한다. cookie session 방식: 세션 쿠키 (만료 시간 지정하지 않은 쿠키) 와 서버측의 세션 저장소를 통한 인증 방식. 서버측으로 인증정보 (아이디, 비번) 을 전송하면 서버에서는 Set-Cookie..
kr.vuejs.org/v2/guide/index.html 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org ant.design Ant Design - The world's second most popular React UI framework ant.design echarts.apache.org/examples/en/index.html Examples - Apache ECharts echarts.apache.org
express 는 listen 으로 서버를 시작한다. 그리고 request, response 를 가진 http 요청을 받는 http 처리 서버가 된다. 그리고 기본 서버에 다양한 middleware 가 추가되어 요청을 원하는 방식으로 처리한다. express 의 미들웨어는 일반적인 미들웨어와 맨 앞에 err 를 받는 에러 미들웨어 두개가 존재한다. // 일반적인 미들웨어 function commonMiddleware(req, res, next) { console.log('common middleware') next(new Error('error occurred')) } // 에러 미들웨어 function errorMiddleware(err, req, res, next) { console.log(err.m..
왜 React Native 가 좋은가? Android / Ios Native 를 Java, Kotlin, Swift 를 통해서 개발한다고 생각해보자. 단순히 한 화면에서 다른 화면으로 전환하며 데이터 전달을 한다고 할 때 간단히 보면 아래와 같다. 논리적으로나 복잡도에서나 react native 가 가장 단순하고 논리적이라 할 수 있다. 또한 안드로이드나 Swift 네이티브의 경우 구현을 하려면 꽤나 성가신 것을 알 수 있다. 간단한 화면 전환에서 데이터 전달을 함에 있어 인텐트, 액티비티, 세그웨이, 뷰컨트롤러 등의 고차원적 개념과 이를 각 문법에 맞게 그들 특유의 방식에 맞추어 공을 들여 구현해야 하고 또한 이런 간단한 의도를 코드로 구현하고자 함에 있어 여러가지 고려하고 생각해야할 것들이 많아 상당..
아래 글은 잘못된 판단. 개념 파악을 위한 도움용으로 참고하면 좋음. 이 글에 관련 내용 기재. https://thewavelet.tistory.com/76 즉, React 는 우선적으로 함수형 프로그래밍 방식을 기본으로 사용하고 또한 Javascript 기반으로 하는 Node.js 또한 그렇게 하는 것이 좋아보인다. React 가 함수형 프로그래밍 방식을 가장 잘 적용한 라이브러리라고 보아도 좋을 듯 하다. 명령형 프로그래밍의 if, for, i++ 과 같은 것 보다는 간단하고 틀리지 않을 filter, map, reduce, take, groupBy 와 같은 작은 단위의 순수 함수들을 프로그래밍의 기본 구성 요소로 간주하면서 프로그래밍 하는 사고와 방식. 함수형 프로그래밍 : 1930년대 알론소 처치..
express 와 async await 그리고 error 처리 { const posts = await Post.find({}).populate("author").exec(); response.json(posts) }); } } ================================= [koa2] router.get('/api/v1/auth/intro', requireAuth, async (ctx, next) => { try { await next(); const users = await dao.getUser(ctx.state.user_id); if (!users.length) { ResponseUtil.status(200).body({message: 'no_user', data: ''}).build(..
IntelliJ > preferences > editor > code style > typescript > spaces > within > ES6 import/export braces
react hoc , context api , recompose https://velopert.com/3606 https://velopert.com/3537 https://github.com/acdlite/recompose https://reactjs.org/docs/higher-order-components.html 리액트 에서 가장 기본이 되는 부분이다. 의외로 내용이 좀 난이도가 있기 때문에 많은 개발자들이 간과하고 깊이 있게 읽어보지 않고 넘어간다. 그로 인해 계속하여 소 귀에 경 읽기가 된다. 리덕스니 사이드 이펙트니 미들웨어니 인증이니 스마트 더미 컴포넌트 니 하는 많은 내용들이 있지만 정작 실전 코드에서 고차함수, 고차컴포넌트, 컨텍스트 api 개념을 모르면 코드를 이해하지 못한다. 왜냐하면..
Cookie, Session, Auth, OAuth, 인증, safari 전통적 인증 방법. 만료일이 설정되지 않은 쿠키를 세션쿠키라고 하며 보통 이것으로 세션 id 를 저장한다. 클라이언트가 id, password 를 입력하고 서버로 요청을 보내면 서버는 이 정보가 맞는지 확인하고 맞다면 Set-Cookie 헤더에 session id 값을 넣어서 응답해준다. 클라이언트는 이 Set-Cookie 헤더 값을 자동으로 쿠키에 저장한다. 그리고 매번 서버에 요청시 이 session id 값을 Cookie 라는 헤더에 담아서 요청을 한다. 서버 측에서는 이 Cookie 정보에서 session id 값이 session storage 에 있다면 현재 로그인된 사용자로 간주한다. 이런 방식은 범용적으로 사용되긴 힘들..
ES5ECMAScript 는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 언어이다.2009년도에 발표된 ES5 가 흔히 말하는 vanila script 의 기준이라 볼 수 있다.IE9 에서 'use strict' 를 지원하지 않는 것 빼고는 대부분의 브라우저에서 이를 지원한다.'use strict', String.trim(), Array.isArray(), Array.forEach(), Array.map(), Array.reduce(), Array.reduceRight()Array.every(), Array.some(), Array.indexOf(), Array.lastIndexOf(), JSON.parse(), JSON.stringify(), Date.now()'use s..
기존에 약간 애매했던게 immutable 은 객체변화 감지를 단순화하게 하기 위해서 하는 목적도 있는데 그럼 store 가 매번 immutable 하게 갈아치워지는건가? 생각했었다. 하지만 그런 것이 아니라 redux 구현체의 원리를 보니 reducer 마다 합쳐서 combine reducer 를 해서 각 reducer 단위로 state 라는 녀석의 변화 감지를 하도록 되어 있다고 한다. 결국은 store 는 하나의 상태 저장소 라는 개념이고 단일 책임 원칙과 각 리듀서들을 통합해서 단순화한 하나의 상태 저장소라는 개념이다. 따라서 불변성이 지켜져야 하는 부분은 store 의 state 즉, reducer 마다 할당된 state 들 각각이 immutable 해야 한다. NGRX 는 service 단을 두..
nodejs 와 npm 이 설치되어 있다는 전제 하에 아래를 진행. npm install -g yarnnpm install -g @angular/cli@latestyarn global add @angular/cli@latest ng config -g cli.packageManager yarn ng new ng-yarn-test-project cd ng-yarn-test-project ng serve 참고: yarn global lsyarn --versionnpm --versionng --version 참조: https://medium.com/@beeman/how-to-do-x-in-angular-cli-v6-db7530c23066ng get / set 명령어가 ng config 로 변경되었다. get 은..
노드 제이 에스 공식 홈페이지의 다운로드 링크 중에 패키지 쪽 nvm 으로 설치하기 부분 https://nodejs.org/en/download/package-manager/#nvm To install nvm, use this script. 라고 된 링크를 클릭 시 다음으로 이동한다. https://github.com/creationix/nvm#install-script 해당 스크립트의 메뉴얼을 보면 아래와 같이 nvm 을 설치하라고 설명해준다. 다음 명령어를 통해서 nvm 설치 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 현재 시점 (2021-03-20) 아래와 같이 버전업이 되었다. 아래에 ~/..