Tag: React.js

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (1)

velopert18 Comments
시작하면서.. React.js 코드랩에 참여하신 모든 개발자 여러분! 환영합니다! 저희는 이제 배경지식을 어느정도 공부 한 상태이고, 이제 마지막 프로젝트를 진행해볼 차례입니다. (코드랩 세션을 참석하지 못하셨다면, https://velopert.com/reactjs-tutorials 에서 React 입문을 하고나서 이 강좌를 진행해주세요.) 이전에 만들었던 예제 프로젝트와는 달리 이번에는 조금은 멋진?…

[React.js] Tip: string 형태의 html을 렌더링하기, newline(\n) 을 BR 태그로 변환하기

velopert8 Comments
React 매뉴얼의 “Dangerously Set innerHTML” 페이지에 따르면, React에서는 cross-site scripting (XSS) 공격을 막기 위하여, 렌더링 메소드 내부에서 html 태그가 담겨있는 string 형태를 렌더링하면, 태그가 안 먹히고 문자열 그대로 렌더링되게 됩니다: See the Pen React.js CodeLab by velopert (@velopert) on CodePen.…

[React.JS] 강좌 12편 axios 모듈을 통한 웹서버와의 통신 (AJAX) 알아보기

velopert26 Comments
이 강좌는 outdated 되었습니다. 더 좋은 내용을 다루는 강좌를 준비하도록 하겠습니다. 이 강좌는 참고용으로만 읽어주세요. 이번 포스트에서는 Express 프레임워크를 사용한 Node 웹서버에서 간단한 REST API 를 구현하고, React.js 어플리케이션에서 axios 라이브러리를 통하여 AJAX 를 통하여 통신하는 방법에 대하여 알아보겠습니다. 추가적으로,…

[React.JS] Tip: Webpack css-loader 를 통하여 .css 파일을 import 하여 사용하기

velopert8 Comments
이 포스트는 살짝 outdated 되었습니다. 새로 작성된, 리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components 포스트를 읽는것을 권고합니다.   기본적으로는, React.js 컴포넌트의 스타일을 설정 할 땐, Inline Styles 를 사용합니다. style 을 JavaScript 객체형으로 만들어서 사용하는 것이죠 물론,…

[Link] React.JS 와 함께 사용하면 좋은 도구 목록

velopertNo Comments
https://github.com/facebook/react/wiki/Complementary-Tools React.JS 와 함께 사용하면 유용한 도구들의 목록이다. 쓸만한 AJAX 도구들이 axios 외에도 뭐가 있나 알아보다가 찾게 됐다. 디버깅도구, 라우팅도구, UI 컴포넌트, 스타터 킷 등등등 유용한 도구들이 많이 있다 언젠간 나도 쓸만한 도구를 만들어서 저기에 올려야지 😀…

[React.JS] 강좌 11편 Express.js 서버 + 개발 서버 Hot Module Replacement 사용하기

velopert42 Comments
지금까지, React.js 에 대한 기본적인 공부는 어느정도 마쳤습니다. 이제, REST API 를 만들어서 서버와의 통신에 손을 뻗을 차례입니다! 지금까지는 webpack-dev-server 에만 의존해왔습니다. 이걸로는 서버 작업을 전혀 할 수가 없었죠. 이번 강좌에서는 React.js 를 Node.js 환경의 인기있는 웹프레임워크 중 하나인 Express.js…

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

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

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

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

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

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

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

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

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

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