본문 바로가기

분류 전체보기

 (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을 이루는 코드 대신에 이라는 사용자 정의 태그를 사용하는 것이다. 이렇게 사..
[4] React State 일단 강의 진도는 현재 컴포넌트 파일 분리하기까지 했다. 이전의 실습해서 App.js 파일에 한꺼번에 만들었던 컴포넌트들을 src 디렉토리에 components 디렉토리를 만들어서 각자 클래스 이름으로 js 파일을 만든 다음에 분산시켰다. 다음 코드 형식과 같이 모두 분리해보았다. 본래 컴포넌트 클래스를 가져다가 와서 React를 불러오는 코드를 상단에 추가해 준 다음에 export 문을 추가하여 다른 파일에서 이 파일을 import 할 수 있도록 해 주었다. 그리고 App.js에서 이 파일을 불러와야 하므로 상단에 import 문으로 불러와서 App.js에서 오류가 나지 않고 잘 사용되는 모습을 볼 수 있었다. 분할을 하더라도 보이게 하는 메인 코드는 같기 때문에 결과에는 지장이 없었다. 다음은 sta..
[3] React가 없다면? React의 장점 일반 html 코드를 react로 옮기는 연습을 간단하게 해 보았다. 이것이 컴포넌트의 느낌인가, 싶었다. 확실히 편하기는 할 것 같다. 웹 프로그래밍 프로젝트를 하면서 엄청 복잡하고 나눈다고 나눠도 나눠지지도 않고 관리도 힘들었는데 리액트로 작업을 하면 한 눈에 볼 수 있을 뿐더러 분할되니 관리도 훨씬 편리할 것 같았다. 같이 일할 때에도 많이 도움이 될 듯 하다. 컴포넌트를 몇 개 더 실험삼아 추가해보았다. 리액트는 일단 '정리의 도구' 정도로 보면 된다고 한다. 이것을 다른 사람이 정의한 웹 페이지나 나의 웹 페이지에 가져와서 쓸 수 있다는 엄청난 장점이 있다. 위와 같이 정의하던 태그 안에 this.props.title과 같이 props(속성 attribute와 동일한 것이라고 생각하면 됨)를 사..
[1-1] React 설치 오류 'npm run start' vs code에서 리액트 샘플 창을 띄우려고 npm run start를 했으나 위와 같은 오류가 나면서 실패함. "scripts": { "start": "react-scripts start" } 이 줄을 추가하니 이제 다른 오류가 발생해서 오류 메세지를 한 번 읽어보았다. 일단 생활 코딩에서 나오는 실행 전에 화면과 같은데, 어떤 요구되는 파일이 없는 것 같았다. 여러가지를 시도하고 깔아봤는데 결국은 정말 index.html 파일이 없어서 문제였다. 깔리는 과정에서 2.1.8을 제대로 깔았다고 생각했는데 그냥 최신 버전이 문제였다. 최신 버전을 까니까 튜토리얼대로 잘 진행된다. 이유는 모르겠다...
[1] 생활코딩 React 공부 시작 class 기반의 객체 지향 프로그래밍을 기본으로 수업을 진행할 예정. 웹사이트는 매우 빠르게 복잡해진다. html 코드로 구현을 하려면 정말 정말 복잡해진다. 복잡한 코드를 정리하고 싶어지는 욕망에 따라 리액트를 사용하면 구현 시에 큰 도움이 될 것이다. 이것이 우리가 리액트를 배워야 하는 이유이다. 리액트는 컴포넌트로 이루어져 있다. '컴포넌트'를 이용하는 것이 기본이자 최대의 장점이다. 가독성, 재사용성, 유지보수 면에서 큰 장점을 가지고 있다. 남들이 만든 컴포넌트를 사용하여 더 많은 UI를 개발할 수 있다. coding -> run -> deploy 방식으로 진행할 예정이다. 공식 문서에 익숙해지는 것이 좋다. 1. 개발환경 세팅하기 https://ko.reactjs.org/docs/gettin..
2] Docker 설치(1) 1. root권한 변경 docker daemon은 root권한으로 돌아가고 있기 때문에, root권한으로만 실행할 수 있다. 그래서 docker명령어를 적을 경우, 1) 명령어 앞에 sudo를 붙인다. 2) docker그룹에 유저를 추가해준다. 3) 아예 root로 바꾸어 명령어를 적는다. 를 해야하는 데, 이 중 3번을 택하여 다음 명령어를 통해 root로 바꾸어준다. sudo -s 2. docker 설치 docker 설치를 위해 다음 명령어를 적어준다. curl -fsSL https://get.docker.com/ | sudo sh 3. Imgae 실행 docker run ubuntu:16.04 위 명령어를 통해 ubuntu:16.04 이미지를 실행하면 되는데, 문제가 발생했다. 이런 에러가 나오며,..
[1] Python for WEB 오늘은 생활코딩에 있는 Python을 웹에 어떻게 이용하면 될지에 대한 강의를 들었다. 앞으로도 계속 이 강의를 베이스로 파이썬을 다뤄 볼 예정이다. https://opentutorials.org/course/3256/19805 Python 수업 예고 - 생활코딩 수업소개 이 수업에서는 WEB1에서 만든 웹사이트에 Python을 투입했을 때 어떤 효과를 얻을 수 있는지를 알려드리는 수업입니다. 강의 opentutorials.org 1_Python을 배웠을 때 효과는 모든 html을 한 번에 바꿀 수 있는 효과. CGI라는 중요한 기술이 있다. 사용자가 받은 데이터를 원본 파일을 수정하지 않고도 나타내줄 수 있다. 이것이 파이썬과 웹 서버를 연동하면 좋은 점들이다. 2_설치 및 연동 환경 구축을 한다. c..
React와 React native란 1. React란? 리액트는 페이스북에서 제공해주는 frontend 라이브러리이다. 프레임워크가 아닌 라이브러리이기 때문에 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않기 때문에 가볍고 선택의 폭이 넓다. 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주변 개발자가 설계한대로 UI가 만들어져서 사용자에게 보여진다. 2. 왜 React를 사용하는가? 이것을 사용하지 않아도 웹페이지를 만들 수 있지만, 동적인 데이터를 UI에 전달하기에는 적합하지 않다. 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 쉽게 만들 수 있기 때문에 사용한다. 리액트를 사용하는 경우는 언제가 적합할까. 정적 서버를 만드는 경우라면 html을 사용하는 것이 클라이언트에게 전달하는 것이 단순하고 로딩 속..

티스토리툴바