(해당 포스팅은 '2019-04-30' 최종 수정되었습니다.)

다시 찾아온 히니입니다 :>

이번에는 React를 설치하는 과정을 설명하겠습니다.

저는 이번에 '생활코딩 인강', '노마드코더 인강', 'React 공식사이트 문서', 'React.js를 이용한 모던 프런트엔드 구축 책'으로 공부 한 후 정리합니다.

미리 말씀드리지만, 윈도우 기준으로 설명합니다.

(나중에 맥 기준 설명 추가할 수 있으면 할게요!)

 


( 흐름을 보시려면 맨 아래쪽의 '정리' 먼저 보셔도 됩니다. )

React를 실행해볼 수 있는 환경에는

1. 온라인 컴파일러

2. 기존 html 파일에 script로 불러오기

3. toolchian 설치

가 있습니다.

React 공식 사이트에서 가장 추천하는 방법은 2번인데요.

아무래도 간단하고 기존 사이트에 적용하기 쉬워서인 것 같은데,

생활코딩과 노마드코더에서는 3번을 이용해서 react를 설치합니다.

3번 방법이 제대로 된 설치이기 때문이죠!

그래서 저도 3번 방법 기준으로 정리해봤는데,

1번은 사이트만 알려드리면 돼서 공식사이트에서 추천하는 사이트의 url만 가져왔습니다.

 

 


 

1번 방법

온라인 컴파일러

 

URL만 올리겠습니다.

설치없이 들어가셔서 코드 짜고 그냥 실행하시면 됩니다!

https://codepen.io/pen?&editable=true&editors=0010 (codepen*)

https://codesandbox.io/s/new(codesandbox)

https://glitch.com/edit/#!/light-chef?path=README.md:1:0(Glitch)

 

 


 

2번 방법

script로 불러오기

 

 

2번 방법이 궁금하신 분은 공식사이트를 참조하시길 바랍니다.

 

https://reactjs.org/docs/add-react-to-a-website.html

 

간단히 코드 올려드리자면

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- Don't use this in production:-->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head>

<body>
    <div id="root"></div>
    <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script>
    <!-- Note: this page is a great way to try React but it's not suitable for production. It slowly compiles JSX with Babel in the browser and uses a large development build of React. Read this section for a production-ready setup with JSX: https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project In a larger project, you can use an integrated toolchain that includes JSX instead: https://reactjs.org/docs/create-a-new-react-app.html You can also use React without JSX, in which case you can remove Babel: https://reactjs.org/docs/react-without-jsx.html -->
</body>

</html>

이러합니다.

 

 


 

 

3번 방법

Tool chain

 

Tool chain 이란 서로 관련 있는 개발 도구들의 집합입니다.

공식 사이트에서는 경우에 따라 여러가지 Tool chain을 추천합니다.

 

https://reactjs.org/docs/create-a-new-react-app.html#more-flexible-toolchains

 

 

저는 Create React App 이라는 Tool chain을 사용할겁니다.

이 또한 페이스북이 제공하는 툴입니다.

(페이스북 당신은 대체...)

Create React App은 하나의 명령으로 React 프로젝트를 시작할 수 있는 개발환경을 세팅해줍니다.

(내부적으로 Babel과 webpack을 사용한다고 되어있지만, 공식 사이트에서 이것들을 알 필요는 없다고 명시함)

Tool chain 중

'패키지 매니저' 인 Yarn, npm은 개발환경을 설치, 업데이트하기 쉽게 해줍니다.

'번들러' 인 webpack, parcel은 모듈러 코드를 작성하고 그것들을 작은 패키지로 묶어서 로딩시간을 줄여줍니다.

'컴파일러'인 babel 은 모던 자바스크립트가 오래된 브라우저에서도 작동하게 해줍니다.

 

 


 

 

과정

1. npm 설치

CreateReactApp을 깔려면 npm이 필요합니다.

[npm 링크]

 

1-1. node.js 설치

https://nodejs.org/ko/download/

위의 node.js 사이트에서 사용중인 운영체제에 맞춰 node.js를 설치합니다.

(node.js를 설치하면 npm도 함께 설치됩니다.)

 

1-2. 커맨더 결정

여기서, 앞으로 쓸 커맨더를 결정하세요!

윈도우에서는 cmd, 맥은 터미널, 공통으로 VSC(Visual Studio Code)을 추천합니다.

다른 커맨더도 많으니 각자에게 맞는 커맨더를 찾아서 준비하시길 바랍니다.

 

1-3. npm 버전 확인

커맨더에

npm -v

를 입력해 node.js가 깔려있는지, 버전은 무엇인지 확인해보세요.

2. create-react-app 설치하기

npm을 설치했다면 create-react-app을 설치할 차례입니다.

npm install -g create-react-app

이렇게 명령어를 입력하면 최신 버전이 설치됩니다.

 

 


 

버전을 선택해서 설치하고 싶으면

npm install -g create-react-app@2.1.8

