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

안녕하세요, 히니입니다 :)

 

오늘은 React의 핵심인 컴포넌트 생성에 대해 알아보겠습니다.

실습으로 진행되며 코드는 모두 올라와있습니다.

빠른 진행을 위해 코드가 담긴 git 링크도 공유합니다.

다운 받아서 바로 실습하시면 됩니다.

https://github.com/gmldms784/react_study/tree/master/project

 

gmldms784/react_study

all about react. Contribute to gmldms784/react_study development by creating an account on GitHub.

github.com

 


실습 1

 

1. 파일 생성 후 create-react-app 하기

 

2. yarn start

 

3. 화면 확인

 

4. index.html 수정

 

title 변경

 <title>Practice_react</title>

저장 후 확인

5. App.js 수정

> App div 빼고 다 지우고 아무글자나 써보기

>import logo from './logo.svg'; 는 logo.svg 안쓸거니까 지워도 됨

 

확인

6. 컴포넌트 추가

 

목적

hello를 쓰는 기능을 가진 컴포넌트 추가

 

6-1. 파일 추가

src => 컴포넌트이름.css, 컴포넌트이름.js 파일 추가

 

6-2. Hello.js 내용 추가

 

import React from 'react'; // react 사용
import './Hello.css'; // css 포함

function Hello() { // 함수
  return ( // 리턴 값
    <div className="Hello"> // JSX
      hello
    </div>
  );
}

export default Hello; // Hello 함수 내보내기

 

6-3. App.js 내용 변경

import React from 'react';
import './App.css';
import Hello from './Hello'; // 추가

function App() {
  return (
    <div className="App">
      <Hello/> // 추가 => Hello 함수의 리턴 값이 이자리에 들어감
    </div>
  );
}

export default App;

6-4. 저장 후 확인

<div id="root"> // index.js의 root
    <div class="App"> // App.js의 App
        <div class="Hello">hello</div> // Hello.js의 Hello
    </div>
</div>

컴포넌트 추가 방법

 

1. 컴포넌트 파일 추가

2. 컴포넌트 파일에서 export

3. 기존 파일에서 import 후 JSX로 내용 추가

[JSX 링크]

 


 

실습 2

 

1. index.html 파일 변경

<div id="root1"></div>

> 앱 이름 뒤에 1을 붙였음

 

2. index.js 파일 변경

import App1 from './App';

ReactDOM.render(<App1 />, document.getElementById('root1'));

 

3. App.js 파일 변경

import React from 'react';
import './App.css';
import Hello from './Hello';

function App1() { //변경
  return (
    <div className="App1">//변경
      <Hello/>
    </div>
  );
}

export default App1;//변경

 

4. 저장 후 확인

<div id="root1">
    <div class="App1">
        <div class="Hello">hello</div>
    </div>
</div>​

 


 

결과 분석

 

이렇게 import해서 사용하는 JSX의 태그와 (<App1/>)

자식 컴포넌트에서 export하는 함수의 이름이 같으면 됨 (export default App1;)

> 함수가 아닌 class로 컴포넌트를 작성해서 export 해야하는 경우가 있음

> [state, props 링크]

 

 

 


정리

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

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

다음 포스팅은 'JS & JSX 문법' 입니다.

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

 

안녕하세요, 히니입니다 :)

 

오늘은 React 기본 구조와 소스들을 분석해보고,

리액트에서 어떤 프로세스로 웹페이지를 띄워주는지에 대해 알아보겠습니다.

 


 


 

1. 첫번째 프로젝트 만들기

 

create-react-app first_practice

원하는 폴더명으로 프로젝트 생성

여기서 create-react-app은 명령어 하나로 react 개발환경을 설치할 수 있도록 도와주는 툴체인이다.

 

설치가 종료되면 몇 가지 명령들과 react 시작방법을 알려준다.

 

cd first_practice
yarn start

만든 개발폴더로 이동 후 yarn start를 입력하면 쉽게 react를 시작할 수 있다.

 

이러한 코드들이 차례로 나오고

 

