React

[Node.js] express를 backend로 하는 Create-react-app

1. 개발환경 세팅 이번 프로젝트에서 Node.js에서 많이 사용하는 프레임워크인 Express로 백엔드를 구성하고 Create-react-app으로 프론트를 구성해보려고 한다. 이번 포스팅에서는 Express 앱을 만들고 react앱과 서버를 연결해주려고 한다. 프로젝트의 전체 폴더 안에 back와 front폴더를 각각 나눠주고, back 폴더에는 express, front폴더에는 react 앱을 세팅해준다. 2. Express Generate 로 express 앱 만들기 Express-generator는 Express 환경을 간단하게 구축해주는 npm이다. 따라서 사용하면 쉽게 Node.js 개발을 할수 있다는 장점이 있다. express-generator를 설치해서 Express App을 만든다. ..

[React] github pages에 배포하기 (Publishing)

Intro CRA로 만들 페이지를 github pages에 deploy하기 Github Pages GitHub Pages는 GitHub 에서 제공하는 무료 서비스인데, html, css, javascript를 올리면 그걸 웹사이트로 만들어서 전세계에 배포해주는 무료 서비스이다. 1. gh-pages 설치 GitHub Pages에 배포하기 위해서는 gh-pages 툴을 설치한다. gh-pages는 결과물을 GitHub Pages에 업로드 할 수 있게 해주는 패키지이다. npm i gh-pages 2. build 실행 package.json에는 build script가 있는데, 이 script를 실행하면 우리 웹사이트의 production ready code를 생성하게 된다. (* production rea..

[React] React Router 사용하기

Intro React Router 사용 Router끼리 이동 1. React Router 사용하기 우리는 라우터 라이브러리를 사용하기위해 설치가 필요하다. npm install react-router-dom 물론 이 전에 CRA(creat-react-app)을 해주었다는 가정을 한 상태이다. 아무튼 우리는 원래 App 컴포넌트에 만들었던 모든 로직을 별개의 장소(Home)로 옮기고, App.js에는 react-route-dom의 컴포넌트(Router, Routes, Route)를 가져다 쓸 것이다. 그리고 이 컴포넌트들은 url을 바라보고 있으며, url이 바뀌면 어떤 것을 보여줄 것인지 결정한다. 컴포넌트를 사용하기 위해서는 먼저 import를 해줘야한다. import { BrowserRouter as..

[React] API 사용하기

Intro React에서 영화 API 데이터를 가져와서 컴포넌트에 보여주기 API 에서 가져온 데이터는 JSON 형식이라, 배열 State를 사용하게 된다. 이는 이전 포스팅 설명했으니 참고하자. [React] 배열 State Intro 간단한 ToDo-list 어플 배열 State에 새로운 값 추가하기 배열 State값을 component로 render하기 State 연습을 위해 할 일을 추가할 수 있는 간단한 투두리스트 어플을 만들어보려고 한다. State의 기본 hu-coding.tistory.com API 에서 데이터 받아오기 먼저, 영화 API 주소를 이용해 데이터를 가져오려고 한다. https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_b..

[React] 배열 State

Intro 간단한 ToDo-list 어플 배열 State에 새로운 값 추가하기 배열 State값을 component로 render하기 State 연습을 위해 할 일을 추가할 수 있는 간단한 투두리스트 어플을 만들어보려고 한다. State의 기본적인 내용은 이전 포스팅에 정리해놓았다. [React] State Intro 버튼을 몇 번 클릭했는지 세는 어플 React.js의 state 컴포넌트에 state 추가 state 변경 시 UI 리렌더링 state란? 기본으로 데이터가 저장되는 곳. 이 어플에서는 버튼을 몇 번 클릭했는지 세는 counter hu-coding.tistory.com 배열 State 할 일(toDo)를 여러개 저장하기 위해 배열 State인 toDos를 정의한다. const [toDo, ..

[React] Effects (useEffect, clean-up)

Intro useEffect Clean-up 예를 들어, 우리가 검색 api를 사용하려고 할 때 맨 처음 api를 호출해 데이터를 받아온다. 하지만 이후에 버튼을 클릭하든.. 어떤다 state가 변경될때마다 다시 그 api를 또 호출한다면? 매우 비효율적이다. 그래서 우리는 가끔은 특정 코드들이 처음 한번만. 즉 첫번째 컴포넌트의 render에만 실행되도록 하고 나중에 state가 변하더라도 그 코드들을 다시 실행되지 않도록 하고 싶다. useEffect function React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행할지를 알려주는데, 아래의 예시처럼 특정 코드들을 특정한 때에만 실행되도록 하고 싶을때 사용할 수 있다. useEffect 함수는 두 개의 인자(argument)를 가지고 있다. us..

[React] Props (Memo, Props Types)

Intro 두 개의 같은 디자인의 버튼을 만듬 Props Memo Props Types Props 일종의 방식. 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보낼 수 있게 해주는 방법 text가 다른 여러 button에 같은 style을 주고 싶을 때, 버튼 컴포넌트마다 style을 복사하는 건 비효율적이다. 따라서 style의 설정들을 넘겨줄 수 있는 button 컴포넌트를 하나 만들어서 재사용하는것이 좋다. button 함수형 컴포넌트를 하나만들었다. 여기에 버튼마다 다른 text를 주려면 어떻게해야할까? 바로 여기서 사용하는 것이 Props이다. 커스텀 컴포넌트에 데이터를 전달시키기 위해 구문(syntax)를 이용한다. img 태그의 src="" 라던지, button에 EventListner을 붙여..