Front-End (4) 썸네일형 리스트형 [React] (7) State 사용 앞에 State란 무엇인지 알아보았다. 이제 State를 사용하는 방법에 대해서 알아보자. 지금까지 만들었던 파일들 중에 App.js가 있을 것이다. 이곳에 state를 만들고 사용할 것인데 코드로 보면 알기 쉬울 것이다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 것은 constructor안에다.. [React] (3) 배포의 의미(Release, Deploy, Distribute)와 배포(Deploy)해보기 배포의 의미 프로그래밍에서 배포는 3가지의 단어로 나뉘어져있다. Release: 같은 제품을 새롭게 만드는 것(예: 새로운 버전을 배포, 새로운 아이피 번로 부여) Deploy: 프로그램 등을 서버와 같은 기기에 설치하여 서비스 등을 제공하는 의미 Distribute: 제품을 사용자들이 사용할 수 있도록 서비스 등을 제공하는 의미 이번 포스팅에서는 React를 Deploy하는 방법을 배워볼 것이다. 1. npm run build 아래 명령어를 입력하게 되면 build 파일이 생긴다 이곳에는 2장에서 여러개로 나뉜 파일들이 필요한 것들만 하나로 소스코드까지 줄여주면서 컴팩트하게 만들어준다. npm run build 알아보기는 힘들지만 이렇게 줄여준다. 2. nxp serve -s bulid 아래 명령어의 .. [React] (2) 생성된 폴더 각 활용 방법과 Component 변경 방법 앞선 포스트 1장을 잘 따라오셨다면 이번 장에서는 생성된 폴더의 각 파일들이 어떠한 역할을 하는지 알아보려고 한다. 위에서 보면 생선된 폴더들을 볼 수가있다. 각각 어떠한 역할을 하는지 알아보자. 언급하지 않은 파일은 현재 중요하지 않으니 넘어가도록한다. 1. /src/app.js 보시면 기본적으로 App.js가 화면을 구성하는 html역할을 App()이라는 함수에서 return하여 뿌려준다는 것을 알 수 있다. 각 내용들을 바꾸고 저장하면 localhost:3000 페이지의 내용도 바뀔 것이다. 2. /public/index.html 사실 진짜 html파일은 이곳에 저장되어 있다. 여기 보면 라는 곳이 있는데 이곳을 통해 뿌려주는 것이다. 뿌려주는 것을 정의해 주는 곳이 바로 /src/index.js .. [React] (1) React란 무엇인가, React 개발 환경 조성 이번 카테고리에서는 React라는 것이 무엇인지 알아보고 React개발 환경 조성과 사용방법을 차례대로 포스팅할 예정이다. React란? 간단하게 정의해서 프론트엔드 라이브러리이다. Angular, Vue.js와 같은 역할을 한다고 보면 된다. React는 페이스북에서 제공하고있다. 그리고 React로 만든 웹사이트는 html 태그가 있지만 내용물은 다른 저장소에 있어서 사용자들에게는 소스코드를 보이지 않게 할 수도있다. React는 기본적으로 Component기반이다. 이 뜻는 각 Component를 만들어 놓고 조립하듯 웹 페이지를 구성할 수 있다는 뜻인데 포스팅 뒤로 가면 그 뜻을 이해할 수 있을 것이다. React 개발 환경 조성 1. Node.js 설치 우선 node.js는 기본적으로 설치되어 .. 이전 1 다음
