yum을 이용하여 apache를 설치한다.

# yum -y install httpd

apache 버전을 확인하여 설치가 제대로 되었는지 확인해 본다.

# httpd -v

Server version: Apache/2.4.6 (CentOS)
Server built:   Aug  8 2019 11:41:18

apache 실행, CentOS7부터 기존에 사용하단 service 명령이 실행되지 않을 수 있다. systemctl 명령어를 사용해준다.

# systemctl start httpd

부팅될 때 마다 apache를 실행

# chkconfig httpd on

자신의 공인아이피로 들어가보면 apache 서버가 실행되어 있는 확인해 볼 수있다. 자신의 공인아이피를 확인하고 싶다면 curl를 확인해 볼 수 있다.

# curl bot.whatismyipaddress.com
# curl http://ipecho.net/plain
# curl icanhazip.com
# curl ipv4.icanhazip.com
# curl ipv4.ipogre.com

이제 구동된 서버에 간단한 html 문서를 띄워보자. 아래 경로로 들어간다.(설치된 Apache 버전마다 경로가 다를 수 있다.)

/var/www/html/

해당 디렉토리로 가서 index.html 파일을 만들어준다.

# touch index.html

vi 편집기를 실행하여 “hello world!”를 입력하고 ESC를 누른뒤 아래 명령어를 입력하여 저장하고 나온다.

# wq

공인아이피로 들어가 보면 “hello world!”가 제대로 출력되는 것을 확인할 수 있다.

apache를 재시작할일이 드물기 때문에 종종 명령어를 잃어버린다. 아래 명령어를 참고하도록 한다.

Apache 버전 확인

# httpd -v

Apache 상태 확인

# systemctl status httpd
# service httpd status

Apache 시작

# systemctl start httpd
# service httpd start
# apachectl start

Apache 중지

# systemctl stop httpd
# service httpd stop
# apachectl stop

Apache 재시작

# systemctl restart httpd
# service httpd restart
# apachectl restart

References

CentOS 아파치 설치
CentOS에서 apache 설치
CentOS 아파치 상태/재시작/시작/중지 명령어
리눅스 공인 IP 확인

패키지 설치

# install [패키지명]

패키지 삭제

# yum remove [패키지명]

패키지 업데이트

# yum update [패키지명]

패키지 정보 확인

# yum info [패키지명]

패키지 검색

# yum search [검색어]

패키지 목록 보기

# yum list

설치된 패키지 목록 보기

# yum list installed

패키지 설치, 변경, 삭제로 변경된 정보 보기

# yum history list

저장소 확인하기

# yum repolist

웹서버 구축을 하기위해 APM(Apache, Mysql, PHP) 3개의 패키지가 설치되어야 한다.

Apache

아파치는 Apache Software Foundation에서 개발한 HTTP 웹서버로서 프리 소프트웨어로 누구든지 수정, 재배포 등이 가능하고 오픈소스 프로그램이다. Linux, Unix, Windows, FreeBSD, Mac OS X 등과 같은 거의 모든 운영 체제에서 설치 및 사용이 가능하다. 웹서버는 크게 아파치/톰캣 과 IIS 로 나뉘게 된다. 아파치/톰캣은 프리소프트웨어에 오픈소스이고 IIS 는 MS사에서 제공하는 웹서버로서 MS사로부터 양질의 지원을 받을 수 있다.

Mysql

MySQL은 DBMS의 종류중 하나로서 전세계적으로 가장 널리 사용되고 있는 오픈 소스 데이터베이스(DataBase)이다. 제작사는 MySQL AB이다.

PHP

PHP는 웹서버쪽에서 실행 되는 스크립트 언어로서 주로 HTML 코드를 프로그래밍적으로 생성한다. 장점으로는 빠른 생산성, 저렴한 유지비용, 거의 모든 운영 체제에 구현이 가능하다.

목적

• 가상 호스팅을 설정하여 자신의 웹서버로 이용
• IWINV 서비스를 이용하여 리눅스 서버를 구매

리눅스 운영체제의 특징

• 리누스 토발즈가 개발한 컴퓨터 운영체제의 한 종류이며 커널 자체를 의미
• 자유 라이센스와 오픈 소스 개발의 가장 유명한 표본
• 다중 스레드를 지원하는 네트워크 운영 체제(NOS)로, 여러 사람이 하나의 리눅스 시스템에 접속하여 다수의 프로그램을 동시에 실행할 수 있다.
• MS에서 개발된 MSSQL을 제외한 대부분의 DB를 지원

IWINV 서버 신청

IWINV 서버 신청 가이드를 참조

