15호의 개발자

[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..

[JavaScript] JSON와 AJAX에 대해 JSON이란? JSON은 JavaScript Object Notation의 약자로, 웹과 컴퓨터 프로그램에서 용량이 적은 데이터를 교환하기 위해 데이터 객체를 속성-값의 쌍(Attribute-Value Pairs) 형태로 표현하는 개방형 표준 포맷이다. 비동기 처리에 사용되는 AJAX에서 XML을 대체하여 사용되고 있다. AJAX이란? AJAX는 Asynchronous JavaScript and XML의 약자로, 자바 스크립트를 사용하여 클라이언트와 서버 간에 XML 데이터를 주고 받는 비동기 통신 기술이다. 전체 페이지를 새로 고치지 않고도 웹 페이지 일부 영역만을 업데이트 할 수 있게끔 구현할 수 있다. 인터페이스 구현 인터페이스 구현이란 송·수신 시..

[JavaScript] 자바스크립트 기본 문법 몇 가지_1탄 1. 객체 안에 함수 넣기 자바스크립트에서는 객체 안에 함수를 넣을 수 있다. 함수가 객체 안에 들어가게 되면, this는 자신이 속한 객체를 가르킨다. const fruit = { name: "apple", say: function say() { console.log(this.name); } }; fruit.say(); // "apple" 추가적으로, 이 경우 함수는 이름이 없어도 된다. const fruit = { name: "apple", say: function() { console.log(this.name); } }; fruit.say(); // "apple"

[JavaScript] 객체 비구조화 할당 (객체 구조 분해) 객체 비구조화 할당 (=객체 구조 분해)을 이용하면 객체 안에 있는 값을 변수나 상수로 바로 선언해 주므로, 코드가 좀 더 간결해질 수 있다. 아래의 코드를 바로 봐보자. const fruit = ["apple", "grape", "banana"]; const [a, b] = fruit; console.log(a); // "apple" console.log(b); // "grape" const [a, b] = fruit; 부분이 비구조화 할당 문법이다. fruit 배열의 인덱스 0, 1번째의 값이 각각 a, b에 할당된다. 키-값 형식에서도 비구조화 할당이 가능하다. const fruit = { num: 4, name: "apple", pri..

[JavaScript] 템플릿 리터럴 사용법 (ES6부터) 자바스크립트는 2015년 이후 매년 새 버전이 나온다. 2015년에 업그레이드 된 자바스크립트는 ES6이라고 불리며 ES2015라고도 한다. 2016년에 나온 자바스크립트는 ES7(ES2016), 2017년에 나온 자바스크립트는 ES8(ES2017), 2018년은 ES9(ES2018), 2019년은 ES10(ES2019).. 템플릿 리터럴은 이중 ES6에 새롭게 도입된 문법이다. 문자열을 조합할 때 기존에는 + 연산자를 이용해 조합했던 것을 템플릿 리터럴 도입 이후에는 ` ${} ` 을 이용해서 사용할 수 있다. 사용 방법은 간단하다. const name = 'world'; console.log('Hello ' + name ); 기존에는 + 연산..

[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 뒤에는 만들고자 하는 디렉터리 명을 적으면 된다. 디렉터리가 정상적으로 설치되었다면 이제 리액트를 실행해보..