이런식으로 명령어를 입력하면 됩니다.

여기서 -g 옵션은 어디서든지 create-react-app을 이용할 수 있게 해준다는 뜻입니다.

 

 

npx create-react-app my-app

npx로 설치하셔도 상관없습니다

npx는 npm을 설치하면 같이 설치되는데, 프로그램을 1회용으로 설치하는 특수 소프트웨어입니다.

npx로 설치하면 사용하고 지워버립니다.

실무적으로 할 때는 항상 최신버전을 사용할 수 있는 npx가 주로 사용됩니다

sudo npm create-react-app my-app

리눅스나 유닉스에서는 앞에 sudo만 붙이면 됩니다.

권한 오류 때문입니다.

 

 


 

3. 폴더 생성하기

설치 후에는 컴파일할 파일들을 담을 폴더를 생성해야합니다.

create-react-app practice_react // 'practice_react'이라는 react app폴더 만들기

create-react-app practice_react
// 'practice_react'이라는 react app폴더 만들기

 

4. 컴파일 시작

시작하려면

create-react-app 한 폴더로 이동 후 npm start 명령을 입력하면됩니다.

cd practice_react npm start

프로그램이 실행되면 localhost: 3000 페이지가 웹에 자동으로 띄워집니다.

 

 


npm이 아닌 yarn으로 실행시키려면

npm install -g yarn yarn start

yarn을 설치한 후 시작하면 됩니다.

yarn도 npm과 같은 패키지 매니저입니다.

yarn과 npm의 차이점 및 특성은 다음에 정리해보겠습니다!

[ yarn 링크 ]

[패키지 매니저 링크]

그 전까지 아래 사이트를 참조해주세요

https://happygrammer.tistory.com/154


 

* 반드시 create-react-app 적용한 그 폴더에서 패키지 매니저를 start 해야합니다.

 


저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

다음 포스팅은 '리액트 구조, 소스파일 (프로세스)' 입니다.

React로 웹사이트를 개발하다가 이제 웹디자인 후 css를 만져야하는데

scss를 어떻게 사용할 지 몰라서 찾아보았다.

 

React에서 scss 사용

일단 맨 처음에는 css에 아무것도 없고,

저 사이트는 '노마드코더'를 따라하며 만든 사이트이다.

 

웹서핑도 해보고 블로그도 들어가보고 공식 사이트에 나와있는 방법도 봤는데,

결론은 공식 사이트 짱짱맨!!

 

https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

공식 사이트에 나와있는대로 한번 해보자!


react 2.0.0 버전 이후로 지원가능하다.

 



 

npm install node-sass --save

 

작업을 잠시 중단한 후, 위의 코드를 입력해준다.


설치후

취약점이 69개나 발견되었다길래 하라는대로 해봤다.

npm audit fix

위의 코드를 입력해준다.

 

yarn add node-sass

 

마지막으로 위의 코드를 입력해준다.

 


css 폴더를 scss로 바꿔주고

 

App.js 스크립트에서

import한 스크립트파일의 이름도 바꾸어준다.

 

.App { h1{ color:red; } }

.App { 
  h1
  { color:red; } 
}

간단하지만 확실히 바뀔 수 있는 코드를 적고

 

yarn start

성공적!

(캡처에 있는 오류는 js 상 오류라 무시해주세요..)


그 외에도

https://medium.com/@jsh901220/react%EC%97%90-scss-%EC%A0%81%EC%9A%A9%EB%B0%8F-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-1-c7bd2895f5a6

React에 SCSS 적용및 기본 사용법(1)

React, 혹은 다양한 Framework로 프로젝트를 진행하다보면 Front-End개발자는 css작업을 하게 된다. css는 추가적인 플러그인을 설치할 필요 없이 사용할 수 있고, 사용 환경에 영향을 받지 않기 때문에 많은 사람이 css을…

 

 

https://liante0904.tistory.com/176

[React] yarn eject 실패시

리액트 그리고 js 풀스택 개발에 관심이 있다면 한번 쯤은 들어봤을 velopert님이 집필한 '리액트를 다루는 기술' 책을 최근 구입했다. 그리고 연휴를 이용해 빠르게 훑어가던 중 진행이 안되는 부분이 있어서 포..

 

 

이런 사이트들을 참조했는데,

하다가 막히면 한번 따라해보시길..!

나는 저 방법들 먼저 써봤다가 안대서 공식사이트를 참조했는데,

공식사이트 방법만으로도 실행되어서 그냥 한다.

아디오스-!

LAMP 설치

(putty를 이용해서 ubuntu 18.04에 LAMP 설치하는 방법입니다.)


@LAMP란?@


Linux, Apache, MySQL, PHP의 첫글자만 따온 약어입니다.

리눅스 운영체제에 세가지 오픈소스 소프트웨어를 설치함을 의미합니다.


@LAMP 설치@


# 업데이트

$ sudo apt-get update && sudo apt-get upgrade


# Apache2 웹서버 설치