1. https://www.iwinv.kr로 접속해 회원가입
2. 관리 콘솔로 들어가 서버 선택

• 가상서버와 물리서버로 상품이 있으며 가상서버는 [Real Core 서버], [vCore 서버] 나누어 짐
• 논리적인 머신이냐, 물리적인 머신이냐에 따른 분류 이며 vCore >> Real Core >> RealServer 순으로 사양 이 높아 진다.

3. 스탭 별로 필요한 옵션을 선택(아래는 필자가 선택한 옵션)
4. Step01. ZONE 선택 >> KR1-Lite-Z01
5. Step02. 운영체제 선택 >> CentOS 7.X(64bit)
6. Step03. 하드웨어 선택 >> SINGLE SSD >> vCore.V1-Lite
7. Step04. 블록 스토리지 추가 >> 건너뛰기(데이터 손실을 방지하기 위해 블록 스토리지에 백업하는 서비스라 추정된다)
8. Step05. 이름 설정 >> recordboy
9. Step06. 수량 선택 >> 1개
10. Step07. 확인

서버 접속

대부분의 리눅스 웹 서버는 SSH라는 터미널 프로그램에 접속 명령어를 직접 입력하면서 관리를 한다. 이번에 신청한 서버도 리눅스 서버 호스팅 상품이며, SSH접속정보만이 제공 된다. SSH 접속 프로그램은 PuTTY라는 프로그램을 쓸 것이다.

SSH클라이언트: SSH 접속을 지원하는 서버에 접속하기 위한 사용자 프로그램

1. PuTTY 사이트에 접속해 해당 프로그램 설치

   
   

2. 프로그램 실행 후 Host Name(or IP address)란에 IWINV서버의 IP주소를 입력하고, **포트(22), 프로토콜(SSH)**를 선택하여 접속한다.

   
   

3. 본인의 IWINV 로그인 비밀번호를 이용해, 관리자(root) ID 로 로그인 한다.

   
   

   운영체제 재설치를 했을 경우 IWINV 가입할 때 입력한 본인 이메일로 초기 비밀번호를 받을 수 있다.

   
   

4. 비밀번호 인증이 성공하면 쉘 프롬프트가 떨어지며, #기호가 표시된다. root 가 아닌 일반 사용자일 경우에는 #기호 대신 $기호로 표시된다.

   
   

5. SSH 접속 비밀번호는 Console 을 통한 시스템 로그인 비밀번호와 동일하다. root 계정은 Linux 시스템 내에서 최고 권한의 관리자 계정이므로, 비밀번호 보안에 각별한 주의를 기울여야 한다.

   
   

6. 초기 비밀번호가 복잡하니 아래 명령어로 패스워드를 변경해 준다.

   
   

   $ passwd
   

   
   

7. 해당 서버의 이름을 설정해 주자. 처음에는 root@서버이름: ~]# 식으로 보여진다.

   
   

References

한번에 끝내는 CentOS 웹서버세팅 (센토스 서버세팅)
IWINV 서버 신청 가이드
Yum – 위키백과
[리눅스 서버 구축하기] 1. 기초 지식 알아보기

REACT/VUE에서 이젠 SVELTE

W3C HTML5 Conference 2019에서 변규현 강사님의 내용을 간략하게 필기한 것

• Let’s start SVELTE, goodbye React & Vue
• 공식 문서
• 듀토리얼
• 예제

스벨트란?

• 코드가 간결하다. 리액트와 뷰와 스벨트를 비교했을 때 코드의 양이 차이가 많이난다.

  • React : 442 Characters
  • Vue : 263 Characters
  • Svelte : 145 Charaters

• 가상돔을 사용하지 않는다.

  
  

• 반응성이다. 이는 변경된 값이 DOM에 자동으로 반영된다는 것

  
  

• 리액트나 뷰는 하나의 컴포넌트 및 템플릿으로 HTML을 감싸야 하지만 스벨트는 각 태그별로 사용이 가능하다.

  
  

• 스벨트는 에러를 빌드 타임에서 잡는다.

  
  

• 컴포넌트명을 예약어로도 사용 가능

  
  

• 컴포넌트간의 통신 가능

  
  

• 문법이 뷰보다 쉬움, 문법이라고 할게 없음, 상당히 쉽다.

  
  

• 가볍게 코드를 짤 경우 스벨트를 강력 추천

  
  

• 리액트의 경우 렌더링된 DOM 트리가 전의 것과 비교해서 다른 타입의 요소일때, 전 요소는 없어지고, 새로운 것을 완전히 새롭게 렌더링하는데 이를 diff 라고 한다. 리액트는 이로 인해 버벅거리는 현상이 있다. 이로 인해 스벨트와 어느 한 예제를 비교하였을때 성능차이가 거의 5배 차이가 남

  
  

