본문 바로가기

전체 글

 (47)
3] React 앱 deploy하는 법 1. deploy하는 법 페이지 소스에서 아래 부분을 보면 용량이 나와있는데, Hello, World!라는 출력문밖에 없는데 1.7MB인 이유는 개발자를 편하게 하기 위한 기능을 다 넣어두었기 때문이다. 하지만 사용자에게 너무 무거운 파일을 배포할 수 없다. 원래는 npm run start 라는 명령어를 통해 페이지를 열었지만, npm run build 라고 명령어를 입력하면 새로운 build라는 디렉토리가 추가된다. build디렉토리 안에는 우리가 알고 있는 파일들이 있지만, 코드를 확인해보면 공백이 하나도 없다. 이미 가지고 있는 불필요한 정보들을 모두 살균시켰기에 그러한 상태이며, 그래서 용량이 작다. 보안적으로, 또한 심미적으로 좋지 않은 부분을 없앤 후에 index.html을 알아서 처리해주는 ..
2] Create-react-app 샘플 app 수정해보기 1. 디렉토리 디렉토리 구조를 보면 src, public이 있는데, 현재 보이는 페이지는 index.html이라는 파일이며, 이 파일은 public디렉토리 내에 있다. index.html을 보면 id='root'가 있다. 리액트를 통해 컴포넌트들을 만들어 갈 때, id가 root인 곳인 태그 안에 컴포넌트를 넣도록 약속을 해 놓은 것이다. 코드를 확인하면 index.html에는 적혀있지 않지만 리액트를 통해 만든 태그들이 삽입된 것을 확인할 수 있다. 그렇다면 컴포넌트들은 어디서 수정할 수 있을까? 바로 src디렉토리 내에서 수정할 수 있다. 앞으로 리액트로 개발을 하게 되면 src 디렉토리 안에 파일을 만들어 작성할 것이다. 진입 파일은 index.js이고, 이 파일에서 주목해야 할 부분은 빨간색 박스..
1] React 설치 (윈도우에 create-react-app설치) 1. React facebook.com에서 UI(사용자 인터페이스)를 더 잘 만들기 위해 만든 자바스크립트 UI이다. 웹 사이트는 많아지는 정보에 따라 매우 빠른 속도로 복잡해진다. 정보를 표현하는 html태그들은 점점 복잡해지고, 그에 따라 코드는 더욱 복잡해진다. 2. React의 대략적 모습 수많은 태그로 이루어진 웹페이지 파일(main.html)이 있고, 이 코드는 top, body, bottom으로 나뉘어져있다고 가정해보자. 그렇다면 React는 간단히 말해서, top을 이루는 태그들을 따로 빼서 top.html이라는 파일을 만들고, 메인을 이루는 main.html에서 분리된 top을 불러 지금까지 몇 십줄이었던 top을 이루는 코드 대신에 이라는 사용자 정의 태그를 사용하는 것이다. 이렇게 사..

티스토리툴바