## Apache란?

Apache HTTP Server(Apache)는 HTTP 웹서버이다.

* 웹서버: 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹페이지를 반환하는 컴퓨터 프로그램

## Apache 설치

$ sudo apt-get install apache2

Y

<Ok>

확인

링크 창에 (public ip주소) 치면 해당 창이 나와야 함

가끔 오류나는 경우

apt-get 대신 apt을 써서?

(차이점 정리 해야함)

$ apache2 -v

아파치 웹서버 버전 확인

Apache2의 디폴트 Document Root는 /var/www/ , 디폴트 파일 /var/www/html/index.html

이 경로에 HTML 또는 PHP 파일 등을 생성하면 웹 브라우저를 통해 해당 파일을 요청할 수 있음.

/etc/apache2/apache2.conf 에 들어가면

여기서 Default Directory를 수정할 수 있음

링크에 ip주소 치면 나오는 Apache2 Ubuntu Default Page 참고

## 방화벽 설정

$ sudo ufw enable

방화벽 프로그램 ufw 활성화

$ sudo ufw defaul deny incoming

$ sudo ufw default allow outgoing

방어벽 기본 설정 변경

incoming은 'deny'로 outgoing은 'allow'로

$ sudo ufw allow ssh

ssh 접속 허용

$ sudo ufw app info "Apache"

$ sudo ufw app info "Apache Secure"

$ sudo ufw app info "Apache Full"

셋 중에 하나 골라서 방어벽에 적용

Apache: Web Server

Apache Secure: Web Server(HTTPS)

Apache Full: Web Server(HTTP, HTTPS)

$ sudo ufw allow in "Apache"

*갑자기 putty 접속 안됨*

Sudo ufw enable 후에 sudo ufw allow (포트번호) 해줘야함 -> 포트번호는 ec2 인스턴스 보안규칙에 포함된 걸로다가


# MySQL 서버 설치


## MySQL 이란?

세계에서 가장 많이 쓰이는 오픈 소스 '관계형 데이터베이스 관리 시스템(RDBMS)'이다.

## MySQL 설치

$ sudo apt-get install mysql-server

Y

$ sudo mysql_secure_installation

mysql root 사용자 비밀번호 설정

y: password plugin setup 할건지?

1: strong한 형태의 password setting 할 것

password 두번 입력 (숫자, 영소문자 합쳐서 8글자 이상)

y: 데이터베이스를 아무나 읽어볼 수 없게 함

y: 원격 접속으로 root 계정을 사용할 수 없게 ( 별도 계정 생성해야 하게 ) 함

y

y

$ sudo mysql -u root -p

패스워드 입력해서 mysql 접속 (*sudo로 접속하지 않으면 비밀번호 안먹을 수도 있음)

$ create user (추가한 user이름) identified by '(비밀번호)';

비밀번호는 대문자,숫자,특수문자를 하나 이상 포함하고 8자리 이상이어야 함.

$ show variables like 'validate_password%';

비밀번호 설정 확인

mysql> grant all privileges on db.* to '(추가한 user 이름)'@'localhost' identified by '(비밀번호)';

mysql> flush privileges;

## MySQL error

새로 생성한 user의 host가 %(외부접속)이다.

privileges(권한) 줄 때 오류 날 수 있다.

* mysql> grant all privileges on *.* to (추가한 user이름) identified by '(비밀번호)';로 권한 수정해주기


# PHP 설치


## PHP 란?

프로그래밍 언어의 일종이다. (추가 필요)

$ sudo apt-get install php php-mysql

$ sudo vi /var/www/html/info.php

info.php 파일에 위처럼 적고 저장

(vi 편집기 사용법 정리해야함)

확인

링크 창에 (public ip주소)/info.php를 치면

이러한 화면이 나옴 (설치된 php의 정보를 보여주는 화면)


# phpMyAdmin 설치


## phpMyAdmin이란?

MySQL을 WWW 상에서 관리할 목적으로 PHP로 작성한 오픈 소스 도구이다.

## phpMyAdmin 설치

$ sudo apt-get install phpmyadmin

이러한 화면들이 뜨면 그냥 Default 설정 <Ok>하기

phpmyadmin의 비밀번호 설정 (8자리 이상이고 대문자,숫자,특수문자 하나 이상인 비밀번호)

비밀번호 설정 안따르면 error 뜸

esc누른 후 retry로 다시 하면 됨

확인

링크 창에 (public ip 주소)/phpmyadmin치면

에러 뜰 수도 있음

## phpMyAdmin 에러 해결 방법

$ sudo vi /etc/apache2/apache2.conf 해서 파일 연 다음

Include /etc/phpmyadmin/apache.conf

해당 내용을 추가

esc 누르고 명령창에서 :wq로 저장 후 종료

$ sudo service apache2 restart

아파치 서버 재시작

다시 확인

로그인 창 뜸

아까 설정했던 사용자명(ubuntu user name), 암호(phpmyadmin에서 설정한 것) 입력