t

[JWT] 토큰(Token) 기반 인증에 대한 소개

소개 토큰(Token) 기반 인증은 모던 웹서비스에서 정말 많이 사용되고 있습니다. 여러분이 API 를 사용하는 웹서비스를 개발한다면, 토큰을 사용하여 유저들의 인증작업을 처리하는것이 가장 좋은 방법입니다. 토큰 기반 인증 시스템을 선택하는데에는 여러가지 이유가 있는데요, 그 중 주요 이유들은 다음과 같습니다 Stateless 서버…

요새는 블루스크린이 호러영화보다 무섭다

옛날엔 블루스크린뜨면 음 뭐지 재부팅되겠네 뭐.. 작업하고있었더라면,, 아.. 날라갔네.. 이런… 이 정도 였는데   최근에 SSD 에 노트북을 달은 이후에, 블루스크린이 생기고나면 SSD를 인식못하던 치명적인 문제가 생겨서… 인식 안되다가다도 가끔씩은 또 인식이 되서 작동하다가 그러다가 갑자기 또 Freeze 되면서 멈추고…
이름 없음

GraphQL 강좌 1편: GraphQL이 무엇인가?

최근 페이스북에서 만든 어플리케이션 레이어 쿼리 언어인 GraphQL 이 공식릴리즈되어 여기저기서 적용한 사례가 생기고있죠 (페이스북은 원래부터 사용하고있었고, 대표적으로 갓 GitHub..) 이 GraphQL 이 뭔지, 이게 왜 필요한건지, 기존의 방식과 뭐가 달라지는건지, 한번 갈피를 잡아봅시다. GraphQL 강좌 1편: GraphQL이 무엇인가? 소개…
이미지 7

[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 기능 회원인증 (가입/로그인) 메모 작성 / 수정 /…
이미지 6

[Release] SaySomething. Long-polling 기법을 사용하여 구현한 실시간 채팅 예제 웹 어플리케이션

Express.js, MongoDB 를 사용하여 구현한 채팅 예제 웹 어플리케이션 입니다. Long-Polling 구조를 자체적으로 구현하여 Ajax 를 통해 메시지를 통신합니다. 서버측에선 MessageCache 를 구현하여 실질적을 MongoDB 에 쿼리를 할 때는, 초기에 데이터 불러올 때랑, 이전 데이터를 불러 올 때 입니다. 클라이언트…

처음으로 영어로 동영상을 만들어보았다

  요새 React 관련 동영상 만들다가, 갑자기 한번쯤 영어로도 만들고싶다는 생각이 들어서 만들어보았다. 최근 동영상 많이 만들어봐서인지.. 딱히 어려움이 없었다. 영어가 불편한건 아니지만 그래도 제 2 외국어이기때문에 발음이 더 많이 꼬일 줄 알았는데 그렇진 않았다.   시간날때마다 조금씩 만들어봐야겠다.. 라고…

VSCode Extension

최근에 VSCode 를 사용하게 됐는데 꽤 빠르고 괜찮은 것 같다. 확실히 아톰보다 훨씬 가벼운 느낌이 든다. 그리고 확장 프로그램 설치 할 때 빠르다… react 프로젝트 진행 할 때 이 정도로 설치하면 좋은 것 같다 :))…

[ERROR] React: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

이번에 한번 프로젝트를 create-react-app 으로 시작해서 진행해볼까.. 하고 시작하는데 갑자기 날 멘붕하게 한 이 에러 메시지. Uncaught Invariant Violation: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional…
npm-logo

[Node.js] Tip: Node는 LTS버전을 사용하더라도, NPM은 최신버전을 사용하자

저는 보통 프로그래밍 작업을 서버컴퓨터나, 클라우드 IDE 를 사용하여 작업을 합니다. 그러다가, 오늘은 제 노트북에서 React.js 프로젝트를 클론하여 npm install 을 했는데, node_modules 디렉토리 의 크기가 어마무시하게 크다는걸 발견했습니다.       거의 200MB ??? 디스크 할당 크기는 276MB!!? 어쩐지…
react

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

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