웹브라우저에 localhost 서버, 포트 번호는 3000으로 이러한 페이지가 뜨면 개발환경 준비 완료

 


 

2. 구조 살펴보기

이제 개발 폴더의 구조를 한번 살펴봅시다.

  • node_modules 폴더

npm으로부터 다운로드된 라이브러리를 포함한다.

 

  • public 폴더

favicon.ico // 웹페이지 접속 시, 상단 탭에 보여지는 아이콘

index.html // 최종적으로 웹브라우저에 띄워지는 파일*

manifest.json // json 파일로써 나의 APP이 유저의 장치에 설치될 때, 메타정보를 알려줌

<!--
manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->

 

  • src 폴더

App.jsindex.js의 하위 컴포넌트(div className="App") 생성

index.jsindex.html의 컴포넌트(div id="root") 생성

css는 각각의 js파일을 꾸며주는 역할

serviceWorker.js 는 기존 방문자가 App을 빠르게 로딩할 수 있도록 해줌

https://bit.ly/CRA-PWA 참고

logo.svg 는 (Scalable Vector Graphics, SVG)로 logo를 표현한 것

2차원 벡터 그래픽

XML 기반의 파일 형식

 

  • gitignore파일

말그래도 git에서 무시할 파일(git의 버전관리에서 제외할 파일)을 지정하는 파일

 

  • package.json 파일

프로젝트 정보(이름, 설명, 개발자 등)와 의존성을 관리하는 문서

이미 작성된 package.json 문서는 어느 곳에서도 동일한 개발 환경을 구축할 수 있게 해줌

 

  • README.md 파일

사용법 설명

 

  • yarn.lock 파일

package.json에 있는 것보다 많은 정보로 보다 엄격하게 의존성을 관리해줌

[의존성 관리 링크]

 


 

3. 프로세스 분석

index.js

주석을 제외하면 이러한 코드가 나온다.

 

import React from 'react';

React를 사용 가능하도록 해줌

 

import ReactDOM from 'react-dom';

react-dom package는 DOM에 특화된 메소드 제공 / React 모델 외부로 나갈 수 있는 해결책 제공

따라서, index.html로 내보내는 마지막 js파일(React 모델)에 사용한다.

여기서는 index.js 파일에 사용

npm과 ES6를 사용한다면 import ReactDOM from 'react-dom'

npm과 ES5의 경우에는 var ReactDOM = require('react-dom')

 

import './index.css'

css파일 적용

 

import App from './App'

App 이라는 요소를 쓰기 위해서 App.js 파일의 function인 App을 임포트함

App이 class 여도 됨 // 차이는 나중에 나옴

[상태 저장 컴포넌트 / 함수 컴포넌트 링크]

 

import * as serviceWorker from './serviceWorker';

serviceWorker.unregister();

https://w3c.github.io/ServiceWorker

서비스워커 : 브라우저의 백그라운드에서 실행되는 js워커

PWA 생성 시 오프라인에서도 사용가능하고 푸시 알림 기능도 사용할 수 있게 해줌

(서비스워커 설명 링크)

 

ReactDOM.render(<App/>,document.getElementById('root'));

ReactDOM.render(element, container[, callback])

element를 제공된 container의 DOM에 렌더링

여기서는 App.js에서 가져온 App 컴포넌트를 Index.html의 id가 root인 요소에 렌더링


 

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

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

다음 포스팅은 '컴포넌트 생성 과정' 입니다.