References

SvelteJS(스벨트) – 새로운 개념의 프론트엔드 프레임워크(updated)
웹 프레임워크 Svelte를 소개합니다.

포트(Port)

• 컴퓨터의 주변 장치와 연결하기 위한 연결단
• IP 내에서 프로세스 구분을 하기 위해 사용
• 쉽게 말해 각 프로토콜의 데이터가 통하는 논리적 통로
• 각 포트는 번호로 구별되며 이 번호를 포트 번호라고 함
• 포트 번호는 IP 주소와 함께 쓰여 해당하는 프로토콜에 의해 사용됨

포트 번호는 크게 세 종류로 구분된다.

• 0번 ~ 1023번: 잘 알려진 포트 (well-known port)
• 1024번 ~ 49151번: 등록된 포트 (registered port)
• 49152번 ~ 65535번: 동적 포트 (dynamic port)

잘 알려진 포트 번호의 대표적 예는 다음과 같다.

• 20 : FTP(data)
• 21 : FTP(제어)
• 22 : SSH
• 23 : 텔넷
• 53 : DNS
• 80 : 월드 와이드 웹 HTTP
• 119 : NNTP
• 443 : TLS/SSL 방식의 HTTP

References

포트 (컴퓨터 네트워킹)
포트

웹사이트의 이미지가 변경된 경우 캐쉬가 남아있어 변경사항이 적용안되는 경우가 있다. 이럴경우 강력 새로고침을 해주면 적용이 된다.

• 새로고침 : f5
• ctrl + f5 : 강력 새로고침
• shift + f5 : 강력 새로고침(크롬)
• shift + ctrl + r : 강력 새로고침(크롬)

하지만 수정이 빈번한 프로젝트의 경우 매번 캐쉬를 지우고 그러기에는 사용자 입장에서 썩 좋은 방법은 아니다. 몇가지 방법이 있는데 수정이 될때마다 이미지명을 버전별로 바꾸는 것이다.

• 변경 전 : “img.png”
• 변경 후 : “img_v01.png”

브라우저는 이미지명이 다를경우 다른 이미지라고 인식하여 불러오기 때문인데, 위 방법은 수정사항이 잦아질 경우 리소스 관리가 까다롭기 때문에 그렇게 좋은 방법은 아니다.
조금 더 효율적인 방법은 이미지를 불러오는 경로 마지막에 파라미터를 추가하는 방법을 사용하면 된다.

• 변경 전 : “img.png”
• 변경 후 : “img.png?ver=1.0”

체크

리눅스 버전체크

# uname -a

CentOS 버전체크

# cat /etc/redhat-release

하드용량체크

# df -h

디렉토리

현재 디렉토리 확인하기

# pwd

현재 디렉토리 목록 보기

# ls

현재 디렉토리 목록 자세히 보기

# ll

파일/폴더

파일 생성

# touch [파일명]
# cat [파일명]
# vi [파일명]

폴더 생성

# mkdir [폴더명]

vi 편집기 실행

# vi [파일명]

vi 편집기 저장 후 끝내기(ESC 누른뒤)

# wq

vi 편집기 저장하지 않고 끝내기(ESC 누른뒤)

# q!

파일 삭제

# rm [파일명]

파일 삭제 확인을 거치지 않고 삭제

# rm -f [파일명]

해당 폴더 삭제

# rm -r [폴더명]

폴더 삭제 확인을 거치지 않고 삭제

# rm -rf [폴더명]

압축

tar 압축하기

# tar -cvf [파일명.tar] [폴더명]

ex) foo라는 폴더를 boo.tar로 압축하고자 한다면
# tar -cvf boo.tar foo

tar 압축 풀기

# tar -xvf [파일명.tar]

ex) foo.tar라는 tar파일 압축을 풀고자 한다면
# tar -xvf foo.tar

tar.gz 압축하기

# tar -zcvf [파일명.tar.gz] [폴더명]

ex) foo라는 폴더를 boo.tar.gz로 압축하고자 한다면
# tar -zcvf boo.tar.gz foo

tar.gz 압축 풀기

# tar -zxvf [파일명.tar.gz]

ex) aaa.tar.gz라는 tar.gz파일 압축을 풀고자 한다면
# tar -zxvf aaa.tar.gz

MySQL

MySQL 설치 유무

# rpm -qa | grep mysql

MySQL 설치

# yum install mariadb

MySQL 설치 경로 확인

# find / -name mysql

정의

