본문 바로가기

WEB44

[React] 리액트에서 CSS 수정 + Deploy(배포) 하기 리액트에서의 방법이라기 보다 create-react-app의 지배 하에서 css를 어떻게 할까? 에 대한 방법이다. index.js 파일에 index.css를 import 한 것을 확인할 수 있다. index.css에 들어와서 배경색을 바꿔주면 적용된 것을 볼 수 있다. Deploy(배포) 하기 그 전에 우리가 셋팅해놓은 리액트 앱을 살펴보았다. 보이는 웹 브라우저에서 새로고침 우클릭해서 캐시 비우기, 강력 새로고침을 한다. 보통 성능을 높이기 위해서 뭔가 다운받아서 보관하는데 이것을 캐시라고 한다. 강력 새로고침을 통해 캐시를 삭제한다. 이렇게 해서 실행을 하면 용량이 약 1.7MB 이라고 나온다. 기능이 없는데 왜 1.7MB 이냐, 리액트가 개발 편의성을 위해서 여러 기능들을 추가해놓은 상태이다. c.. 2021. 9. 28.
[React] JS 코딩부터 시작 create-react-app이 제공하는 샘플 앱을 우리가 수정하는 것으로 시작해보자 어떤 디렉터리 구조인지, 어디를 수정하면 코딩을 할 수 있는지 알아보았다. public이라는 디렉터리는 index.html 이 있는 곳이다. react로 만들어진 애플리케이션이 웹브라우저에서는 index.html을 실행한 결과이다. index.html에서 우리가 신경 쓸 부분은 div 태그에서 id="root" 인 부분이다. 리액트를 통해서 컴포넌트들을 만들고 그 컴포넌트들을 이 root 안으로 들어가도록 create-react-app은 약속을 해놓았다. create-react-app이 기본설정한 웹 브라우저의 html을 보면 id가 root 인 태그 안쪽에 react를 통해서 만든 태그들이 들어간 것을 볼 수 있다. .. 2021. 9. 27.
[React] 개발환경 setting npm 설치 node.js 로 만들어진 프로그램을 쉽게 설치할 수 있는 앱스토어 같은 것 npm을 설치할 때는 node.js라는 프로그램을 컴퓨터에 깔면 된다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 안정적인 버전, 최신 버전 두 가지 버전이 있는데 난 안정적인 버전을 깔았다. 그리고 cmd를 켜서 npm이 잘 설치되었는지 확인한다. npm-v 을 쳐서 숫자가 나오면 잘 설치된 것이다. 이제 npm으로 create react app을 설치할 것인데 컴퓨터 어디에서든 사용할 수 있도록 -g (global)옵션을 줄 것이다. npm instal.. 2021. 9. 26.
[React] 리액트 맛보기 리액트는 facebook.com의 UI를 더 잘 만들기위해서 페이스북에서 만든 자바스크립트 UI 라이브러리이다. 사용자 정의 태그를 만들어주는 여러 기술이 있는데 리액트도 이런 기술 중 하나이다. 리액트에서는 사용자 정의해서 태그를 만드는 것을 "컴포넌트"라고 칭한다. 이렇게 컴포넌트를 작성하면 가독성을 높일 수 있다. 그리고 서브페이지가 있다면 그 페이지에서도 컴포넌트를 가져다 쓸 수 있다. 한 컴포넌트를 개선, 수정하면 해당 컴포넌트를 사용하는 모든 태그들에서 동시에, 실시간으로 반영이 된다. 1. 가독성 2. 재사용성 3. 유지보수 나름대로 요약하자면 조각기능, 조각html 인 것 같다. 웹 사이트는 매우 빠르게 복잡해진다. 정보가 조금만 증가해도 정보를 표현하는 html 태그는 기하급수적으로 늘어.. 2021. 9. 24.

티스토리툴바