HumanWater

이제 리액트를 이용한 레이아웃 구성을 위해 필요한 Component(컴포넌트)에 대해서 알아보자. # Component 직역하자면 '구성요소' 라는 뜻을 가지고 있고, 우리가 흔하게 볼 수 있는 웹페이지들도 이러한 '구성요소'가 1개 이상으로 이루어져있다. 위 그림 같은 경우에도 [ Header ], [ Main ], [ Footer ] 라는 컴포넌트로 이루어진 웹페이지며, 이런 구조를 흔하게 다른 사이트에서도 볼 수 있을 것이다. ( 또한, 위 세개의 컴포넌트를 또 감싸고 있는 또 다른 컴포넌트를 정의해서 사용할 수도 있을 것이다. ) 그리고 [ Header ] 라는 컴포넌트 안에 로그인, 검색 이라는 기능을 있듯이, 각 컴포넌트 별로 사용자와 인터랙션이 가능한 기능들을 정의할 수도 있다. 즉, 각 컴..

Javascript/React 2020. 7. 27. 13:15

프로젝트 루트 경로 . / wmv-pjt --- webpack 글로벌 설치 npm install -g webpack webpack-dev-server --- front 폴더 생성 mkdir web-react cd web-react npm init => package.json 파일 생성 확인. --- react, react-dom 설치 npm install --save react react-dom --- babel 설치 npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react --- hotloader 설치 npm install --save-dev react-hot-loader webpack webpack-dev..

Project 2020. 7. 22. 13:10

# React 매우 심플하게 정의하면, 페이스북에서 개발한 Javascript View(UI) 라이브러리. 사실상, 단순한 구조의 웹페이지를 만들 때는 위와 같은 Javascript 라이브러리나, 프레임워크들을 채택해서 사용할 필요는 없다. 하지만 단순 웹페이지를 넘어, 사용자와의 인터랙션(Interaction)이 자주 일어나고 무수한 웹페이지들이 서로 관계를 맺고 있는 웹어플리케이션 같은 경우, React.js / Vue.js / Angular.js 와 같은 도구를 쓴다고 한다. 그리고 현 시점에서 웹개발 - 프론트엔드 쪽에서 가장 Hot 하게 사용되어지고 있는 것이 리액트(React) 라이브러리이다. 실제 어느정도 규모감이 있는 기업의 웹사이트나, 어플리케이션 등을 보면 리액트 라이브러리를 사용하고 ..

Javascript/React 2020. 7. 18. 16:22