누구든지 하는 리액트 4편: props 와 state

이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 리액트 컴포넌트에서 다루는 데이터는 두개로 나뉩니다. 바로 props 와 state 인데요, 미리 요약하여 설명드리자면 props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온…

누구든지 하는 리액트 3편: JSX

이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 리액트 컴포넌트에 대하여 조금 더 자세히 알아봅시다! 컴포넌트 파일 파헤치기 이전에 만든 hello-react 프로젝트를 열어보세요. 다음과 같이 프로젝트가 구성되어 있을 것입니다. 리액트를 사용하면 여러분의 웹 애플리케이션에서 사용하는 유저…

누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기

이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.   리액트 프로젝트는 보통 우리가 옛날에 jQuery 같은것을 단순히 <script src="..."><script> 의 형태로 불러와서 사용했던 것 처럼 사용하지는 않습니다. 그렇게 하려면 할 수 는 있는데 굉장히 제한적입니다. 그…

누구든지 하는 리액트 1편: 리액트는 무엇인가

이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 프론트엔드 라이브러리 / 프레임워크 리액트는 정말 인기있는 프론트엔드 라이브러리입니다. 그런데 일단, 리액트에 대해서 알아보기전에, 이 프론트엔드 라이브러리란게 정확히 뭔지, 그리고 왜 필요한건지에 대해서 알아봅시다. 일단, 여러분이 웹사이트를 만들기…

리액트 컴포넌트 스타일링, API 연동 실습 – NASA 에서 오늘의 우주 사진 가져오기

이번 튜토리얼에서는 Sass 를 사용하여 컴포넌트 스타일링을 연습삼아 해보고, NASA 에서 Open API 로 제공하는 Astronomy Picture of the Day (오늘의 우주사진)들을 가져와서 화면에 띄워주는 작업을 진행해보겠습니다. 리액트 프로젝트에서는 다양한 방법으로 컴포넌트를 스타일링 해줄 수 있는데요 (리액트 컴포넌트 스타일링 포스트),…

2017.log

2017.log 벌써 2017년이 끝나다니 정말 소름 돋는다. 대학생 시절, 그리고 그 전의 나는 매년 연말마다 뭔가 허탈함이 느껴지곤 했었다. 그냥.. 한 해동안 한게 별로 없다는, 달라진게 없다는 그런 느낌 때문이다. 하지만, 다행히도 이번엔 그렇지 않다. 누가봐도 한 해를 객관적으로 열심히…

React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기

이 포스트는 React 에서는 불변함 (Immutability) 를 지키며 상태 관리를 하는 것을 매우 편하게 해주는 라이브러리 Immutable.js 에 대해서 알아보겠습니다. 서론 리액트를 사용하신다면, Immutability 라는 말, 한번쯤은 들어보셨을겁니다. 리액트 컴포넌트의 state 를 변경해야 할 땐, 무조건, setState 를 통해서 업데이트…

React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기

이 포스트는 Fastcampus 의 리액트 강의 에서 사용된 강의 자료로서, 부연설명이 조금 생략되어있습니다. 기초가 부족하시다면 좀 오래되긴 했지만 저의 강의목록 에서 나오는 3편, 4편, 5편, 7편을 가볍게 읽고오세요 (해당 강의들의 실습은 따라하지 않으셔도 됩니다) 0. 시작하기 이번에는 프론트엔드 기초를 다룰때면…

Bitimulate :: 가상화폐 모의 투자 / 거래소 개발기

이 글은 제가 최근 진행한 사이드 프로젝트 비티뮬레이트 (https://bitimulate.com) 개발을 하면서 생각했던 점들, 그리고 프로젝트 구조, 후기 등에 대하여 작성한 포스트입니다. 이 프로젝트는 오픈소스로 깃헙에 공개 되어있습니다 – Github Repo 개발 계기 직장인으로서의 사이드 프로젝트 직장생활을 하면서 개인 개발을 하는건,…

리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components

이 자료는 오래되었습니다! 최신화된 자료는 제가 벨로그에 올린 다양한 방식의 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components  를 읽어주세요.   리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components 리액트에서 컴포넌트 스타일링에 있어서는, 동일화된 방식이 없습니다. 개발자마다, 그리고…

2017 0.5.log

벌써 2017 년의 반이 지났구나.   올해는, 음, 전역의 해였지. 그 긴 긴 군생활. 뭐 길어봤자 21개월이였지,,, 라는 말이 나올정도로, 군생활을 언제 했나… 싶을 정도로 나는 굉장히 바쁘고 바쁘고 바쁜 정신없는 한 해를 보내고있다.   전역을 하자마자 스타트업 회사 라프텔에…

react-router :: 3장. 서버사이드 렌더링

이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. 3장. 서버사이드 렌더링 이번 장에서는 리액트 어플리케이션을 서버사이드 렌더링 하는 방법을 알아보겠습니다. 여러분이 리액트를 통해 어플리케이션을 개발하게 될 때, 서버사이드 렌더링을 구현 할 수도, 하지 않을 수도 있습니다. 필수작업은…