var는 변수를 선언하는 키워드이며, ES6부터 let과 const가 추가되었다. var는 함수 스코프를 가지고 let과 const는 블록 스코프를 가진다. 여기서 스코프란 코드가 실행되는 유효범휘이다.

블록 스코프는 중괄호{}로 감싸진 범위를 말한다. 아래는 조건문(if), 반복문(for), 함수(function)가 블록 스코프를 가지고 있는 모습이다.

if (true) {
    // 블록 스코프
}

for (var i = 0; i < 10; i++) {
    // 블록 스코프
}

function func() {
    // 블록 스코프
}

var

기존의 var는 위 세개중 함수에서만 스코프를 가진다.

if (true) {
    var a = 1;
}
console.log(a);
// 1

for (var i = 0; i < 1; i++) {
    var b = 2;
}
console.log(b);
// 2

function func() {
    var c = 3;
}
console.log(c);
// Uncaught ReferenceError: foo is not defined at window.onload

var는 중복 선언이 가능하다.

var a = 1;
    a = 2;
console.log(a);
// 2

let, const

ES6부터 추가된 let, const는 조건문과 반복문에도 스코프를 가진다.

if (true) {
    let a = 1;
    const b = 2;
    console.log(a); // 1
    console.log(B); // 2
}
console.log(a);
// Uncaught ReferenceError: a is not defined at window.onload
console.log(b);
// Uncaught ReferenceError: a is not defined at window.onload

for (var i = 0; i < 1; i++) {
    let c = 3;
    const d = 4;
    console.log(c); // 3
    console.log(d); // 4
}
console.log(c); // Uncaught ReferenceError: a is not defined at window.onload
console.log(d); // Uncaught ReferenceError: a is not defined at window.onload

function func() {
    let e = 5;
    const f = 6;
    console.log(e); // 5
    console.log(f); // 6
}
func()
console.log(e);
// Uncaught ReferenceError: foo is not defined at window.onload
console.log(f);
// Uncaught ReferenceError: foo is not defined at window.onload

let과 const의 차이는 const 가 좀 더 엄격하다. let은 중복선언이 되지만 const는 중복선언이 안되기 때문에 변수가 선언될 때 값을 할당하여야 한다. const는 DB환경정보, API응답값 등 변하지 않을 값을 담을 때 사용한다.

let a;
a = 1;
console.log(a);
// 1

const b;
b = 2;
// Uncaught TypeError: Assignment to constant variable.

결론

• var은 함수 스코프에서만 유효
• let, const는 블록 스코프에서 유효
• const는 선언과 동시에 할당이 일어나야하고, 재할당이 불가

References

자바스크립트 변수와 스코프(유효범위)

설명

vanillaJS로 만들어진 전체동의 체크박스, 보통 이용약관 등에 많이 사용된다.

조건

• 전체동의 클릭 시 모든 체크박스 체크
• 전체동의 클릭 해제 시 모든 체크박스 체크 해제
• 전체동의 체크박스 외 체크박스가 모두 체크 될 시 전체동의 체크박스 체크
• 전체동의 체크박스 외 체크박스가 모두 체크 해제 될 시 전체동의 체크박스 체크 해제

HTML

<div id="checkWrap">
    <label for="cheeck01"><input type="checkbox" id="cheeck01" />전체 동의</label>
    <label for="cheeck02"><input type="checkbox" id="cheeck02" />동의</label>
    <label for="cheeck03"><input type="checkbox" id="cheeck03" />동의</label>
    <label for="cheeck04"><input type="checkbox" id="cheeck04" />동의</label>
</div>

CSS

#checkWrap {
    width: 120px;
}

#checkWrap label {
    display: block;
    margin: 5px;
    font-size: 14px;
}

#checkWrap label input[type="checkbox"] {
    margin-right: 5px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

#checkWrap label:first-child input[type="checkbox"] {
    width: 30px;
    height: 30px;
}

JavaScript

window.onload = function(){
    var checkWrap = document.getElementById('checkWrap'),
        check = checkWrap.getElementsByTagName('input');
    checkWrap.addEventListener('click', function(e){
        var target = e.target,
            checkNum = 0;
        if(target === check[0]){
            if(target.checked){
                for(var i = 1;i < check.length;i++){
                    check[i].checked = true;
                };
            }else{
                for(var i = 1;i < check.length;i++){
                    check[i].checked = false;
                };
            };
        }else{
            for(var i = 1;i < check.length;i++){
                if(check[i].checked){
                    checkNum++;
                };
            };
            if(checkNum >= check.length - 1){
                check[0].checked = true;
            }else{
                check[0].checked = false;
            };
        };
    });
};