15호의 개발자

1. JSX랑 JavaScript는 섞어 쓰지 않는 게 좋다. 이 경우 자바스크립트로 작성한 것은 class의 메서드로 만들면 보기도 좋다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 render() { return ( {this.state.first} x {this.state.second} = ? { e.preventDefault(); if (parseInt(value) === this.state.first * this.state.second) { this.setState({ result: '정답', first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random..

리액트의 변화 리액트 초기에는 React.createClass를 이용했었는데, 후에 Class가 도입되었고 2018년 10월에 Hooks가 새롭게 도입되어 현재를 이를 주로 쓴다. 리액트를 왜 사용하는가 1. 사용자 경험이 좋다 일반적으로 웹보다는 앱이 사용자 경험(UX)이 더 좋다. 앱과 같은 경험을 웹에서 구현하기 위해 SPA(Single Page Application)을 이용하는데, 리액트는 이 SPA를 실현할 수 있으므로 전통적인 웹페이지보다 사용자 경험 면에서 더 낫다. 2. 컴포넌트의 재사용이 가능하다 웹페이지를 보면 단일 페이지 안에서도 겹치는 부분(컴포넌트)이 있다. 리액트를 이용하면 컴포넌트를 재사용하기 쉽고, 유지/보수에도 용이하다. 3. 데이터와 화면의 연동이 좋다 웹 앱을 만들 때 ..

리액트의 불변성 리액트에서는 state 값을 변경할 때 불변성을 지켜야 한다. 불변성이란 어떤 값을 직접 변경하면 안 된다는 의미로, 변경하는 대신 복사 등의 방법을 통해 새로운 값을 만들어야 한다. 스프레드 연산자를 이용하여 불변성 지키기 리액트 사용시 불변성을 지키기 위한 방법으로, 스프레드 연산자(spread operator)를 이용하여 객체를 얕은 복사(shallow copy)하는 방법이 있다. 스프레드 연산자는 '...' 로 표기하며 다음과 같이 사용한다. const a = { a1: 1, a2: 2 }; const b = a; a === b; // true const c = { ...a }; a === c; // false const b = a 는 대입연산자를 이용한 것으로, a === b 에..

[React] 리액트 프로젝트를 깃허브에 배포하는 방법 (GitHub Pages) create-react-app을 이용해 리액트 프로젝트를 제작하였다면 이제 이 프로젝트를 배포하여 다른 사람에게도 알려보자. 오늘 알려주는 방법은 별도의 서버 없이 GitHub Pages를 이용하여 리액트 앱을 배포하는 방법이다. 이를 따라하기 위해서는 깃허브 계정만 있으면 되며 별도의 비용은 들지 않는다. 1. 깃허브에 로그인한 뒤 repository를 하나 생성한다. 나의 경우 리액트를 이용해 영단어 애플리케이션을 미리 만들어 놨으므로 리파지토리명을 voca_app으로 지었다. 2. 깃을 이용해 깃허브에 리액트 프로젝트 파일들을 올린다. 깃허브에서는 repository를 하나 만들면 친절하게도 파일을 어떻게 올리는지 알..

[React] 리액트에서 REST API 구축하기 (+REST API란?) 1. JSON-SERVER 이용하기 JSON 서버를 이용하면 빠르고 쉽게 REST API를 구축해준다. (이는 사실상 가짜 API 서버이므로 실제 프로젝트 개발시에는 사용하면 안 된다.) 준비물: 데이터가 정리된 json 파일 콘솔에 아래와 같이 입력하고, global(-g)로 설치를 해준다. npm install -g json-server 설치가 완료됐으면 위에서 준비물로 언급한 json 파일을 기반으로 한 서버를 열어본다. json-server에게 json 파일을 watch 하도록 시키는 명령어이다. json-server --watch json파일위치 --port 3001 json파일위치에는 예를 들어 ./src/파일명.jso..

[React] json-server --watch 실행 시 에러 해결 npm install -g json-server 로 json-server를 설치한 후 --watch를 하였는데 아래와 같은 에러가 발생하였다. json-server : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\유저명\AppData\Roaming\npm\json-server.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + json-server --watch ./src/db/data.json --port 3001 + ~~~~~~~~~~~ + Cate..

[React] 리액트로 페이지 이동 구현 (react-router-dom) 리액트로 페이지를 이동하려면 라우팅을 이용해야 한다. 우선 콘솔에 npm install react-router-dom을 입력하여 리액트라우터돔을 설치한다. 리액트 라우터 돔의 BrowserRouter, Route, Switch를 우선 알아보자. 이를 사용하기 위해서는 상단에 import를 해야한다. import { BrowserRouter, Route, Switch, Link } from "react-router-dom"; 1. BrowserRouter URL과 UI를 동기화해주는 라우터이다. 웹 애플리케이션이 History API를 사용하여 페이지를 새로고침 없이 주소 변경이 가능하게 하고, 관련된 정보를 props로 쉽게 조회..

[React] 리액트의 기초 문법 몇 가지_3탄 [React] 리액트의 기초 문법 몇 가지_1탄 [React] 리액트의 기초 문법 몇 가지_1탄 1. 태그는 항상 닫혀있어야 한다 태그는 열린 개수와 동일한 개수만큼 닫혀있어야 한다. HTML에서는 input이나 br 태그의 경우 태그를 닫지 않아도 사용 가능 unit-15.tistory.com [React] 리액트의 기초 문법 몇 가지_2탄 [React] 리액트의 기초 문법 몇 가지_2탄 '리액트의 기초 문법 몇 가지_1탄'은 아래 링크에서 확인할 수 있다. https://unit-15.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%EA%B8%B0%EC.. unit-15.tistory.com..

[React] 리액트 기본 디렉터리 및 파일 설명 리액트 프로젝트를 만들기 위해 create-react-app 을 명령하면 생성되는 기본 파일들이 몇 개 있다. 오늘은 그 기본 파일에 대해 알아보자. node_modules node_modules라는 디렉터리에는 1,000여개에 달하는 폴더가 있고 그 안에는 엄청나게 많은 파일이 있다. 이 디렉터리는 리액트 프로젝트를 실행할 때 사용되는 dependency 모듈들이 모두 모여있는 폴더이다. 여기에 설치되어있는 모듈들은 package.json 파일의 dependencies 부분에 다 적혀있다. 그렇기 때문에 프로젝트를 깃에 올릴 때 용량이 큰 node_modules은 보통 지우고 올린다. 이 디렉터리를 지우면 프로젝트는 실행되지 않지만, package.js..

[React] 리액트 프로젝트 디렉터리 생성하는 방법 (create-react-app) 리액트 프로젝트 폴더를 생성하기 위해서는 우선 NPM과 create-react-app 모듈이 설치되어있어야 한다. 우선 콘솔(터미널)에서 NPM이 설치되어있는지 확인한다. npm -v 버전이 뜬다면 제대로 설치되어 있는 것이다. 이후 create-react-app 모듈을 설치한다. 콘솔에 아래와 같이 입력한다. sudo npm install -g create-react-app 설치가 완료되었다면 이제 리액트 프로젝트 디렉터리를 만들 수 있다. create-react-app 디렉터리명 create-react-app 뒤에는 만들고자 하는 디렉터리 명을 적으면 된다. 디렉터리가 정상적으로 설치되었다면 이제 리액트를 실행해보..