[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 기초 강의 를 먼저 읽어주세요. 추가적으로, 토큰 기반…

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

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

Sass 강좌 – 한 눈에 보기

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

[Node.js] 12.1 편: GULP – JavaScript 빌드 자동화툴 알아보기 + ES6 문법으로 사용해보기

이번 강좌에서는 JavaScript 빌드 자동화 툴인 gulp.js 에 대하여 알아보고, ES6 문법으로 gulp.js 를 사용하는 방법을 알아보겠습니다. # 소개 Node.js 환경에서 웹 어플리케이션을 만들다보면, 일일히 수작업으로 하기에 귀찮은 작업들이 존재합니다.. 예를들어서, ____.min.js, ____.min.css 이런 파일, 익숙하신가요? whitespace, newline 과 같이…

[React.JS] 강좌 10-2편 Redux: 예제를 통해 사용해보기

이번 포스트는 React.js 에서 Redux를 실제로 이용해보는 강좌입니다. Redux에 대한 이해가 부족하신분은 이전 강좌를 참조해주세요. # 프로젝트 시작하기 강좌 2.1편을 참조하여 React.js 프로젝트를 생성하세요. (NPM 을 통하여 환경설정을 하시길 바랍니다) 이 프로젝트에선 webpack.config.js 에서 entry 를 index.js 로 설정하겠습니다. module.exports…

[React.JS] 강좌 10-1편 Redux: React 앱의 효율적인 데이터 교류

이번 포스트는 React.js 를 통하여 만들어진 어플리케이션에서 데이터 교류 및 state 관리를 쉽고 효율적으로 하게 해주는 Redux 에 대하여 공부해보겠습니다. 강좌가 길어질 것 같아서 파트를 나눠서 강좌를 작성하겠습니다. 이번 파트에서는 이해를 돋구기 이하여 배경지식 및 특징을 알아보겠습니다. 1.소개 Redux는 JavaScript…

[React.JS] 강좌 9편 Router: URL 에 따라서 다른 결과물을 보여주자

이 포스트는 Outdated 되었습니다. React-router v3 를 더 자세히 다루는 리액트 프로젝트에서의 라우터, React-router v3 사용하기 를 참고하세요. 이번 포스트는 React.js 의 Router 사용에 대한 강좌입니다. Router 는 사용자가 요청한 URL 의 서브디렉토리에 따라서 결과물을 렌더링해줍니다.  Apache nginx등의 웹서버처럼 각…

[React.JS] 강좌 7편 Component LifeCycle API

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]   이번 강좌에서는 React.js 컴포넌트의 LifeCycle API 에 관하여 배워보겠습니다. LifeCycle API는, 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메소드 들 입니다. 이 메소드를…

[React.JS] 강좌 6-2편 Immutability Helper – State 내부 Array 에 원소 삽입/제거/수정

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기] 이 강의는 조금 오래되었습니다 😉 다음 포스트를 읽으시는 것을 권장 드립니다: React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기 [Featured] React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서…

[React.JS] 강좌 5편 컴포넌트의 State 와 Props 사용하기

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기] 이번 강좌에서는 Component 에서 사용 할 데이터를 다루는 State 와 Props 에 대하여 알아보겠습니다. 1. 시작하기 강좌 4편 – Component 생성 및 모듈화 에서 사용하던 프로젝트를 계속해서 사용하겠습니다. index.html <!DOCTYPE html>…