누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
리액트 프로젝트는 보통 우리가 옛날에 jQuery 같은것을 단순히 <script src="..."><script> 의 형태로 불러와서 사용했던 것 처럼 사용하지는 않습니다. 그렇게 하려면 할 수 는 있는데 굉장히 제한적입니다. 그…
Category: tech.log
누구든지 하는 리액트 1편: 리액트는 무엇인가
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
프론트엔드 라이브러리 / 프레임워크
리액트는 정말 인기있는 프론트엔드 라이브러리입니다. 그런데 일단, 리액트에 대해서 알아보기전에, 이 프론트엔드 라이브러리란게 정확히 뭔지, 그리고 왜 필요한건지에 대해서 알아봅시다.
일단, 여러분이 웹사이트를 만들기…
리액트 컴포넌트 스타일링, API 연동 실습 – NASA 에서 오늘의 우주 사진 가져오기
이번 튜토리얼에서는 Sass 를 사용하여 컴포넌트 스타일링을 연습삼아 해보고, NASA 에서 Open API 로 제공하는 Astronomy Picture of the Day (오늘의 우주사진)들을 가져와서 화면에 띄워주는 작업을 진행해보겠습니다.
리액트 프로젝트에서는 다양한 방법으로 컴포넌트를 스타일링 해줄 수 있는데요 (리액트 컴포넌트 스타일링 포스트),…
React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기
이 포스트는 React 에서는 불변함 (Immutability) 를 지키며 상태 관리를 하는 것을 매우 편하게 해주는 라이브러리 Immutable.js 에 대해서 알아보겠습니다.
서론
리액트를 사용하신다면, Immutability 라는 말, 한번쯤은 들어보셨을겁니다. 리액트 컴포넌트의 state 를 변경해야 할 땐, 무조건, setState 를 통해서 업데이트…
React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기
이 포스트는 Fastcampus 의 리액트 강의 에서 사용된 강의 자료로서, 부연설명이 조금 생략되어있습니다. 기초가 부족하시다면 좀 오래되긴 했지만 저의 강의목록 에서 나오는 3편, 4편, 5편, 7편을 가볍게 읽고오세요 (해당 강의들의 실습은 따라하지 않으셔도 됩니다)
0. 시작하기
이번에는 프론트엔드 기초를 다룰때면…
리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components
이 자료는 오래되었습니다! 최신화된 자료는 제가 벨로그에 올린
다양한 방식의 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components 를 읽어주세요.
리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components
리액트에서 컴포넌트 스타일링에 있어서는, 동일화된 방식이 없습니다. 개발자마다, 그리고…
react-router :: 3장. 서버사이드 렌더링
이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요.
3장. 서버사이드 렌더링
이번 장에서는 리액트 어플리케이션을 서버사이드 렌더링 하는 방법을 알아보겠습니다. 여러분이 리액트를 통해 어플리케이션을 개발하게 될 때, 서버사이드 렌더링을 구현 할 수도, 하지 않을 수도 있습니다. 필수작업은…
react-router :: 2장. 코드 스플리팅 (Code Splitting)
이 포스트는 조금 오래된 포스트입니다 (2018년 9월 기준 아직 작동은 합니다)
새로 작성된 포스트가 있으니 velog 에 올린 리액트 프로젝트 코드 스플리팅 정복하기 포스트를 읽어주세요.
이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요.
2장. 코드 스플리팅 (Code…
react-router :: 1장. 리액트 라우터 사용해보기
이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요.
SPA 란?
Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며,…
리액트 라우터, 코드 스플리팅, 그리고 서버사이드 렌더링 :: 목차
이번 강의에서 다룰 주제는 리액트 라우터입니다. 리액트 라우터를 사용하면서, 웹팩을 설정하는 방법을 배우면서 프로젝트 코드를 빌드 할 때 여러 파일로 저장하는 Code Splitting 에 대해서 알아보고, 또 SEO (검색엔진 최적화) 및 초기 렌더링 성능 등을 위한 서버사이드 렌더링을 하는 방법도…
리덕스 미들웨어, 그리고 비동기 작업 (외부데이터 연동)
이 문서는 패스트캠퍼스 오프라인 강의를 위해서 준비된 문서이기에, 일부 내용들은 설명이 생략되어있을 수도 있습니다.
이번 강의에서 다룰 주제는 리덕스 미들웨어를 사용하여 외부 데이터를 연동하는 방법을 다뤄보겠습니다.
외부 데이터를 연동하기 위해서 리덕스, 그리고 리덕스 미들웨어들이 꼭 필요한것은 아닙니다. 리액트 컴포넌트와 내부…
Redux 를 통한 React 어플리케이션 상태 관리 :: 5장. 주소록에 Redux 끼얹기
이 튜토리얼은 5개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요.
5장. 주소록에 Redux 끼얹기
이번 장에서는 이전에 우리가 만들었었던 주소록 프로젝트에 Redux 를 적용해보겠습니다. 기존의 코드에선 프로젝트의 모든 로직을 App 컴포넌트에서 관리했었습니다. 사실상, 이 프로젝트는 소규모 프로젝트이기 때문에 App…