(해당 포스팅은 '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님이 집필한 '리액트를 다루는 기술' 책을 최근 구입했다. 그리고 연휴를 이용해 빠르게 훑어가던 중 진행이 안되는 부분이 있어서 포..

 

 

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

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

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

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

아디오스-!

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

 

정말 오랜만에 웹으로 찾아온 히니입니다 :>

 

이번에는 React에 대해서 배우고 정리해보겠습니다.

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

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

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


우리는 필요에 의해 배웁니다.

또는 미래의 필요를 대비해서 배우기도 하죠!

저는 이후 케이스이지만, 어쨌든 우리가 왜 React를 배울까? 어떤 쓸모가 있을까?에 대해서 먼저 설명하겠습니다.

 

( 바쁘시면 맨 아래쪽의 '정리'만 보셔도 됩니다. )

 


 

일단, React 는 무엇일까요?

 

React는 자바스크립트 라이브러리로 UI를 만들기 위해 사용됩니다.

페이스북의 첫번째 오픈소스 프로젝트랍니다.

 


 

여기서 알 수 있는 첫번째 장점, '라이브러리로서 다른 소프트웨어들과 섞어서 쓸 수 있다' 입니다.

 

노마드코더에서는 '장고, 루비온레일즈, nodejs'와 함께 쓴다고 하더군요!

 


 

두번째 장점은, 가장 큰 장점이라고 생각되는 '구조가 편리하다' 입니다.

== '컴포넌트 기반 개발'

== '조합형 사용자 인터페이스' 이라고 봐도 되겠습니다.

 

생활코딩에서 가장 강조하는 부분인데,

긴 줄의 코드를 작은 요소(component)들로 나누어서 작업할 수 있게 되어있으므로

가독성, 재사용성이 좋고 유지보수가 편리합니다.

'분할 정복' 방식을 적용할 수 있습니다.

 

[분할 정복 방식 링크]

 


 

세번째 장점은, '배우기 쉽다' 입니다.

 

html과 자바스크립트(js)의 기초를 아는 사람이라면 쉽게 배울 수 있습니다.

React에서는 공식 사이트에서 추천하는 바와 같이

(반드시 그럴 필요는 없습니다.)

주로 JSX를 사용하여 코드를 작성하는데, JSX가 자바스크립트 기반이기 때문입니다.

 

JSX란 JavaScript eXtension 의 약자로 페이스북이 개발한 자바스크립트 라이브러리입니다.

 

[JSX 연결링크]

 


 

네번째 장점은, '데이터의 단방향 흐름' 입니다.

 

React에서는 데이터가 부모요소로부터 자식요소로만 전달됩니다.

(이는 이후에 state, props 파트에서 보실 수 있으며, 인지만 하고 계시면 됩니다.)

 

[State, Props 연결링크]

 

 


(건너뛰셔도 됩니다)

 

페이스북에서는 React를 내놓으면서 MVC 패턴의 한계를 느끼고,

다른 컨셉인 Flux/Redux를 제안했습니다.

 

http://webframeworks.kr/tutorials/react/flux/

WebFrameworks.kr - Flux와 Redux

https://www.zerocho.com/category/React/post/57b60e7fcfbef617003bf456

(React) 리덕스 패턴(Redux pattern), react-redux

 

[Flux, Redux 링크]

 

Flux와 Redux 설명이 되어있는 포스팅입니다.

간단히 설명하자면, MVC(양방향 데이터 흐름) 가 대규모 어플리케이션을 다루기에 너무 복잡해서

페이스북이 다른 컨셉인 Flux/Redux(단반향 데이터 흐름) 를 제안했다는 것입니다.


 

데이터가 단방향으로 흐르기 때문에 복잡하지 않음.

State가 꼬이지 않고 명료하게 드러난다.

 


 

다섯번째 장점은, '효과적인 업데이트' 입니다.

== '반응형 UI 렌더링'

 

페이지가 리로드될 때, 웹사이트의 모든 부분을 다시 띄운다면 시간이 오래 걸리고 비효율적이겠죠.

하지만 React는 시각요소인 DOM을 만들어서 이전과의 차이만큼만 효과적으로 업데이트합니다.

 

수명주기 메소드의 shouldComponentupdate() 를 보면 이해하실 수 있습니다.

[ shouldComponentupdate 링크 ]

 


 

여섯번째 장점, '방대한 정보' 입니다.

 

React는 이미 방대한 커뮤니티와 라이브러리, 오픈소스가 있으므로

문제가 있으면 참고할만한 곳이 많습니다.

 


 

 

 

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

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

 

다음 포스팅은 'React 설치' 입니다.

 

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 해서 파일 연 다음