"웹 기술로 앱 개발자 되기" 시리즈 입니다.

스스로 그 동안 사용하던 웹 기반 기술들에 대한 복습을 겸한 강의여서 html -> css -> javascript 의 순으로 먼저 정리하고,
추가로 es6 -> react -> graphql + mongodb -> react native 의 순으로 진행해 볼까 합니다. 기간은 두어달 정도로 예상을 해 봅니다.

웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 정리해 보도록 하겠습니다.

이번 포스트는 HTML 을 본격적으로 작성해 보기 전에 편집 도구에 대해서 알려드리도록 하겠습니다.

Screen Shot 2018-05-23 at 8.37.26 PM.png
< 앞으로 사용할 CodePen >


HTML 편집도구 준비

웹 사이트는 사실 전문적인 편집도구들을 통해 작업이 됩니다. Dreamweaver 니 Namo 웹 에디터(너무 올드하군요. 나모웹 에디터는 흠..) 나 Intelij 같은 전문 편집도구로 작업을 합니다.

전문적인 도구는 정말 편리한 반면, 내가 입력하지도 않은 HTML 태그들을 알아서 관리해 주기 때문에 HTML 을 처음 배우는 입장에서는 적합하지 않습니다.

기본기가 생명인데, 시동도 켤 줄 모르는 사람한테 F1 포뮬러 자동차를 주면 안되겠죠?
시동 거는 법부터 차근차근 배우도록 하겠습니다. 있어보이는 편집도구들은 모두 잠시 접어두고 기초기초기초 에디터 툴을 준비하도록 하겠습니다.

기초 에디터 툴을 통해 html 파일을 만드는 법을 확인한 뒤에는 웹에서 편리하게 파일을 편집하고 결과까지 바로 확인할 수 있는 온라인 에디터 사이트를 추가로 알아보도록 하겠습니다.

간단한 에디터 도구로 HTML 파일 편집하기

우선 모든 PC 에 설치되어 있는 Notepad (윈도우) 로 html 파일 편집하는 법을 알아보겠습니다. 맥에는 TextEdit 이라는 기본 에디터 도구가 있긴 한데, 절대로 TextEdit 은 사용하지 마시기 바랍니다.
이유는 직접 한번 써 보시면 알게 됩니다. 절대 TextEdit 을 html 편집용도로는 쓰지 마세요!.

에디터 도구로 HTML 파일을 작성하고 결과를 확인하는 순서는 다음과 같습니다.

  1. 파일을 만듭니다.
  2. 파일에 HTML 를 작성합니다.
  3. 파일을 .htm 또는 .html 확장자로 저장합니다.
  4. 저장된 .htm 또는 .html 파일을 브라우저로 엽니다.

간단하죠. 슈퍼 스피디 하게 실습해 보겠습니다.


1. 파일 만들기

윈도우에는 역사와 전통을 자랑하는 메모장(Notepad) 가 있습니다.

윈도우 시작버튼에서 메모장을 찾아서 실행합니다.
시작-> 윈도우 보조프로그램 -> 메모장 순으로 클릭해서 실행합니다.
Screen Shot 2018-05-23 at 7.23.23 PM.png


너무 복잡하죠? 그냥 키보드에서 윈도우 키와 R키를 눌러줍니다.
그러면 '실행'창이 뜨고 여기에 notepad 라고 입력하고 확인을 누릅니다.

Screen Shot 2018-05-23 at 7.22.34 PM.png
쉽죠?


2. 파일에 HTML 내용 입력하기

새로 만들어진 또는 열린 편집창에 아래와 같이 HTML 내용을 입력합니다.

<!DOCTYPE html>
<html>
<body>
<h1>첫 번째 제목</h1>
<p>첫 번째 내용</p>
</body>
</html>

프로그래밍에서는 거의 모든 분야에서 영어가 쓰이기 때문에 불편하더라도 영문 OS(영문 OS 설치 후에 한글 입력기를 추가) 를 사용하거나 아무튼 영어에 익숙해 지셔야 합니다.

아래와 같이 영문으로 입력하겠습니다. 한영 키 전환하는 것도 번거로우니.

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>



3. 작성한 파일을 .htm 확장자를 가진 파일로 저장 - 메모장

메모장 프로그램은 그냥 저장 버튼을 누르면 확장자(확장자란 파일명 끝에 붙는 파일 종류를 지정하는 보통은 . 이후의 세글자의 문자임) 를 기본으로 .txt 로 저장합니다. 저장한 파일이 Text 파일이란 뜻이지요.

하지만 우리는 html 파일을 만들고 싶기 때문에 .htm 또는 .html 확장자로 변경해서 저장하여야 합니다.

.html 확장자로 변경해서 저장하려면

  1. 다른이름으로 저장'
  2. 파일형식 모든파일로 변경
  3. 파일명 지정
  4. 저장

의 순으로 작업해야 합니다.
Screen Shot 2018-05-23 at 7.47.47 PM.png
< 파일-> 다른이름으로 저장을 클릭합니다. >

Screen Shot 2018-05-23 at 7.48.26 PM.png
< 파일 확장자를 txt 가 아닌 다른 파일로 저장하기 위해 파일 형식을 모든 파일로 변경합니다. >

Screen Shot 2018-05-23 at 7.48.37 PM.png
< 마지막으로 파일이름을 index.htm 으로 변경하고 저장합니다. >


4. 저장된 .htm 파일을 브라우저로 열기

마지막으로 자주 사용하는 브라우저로 방금 저장된 파일을 탐색기 찾아서 열어주면 됩니다.
Screen Shot 2018-05-23 at 8.28.47 PM.png

작성한 HTML 이 잘 출력되었네요. 축하합니다. html 개발자가 되셨습니다. !




온라인 에디터 이용하기

PC 에서 메모장에 파일 내용입력하고 저장하고 다시 브라우저로 여는 이런 방식은 사실 아무도(?) 사용하지 않습니다. 너무도 불편하기 때문인데, 정말 피치 못할 사정으로 인터넷도 안되는 곳에서는 메모장이라도 사용할 수 밖에 없는 경우(실제로 국내에 이런곳이 좀 있답니다. ㅠㅠ) 에 사용하실 수 있도록 방법만 알려드린 것이구요.

이후 실습은 실시간 온라인 에디터 (웹 상에서 실시간으로 편집하고 결과를 알려주는 온라인 버전의 에디터) 를 이용할 예정입니다.

온라인 에디터는 많이 있는 데요, 저희는 https://codepen.io 을 사용하겠습니다.
이유는 html / css / javascript 를 모두 병행해서 손 쉽게 편집할 수 있고 작성된 파일을 쉽게 공유도 할 수 있기 때문입니다.

이 외에도 jsbin 이니 babel 에서 제공하는 editor 등등 다른 서비스를 이용하여도 됩니다.


codepen 을 이용해서 html 파일 작성하고 결과 보기

코드펜을 이용해서 html 파일을 작성하는 순서는 아래와 같습니다.

  1. 접속
  2. 내용입력 즉시 결과 확인

간단하죠?


1. 코드펜에 접속

https://codepen.io/pen/ 에 접속합니다.

Screen Shot 2018-05-23 at 8.47.58 PM.png
< HTML, CSS, JAVASCRIPT 를 한 화면에서 편집할 수 있습니다. >


2. HTML 을 입력하고 결과를 확인

HTML 창(가장 왼쪽 창)을 선택하고 html 내용을 입력합니다.

Screen Shot 2018-05-23 at 8.38.31 PM.png
< 내용을 입력하면 입력된 내용에 대한 출력이 화면 하단에 즉시 Rendering 됩니다 >


CodePen 사용시 주의

codepen 의 HTML 창에는 <!DOCTYPE html> 선언을 입력하지 않아야 합니다.
codepen 자체가 웹 사이트, 즉 웹 페이지이다 보니 이미 <!DOCTYPE html> 선언이 최상위의 부모에게 선언이 되어 있기 때문이지요. <!DOCTYPE html> 선언은 모든 페이지에 단 한번만 선언이 되어야 합니다.

Screen Shot 2018-05-23 at 8.38.42 PM.png
<!DOCTYPE html> 선언이 있을 경우 적색 오류 발생 >

따라서 CodePen 을 사용하실 경우에는 <!DOCTYPE html> 선언을 지우고 작성하시기 바랍니다.
Screen Shot 2018-05-23 at 8.39.08 PM.png
< 요렇게 <!DOCTYPE html> 선언을 제거하면 오류가 없어집니다 >


이번 포스트에서는 간단히 메모장을 이용해 html 파일을 생성해 보았고, codepen 을 통한 에디터 사용법도 알아 보았습니다.
앞으로는 codepen 을 통해 여러 실습을 진행할 예정이니 참조하시기 바랍니다.

다음 포스트에서는 HTML 기본 문법부터 다뤄보도록 하겠습니다.

금일 부터 "웹 기술로 앱 개발자 되기" 시리즈 강의를 진행해 볼까 합니다.

스스로 그 동안 사용하던 웹 기반 기술들에 대한 복습을 겸한 강의여서 html -> css -> javascript 의 순으로 먼저 정리하고,
추가로 es6 -> react -> graphql + mongodb 의 순으로 진행해 볼까 합니다. 기간은 두어달 정도로 예상을 해 봅니다.
목표는 여름휴가 전 마무의리!

긴 여정이 될 것 같지만, 웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 정리해 보도록 하겠습니다.

그럼 웹의 가장 기본이 되는 HTML 부터 알아보기로 하겠습니다.

html5.png


HTML 이란?

HTML 은 Hyper Text Markup Language 의 약자로 하이퍼 링크(브라우저에서 특정 버튼이나 문자열을 누르면 관련 컨텐츠 페이지로 즉시 이동할 수 있는 컨텐츠 끼리의 연결)를 갖는 문자열의 주변에 Mark(태그라고도 하는 특별한 의미와 역할을 갖는 약속된 문자들) 를 배치하는 언어입니다.

HTML 은 웹 페이지를 만들기 위한 표준 Markup Language (문자열의 주변에 특별한 태그, 마크를 추가하는 언어) 로 아래와 같은 특징을 가집니다.

  • HTML 은 Markup 을 통해 문서의 구조를 자체에 포함합니다.
  • HTML elements(구성요소) 는 전체 HTML 페이지를 이루는 부품이 됩니다.
  • HTML 은 여러 종류의 태그(tag) 들로 이루어 집니다.
  • HTML 은 포함하고 컨텐츠의 종류(heading, paragraph, table)별로 이름을 부여하여 관리합니다.
  • 브라우저는 HTML 태그를 문자 그대로 출력하지 않고, 태그별로 사전에 정의된 출력형식으로 변환하여 사용자에게 출력해 주는 역할을 담당합니다.

간단한 HTML 문서 샘플

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>


위는 가장 단순한 형태의 HTML 문서 예시입니다. 하나씩 구성요소들을 살펴보면,

  • <!DOCTYPE html> 이 문서 파일이 HTML5 이라는 선언입니다. DOCTYPE = html 이라는 뜻이되죠
  • <html> 태그는 HTML 문서의 가장 상위 부모가 됩니다. html 은 계층적인 구조를 지녀서 자식을 포함한 부모 개체들로 구성이 되구요. 최상위 조상이 이 태그가 됩니다.
  • <head> 태그에는 이 문서에 대한 Meta (설명, 분류 등 문서의 내용이 아닌 문서 자체에 대한 추가 정보들을 메타라 하죠) 정보들이 담깁니다.
  • <title> 태그 영역에는 문서의 제목이 담깁니다.
  • <body> 태그 영역에는 사용자에게 보여지는 문서의 내용이 실제로 담깁니다.
  • <h1> 태그 영역에는 문서영역의 제목을 담기고, 브라우저 에서는 큰 글자로 h1 태그에 담긴 문자를 출력하게 됩니다.
  • <p> 태그는 Paragraph, 즉 실제 문단의 내용을 정의합니다.


  • 위의 HTML 은 브라우저에서는 이렇게 출력(Rendering) 됩니다.
    Screen Shot 2018-05-23 at 3.43.46 PM.png

    브라우저는 당연히 모든 태그들을 해석해서 출력의 대상이 되는 Contents 만을 Rendering 하기 때문에 위와 같이 h1 태그와 p 태그의 내용만이 출력이 된 것을 확인 할 수 있습니다.


    HTML 태그?

    HTML 태그는 HTML 문서에서 꺽인 괄호로 둘러쌓인 실제 문서 구성요소(elements) 를 의미합니다.

    <tagname>context goes here...</tagname>
    <태그이름>내용... </태그이름>
    
    • HTML 태그는 보통 여는 태그와 닫는 태그가 쌍으로 있어야 합니다. 예시) <p> 와 </p>
    • 먼저 오는 태그가 여는 태그가 되고, 나중에 오는 태그가 닫는 태그가 됩니다.
    • 닫는 태그는 여는 태그와 태그이름은 같지만 태그이름 앞에 /를 추가해서 다는 태그임을 반드시 밝혀야 합니다.
      ( 여는 태그와 닫는 태그를 시작 태그, 종료 태그 라고도 합니다. )

    웹 브라우저 ?

    웹 브라우저는 말 그대로 HTML 문서를 읽고 화면에 출력(Browsing) 해 주는 프로그램을 말합니다.
    인터넷 익스플로러, 크롬, 파이어폭스, 사파리 등이 모두 웹 브라우저 입니다.

    웹 브라우저는 HTML 태그를 출력하지 않고, 태그를 읽어서 문서의 내용을 태그에 지시한 형태에 맞추어 출력을 합니다.
    태그의 지시가 없다면 지금 보는 화면처럼 보기 좋게 내용이 출력되지 않게 되겠죠?

    HTML 페이지 기본 구조

    HTML 페이지의 구조는 아래와 같습니다.
    Screen Shot 2018-05-23 at 6.26.09 PM.png

    html 태그가 head 태그와 body 태그를 가지고 있고, head 태그는 title 태그를 가지고 있고, body 태그는 하나의 h1 태그와 두 개의 p 태그를 가지고 있는 형태 입니다.

    이와 같이 HTML 페이지는 계층적인 구조(부모와 자식, 또는 나무 형태) 를 갖게 되는 데요. 이를 Document Object Tree 라고 하며 DOM 에 대해서는 나중에 더 자세히 다루도록 하겠습니다.

    <!DOCTYPE> 선언

    모든 HTML 과 같은 마크업 문서에는 본문 내용이 오기 전에 몇가지 Meta 정보를 갖게 되는 데요. 그 중 html 문서에서 가장 처음 보게 되는 <!DOCTYPE> 에 대해 알아 보도록 하겠습니다.

    <!DOCTYPE> 선언은 문서의 종류를 선언하여 브라우저가 문서를 올바로 출력할 수 있도록 도와주는 역할을 합니다.

    같은 html 문서이더라도 이 선언에 따라 출력하거나 해석하는 약속이 달라서 이 선언이 올바르지 않으면 의도한데로 출력되지 못하고 문서 모양이 이상하게 엉크러 져서 출력될 수도 있으니 반드시 현재 사용하는 html 의 규격에 맞게 선언을 해 주어야 합니다.

    <!DOCTYPE> 은 문서의 종류를 선언하기 때문에 문서의 가장 처음에 선언하게 되며 한번만 선언되어야 합니다.
    <!DOCTYPE> 은 대소문자를 가리기 때문에 반드시 대소문자를 잘 구분해서 선언되어야 합니다.

    참고로 HTML 문서가 표준이 되고, 계속 발전되어 온 이력은 아래와 같습니다.

    HTML버전표준제정 연도
    HTML1991
    HTML 2.01995
    HTML 3.21997
    HTML 4.011999
    XHTML2000
    HTML52014

    현재는 2014년에 표준이 된 HTML5 가 표준적으로 쓰이기 때문에 <!DOCTYPE html> 형식으로만 사용하면 됩니다.


    본 포스트에서는 HTML 자체에 대해 알아 보았고, 다음에는 HTML 편집을 하기 위한 편집기에 대해 간단히 살펴 보도록 하겠습니다.


자 이전 포스트에 이어 생성한 key 파일을 이용해서 ssh 접속을 암호입력 없이 해 보도록 하겠습니다.
ssh 연결시 암호 없이 접속하기 위한 key 파일 생성에 대해서는 http://dreamholic.tistory.com/111 포스트를 참조하기 바랍니다.

Screen Shot 2018-05-20 at 10.34.57 PM.png

실습에는 ubuntu 18.04 를 사용합니다. cloud 에 서버를 구성하는 데 제가 사용하는 서비스가 18.04 버전을 지원하길래 18.04 를 이용합니다.

생성한 암호키의 public 키를 서버에 복사하기

이전 포스트에서 간략히 설명한 것처럼 키를 생성하면 외부 배포(?)를 위한 public 키와 이에 matching 되는 private 키의 pair 가 만들어 집니다. public 키는 여기저기 배포를 해야 되고, 또 그렇게 하기 위한 키 이지만 private 키는 말 그대로 private 하게 나만이 보관을 하고 지정된 곳에 아주 잘 보관을 해야 합니다.

생성한 키를 이용해서 원격 서버에 암호 입력 없이 접속하려면 생성한 키 pair 중 public 키를 원격 접속 서버에 저장해 두면 됩니다.

생성한 public key 를 서버에 설정하는 가장 빠른 방법은 ssh 키 생성과 마찬가지로 linux 계열에서 제공하는 'ssh-copy-id' 명령어를 이용하는 방법입니다.

'ssh-copy-id' 명령어를 사용할 수 없는 장비에서 작업 중인 경우에는 ssh 암호 입력을 통한 복사나, 수 작업으로 키 파일을 복사해야 합니다.

그럼 하나씩 사용법을 구체적으로 알아보겠습니다.


ssh-copy-id 를 이용해서 서버에 복사하기

ssh-copy-id 명령어는 대부분의 OS 에 포함되어 있습니다. 이 명령어를 사용하기 위해서는 원격서버에 계정이 이미 있고, 원격 계정에 대한 암호도 이미 알고 있는 상태여야 합니다.

ssh-copy-id username@remote_host

위와 같이 원격장비에 대해 ssh-copy-id 명령어를 실행하면 해당 서버에 대한 최초 접속인 경우 아래와 같은 메세지가 출력되게 됩니다.

The authenticity of host 'x.x.x.x(x.x.x.x)' can't be established.
ECDSA key fingerprint is fd:fd:d4:f9:77:fe:73:84:e1:55:00:ad:d6:6d:22:fe.
Are you sure you want to continue connecting (yes/no)? yes

위 메세지는 현재 작업중인 장비에서 해당 서버에 대한 최초 접속시에만 출력이 되는데, 원격장비에 대한 인식번호(fingerprint) 를 확인하고 기존에 접속해 본 적이 없는 장비라는 것을 저에게 알려주는 것입니다.

yes 를 입력하면 해당 일련번호가 제 로컬장비에 저장되어 이후 접속시에는 이 메세지를 출력하지 않게 됩니다.
당연히 no 를 입력하면 접속을 하지 않고 종료 됩니다.

yes 를 입력해서 접속하게 되면, 계정에 대한 암호 입력을 요구합니다. 계정에 대한 암호를 입력하면, 로컬장비상에 만들어진 키의 public 키, 즉 id_rsa.pub 파일에 있는 public 키 값이 서버 장비에 저장됩니다.

Screen Shot 2018-05-20 at 11.05.30 PM.png

완료된 후에 원격 서버에 접속해서 확인해 보면 원격 장비상의 사용자 홈 계정의 .ssh 경로 및에 authorized_keys 파일이 생성되고 해당 파일에 로컬 장비상의 .ssh 경로에 있는 id_rsa.pub 키 값이 복사되어 있는 것을 확인 할 수 있습니다.

Screen Shot 2018-05-20 at 11.14.00 PM.png

pub 키가 복사된 이후에는 간단히 "ssh 'username@server_ip'" 하면 암호 입력 없이 접속이 됩니다.

Screen Shot 2018-05-20 at 11.15.57 PM.png

쉽죠?


SSH 를 이용해서 pub key 복사하기

ssh-copy-id 명령어를 사용할 수 없는 경우 ssh 접속을 통해 public key 를 원격 서버에 직접 복사할 수 있습니다.

로컬 장비에 public 키 파일을 읽어서 원격 장비의 authorized_keys 파일에 더하는 방식입니다.

cat ~/.ssh/id_rsa.pub | ssh username@remote_host "mkdir -p ~/.ssh 
&& touch ~/.ssh/authorized_keys 
&& chmod -R go= ~/.ssh && cat >> ~/.ssh/authorized_keys"

복잡해 보이지만

  1. 로컬 파일을 cat 해서,
  2. 원격 경로 .ssh 를 생성하고,
  3. 원격 파일 authorized_key 파일을 생성하고,
  4. 생성한 파일에 로컬 파일 내용을 더한다
    입니다.

ssh-copy-id 명령어가 해주는 역할을 순서대로 직접 수행한 셈이네요.
이후 접속하는 방법은 동일합니다.

수작업으로 Public Key 복사하기

이것도 복잡하고 저것도 잘 안되면 그냥 직접 수동으로 pub key 값을 원격 장비에 복사하면 됩니다.
로컬 장비의 .ssh/id_rsa.pub 파일의 내용을.
원격 장비의 .ssh/authorized_key 파일에 복사 하면 되는 거죠.

항상 이런 작업시에 유의해야 할 점은 절대 덮어쓰기를 하면 않되고, 끝에 추가해 주어야 한다는 것이고, 작업전에 되도록이면, 아니 반드시 작업전 파일을 백업해 두어야 한다는 점입니다.

개인 계정이야 상관이 없지만, 공용서버 공용계정을 작업할 경우, 한 번의 실수로 모든 사람들의 접속 설정을 날려서 낭패를 볼 수 있기 때문에 주의하기 바랍니다.

로컬 id_rsa.pub 에 저장되어 있는 공용키 정보를 확인합니다.

cat ~/.ssh/id_rsa.pub

원격 서버에 접속한 후 .ssh 경로가 없을 경우에는 생성해 줍니다.

mkdir -p ~/.ssh

해당 경로에 authorized_keys 파일을 생성해 주고, id_rsa.pub 파일의 내용을 추가해 줍니다.
이미 authorized_keys 파일이 있는 경우에는 내용만 추가해 줍니다.

echo [공용키 문자열] >> ~/.ssh/authorized_keys

이렇게 하여도 되고, nano 나 vi 를 통해 직접 편집해도 됩니다.

마지막으로 .ssh 경로와 authorized_keys 파일에 적절한 권한을 부여합니다.

chmod -R go= ~/.ssh

위 명령은 .ssh 경로에 대해 소유자 이외의 모든 그룹과 사용자로 부터 모든 권한을 제거하는 내용(= 뒤에 공백 문자열 있음을 주목!)입니다.
나만 볼 수 있으면 되니까요. 보안 강화의 방법 입니다.

모든 설정이 완료되면, 아래와 같이 ssh 접속시 암호 입력 없이 접속하면 됩니다.

pub 키가 복사된 이후에는 간단히 "ssh 'username@server_ip'" 하면 암호 입력 없이 접속이 됩니다.

Screen Shot 2018-05-20 at 11.15.57 PM.png


암호 입력을 통한 사용자 접속기능 차단하기

사실 key 파일을 통한 ssh 접속을 사용하는 가장 큰 이유는 보안입니다.
암호 입력을 하지 않고 접속하는 사용자 편의를 제공하기 보다는 사용자가 ssh 접속시 키 파일을 통한 접속만을 허용하고 암호 입력을 통한 접속 방식 자체를 제거하여 애초에 암호를 뚤어서 보안을 무력화 시키고자 하는 시도 자체를 제거하는 것이지요.

당연히 위의 모든 과정을 거쳐 모든 사용자가 암호 입력없이 정상적으로 ssh 에 접속할 수 있는 상황이 완료된 후에 수행하여야 합니다.
필수 사항은 아니고 권장 사항이며, 간략히 다루 도록 하겠습니다.

암호 인증 기능 끄기

암호 입력 없이 정상적으로 접속이 가능하도록 설정이 완료되면, 암호입력을 통한 ssh 인증 기능을 꺼 버려도 되겠죠?

당연히 이 작업을 수행하기 전에 무엇보다 root 계정에 대해 ssh 키 파일을 통한 접속이 가능하도록 설정을 완료하고, 테스트도 완료한 후에 수행하여야 합니다.

암호 입력을 통한 인증 기능을 꺼 버리면, root 계정으로도 암호 입력을 통해서는 접속을 할 수 없기 때문에 반드시 확인, 또 확인하기 바랍니다.

sshd 설정을 변경하여 암호인증 기능 off

ssh 데몬 설정파일을 편집하여 암호 인증 기능을 off 합니다.

sudo nano /etc/ssh/sshd_config

해당 파일에서 아래와 같이 PasswordAuthentication 항목을 no 로 지정합니다.

PasswordAuthentication no

그리고 sshd 를 재기동 하면 즉시 암호인증을 통한 접속은 불가해 집니다.

반드시 ssh 재기동 전에 root 계정에 대해, 또는 sudo 실행 권한이 가능한 계정에 대해 key 파일을 통한 인증 설정을 완료하고, 접속이 가능한지 여부를 확인하여야 합니다.! 반!드!시!

sudo systemctl restart ssh

sshd 가 재기동 되기 때문에 현재 접속한 session 도 접속이 종료됩니다.
재 접속 부터는 키 파일을 통한 접속만이 가능하고 암호 인증을 통한 접속 자체가 불가합니다.


이번 포스트는 ssh 연결시 암호 없이 접속하기 위한 키 파일의 설정을 서버에 하는 방법과 ssh 에 대한 암호 인증 제거 방법을 정리해 보았습니다.

긴글 읽어 주셔셔 감사합니다.

SSH?

요즘엔(요즘이 아니라 수십년? 전부터) TELNET 자체가 이용가능한 서버가 없을 정도로 대부분의 원격 서버 접속시에 SSH 를 이용합니다.

바로 보안의 이유인데요. TELNET 의 경우엔 아주 간단한 tcp dump 툴만 있어도 손쉽게 서버와의 통신 중에 오가는 현재 접속한 사용자가 입력하는 내용과 서버에서 그 결과로 출력해서 되돌려 주는 화면 출력의 내용을 추출할 수 있습니다.
TELNET은 만들어진지 너무 오래(1969년) 되어서 당시엔 이런 보안적인 검토를 반영하지 못했기 때문이지요.

이에 비해 SSH(Secure Shell, SSH)은 네트워크 상의 다른 컴퓨터에 로그인하거나 원격 시스템에서 명령을 실행하고 다른 시스템으로 파일을 복사할 수 있도록 해 주는 응용 프로그램 또는 그 프로토콜로 TELNET과 유사하지만 주고 받는 통신에서 암호화 기법을 사용하기 때문에, 중간에서 통신이 노출된다 하더라도 이해할 수 없는 암호화된 문자열로 보이기 때문에 아주 안전하게 서버를 원격에서 접속해서 관리할 수 있도록 지원합니다.

SSH도 접속시 입력하는 암호 입력이 문제

SSH 는 일단 접속이 완료되면 암호화된 정보가 오가기 때문에 통신상의 보안위험으로 부터는 해방이 되지만, 언제나 해결되지 않는 문제가 따라 붙기 마련이듯 치명적인 보안 위험이 존재합니다.

바로 암호만 풀게되면 마찬가지로 모든 보안이 해제되어 버리게 됩니다. 왜 암호가 풀리냐구요?
안타깝게도 암호는 사람이 입력을 해야 하는 것이다 보니 너무나 복잡하게 만들수도 없고, 너무나 복잡하게 만들경우 이를 기억할 수는 없기 때문에 특정 파일에 저장해 두게 되는 경우가 생기게 되는데요. 이 저장해 둔 특정 파일을 탈취(?) 해서 접속가능한 서버를 공격하는 일도 비일비재하게 일어나게 됩니다.
대부분의 서버에 동일한 암호를 사용하는 경우가 많기 때문이기도 하지요. 사람이 항상 문제입니다. 하지만 사람이 개입하지 않는다는 것도 문제가 될 수 있습니다.

SSH 공개키 사용을 통한 보안 강화

OPceZ.jpg

따라서 SSH 접속시 암호를 입력하지 않고, 상호 공개키와 개인키(암호화 알고리즘을 통해 암호화된 키, 공개키와 개인키에 대한 보다 상세한 설명은 다른 포스트를 참조)를 검증하여 서버를 접속하는 방식을 선호하게 되었고, 오늘날 대부분의 서버들, 특히 클라우드내에 모든 서버들은 이를 통한 SSH 접속방식 만을 허용하고 있습니다.

따라서 오늘은 특정 클라우드 서비스에서 제공하는 SSH Key Generator 가 아닌 본인의 로컬 장비에서 SSH 키를 생성하는 방법에 대한 정리해 볼까 합니다. (개인적으로 서버를 추가로 설정하면서 작업 하는 김에 스크린샷 찍어서 블로깅 합니다.)

기본 원리는 접속하고자 하는 서버상에 사전에 내가 생성해서 가지고 있는 암호의 공개키를 저장해 둔 후 이후 서버 접속시에는 암호를 입력하지 않고 내가 가진 암호의 개인키를 제공하여 인증을 수행하는 방식입니다.

키 파일이 존재하는 현재 장비에서만 접속이 가능하게 됩니다. 물론 이 경우에도 본인의 키 파일이 탈취(추가 암호를 입력해서 키 파일에 대한 접근에 대해 다시 한번 보호를 할 수 있습니다) 된다면 끝장이긴 하지만, 대신 접속 대상 장비를 특정할 수 없기 때문에 보다 안전한 방식이라고 할 수 있겠습니다.

각설하고 SSH 키를 생성하는 방법을 알아보겠습니다.

Window OS 에서 SSH 키 생성하기

윈도우에서 가장 쉽게 SSH 키를 만드는 방법은 putty 에서 제공하는 PuTTYgen 프로그램을 이용하는 방법입니다.
putty.exe 만 다운받지 마시고 전체 putty 설치 파일을 다운로드 한 후 설치하시면 PuTTYgen 프로그램을 함께 설치할 수 있습니다.

PuTTYgen 을 다운로드 하고 실행

설치 과정 및 스크린샷은 생략합니다. 의도적인 윈도우 천대 중임.

구동후에 "Generate" 버튼을 클릭합니다.
생성시에 추가적으로 key passphrase 를 입력할 수 있습니다. 이 추가 암호는 누군가가 내 암호파일을 임의로 사용할 수 없도록 보호해 주게 됩니다.

키 생성시 입력하는 passphrase 는 실제 서버상의 계정에 대한 암호가 아닌 생성한 key 파일에 대한 암호입니다. (필수가 아니고 옵션입니다.) 이렇게 키 파일에 대한 암호를 추가하게 되면 가장 안전하게 key 파일을 보호하게 됩니다. (파일을 탈취했어도 키 파일에 대한 암호를 모르면 역시나 사용할 수가 없습니다. )

Screen Shot 2018-05-17 at 10.02.47 PM.png
< passphrase 를 적용한 키 파일 사용시 화면 - 접속시에 키 파일에 대한 암호를 추가 검증 >

대신 키 파일에 대한 암호를 지정하면 위와 같이 ssh 접속시 접속 계정에 대한 암호는 입력하지 않지만 대시 매번 키 파일에 대한 암호를 입력해 줘야 하기 때문에 조금 불편하긴 하지만 가장 안전한 보안 수준을 확보하게 되기 때문에 key passphrase 를 설정하실 것을 권해 드립니다. 단순한 작업을 위한 제한적인 계정이시라면 key passphrase 를 생략하셔도

생성이 완료되면 "Save Private Key" 버튼을 클릭합니다.
생성된 키를 저장할 파일명을 지정하여 저장하면 됩니다. 한가지 신경써야 할 부분은 이 파일을 분실할 경우에는 절대로 복구가 불가하기 때문에 반드시 안전한 곳에 저장하고 추가로 별도로 백업도 필요하다면 해 두어야 한다는 점입니다.

저장후에는 출력된 공개 키 값도 복사해서 접속을 하고자 하는 서버상에도 입력해 주어야 합니다.
(공개키를 서버에 저장하고 키 파일을 통해 접속하는 방법안내는 다른 포스트를 참조)

Linux OS 계열에서 SSH key 생성하기

Linux OS 계열(OSX, Ubuntu, Fedora, Cent 등등) 에서는 SSH 키를 만들고 사용하는 것이 표준이기 때문에 이미 관련 프로그램들을 OS 자체에 가지고 있습니다.

ssh-keygen 을 통해 key 생성

암호화 알고리즘을 지정하여 key 를 생성합니다. 기본은 rsa 알고리즘을 사용하게 되고, 보다 강화된 4096 bit 의 알고리즘을 통해 생성하고자 하는 경우에는 추가 옵션을 지정할 수 있습니다.

ssh-keygen -t rsa

기본 rsa 알고리즘을 통해 key 를 생성합니다.

ssh-keygen -t rsa -b 4096

보다 복잡한 4096 bit 의 rsa 알고리즘을 통해 key 를 생성합니다.

명령어를 입력하면, 우선 키 파일 저장 위치를 확인하고(그냥 엔터 치면 기본 경로에 저장됨), key 파일에 대한 passphrase(키 파일에 대한 암호, 계정암호가 아님. 상세 내용은 위의 윈도우에서의 passphrase 내용을 참조하세요) 를 입력하거나 그냥 엔터를 쳐서 입력하지 않고 넘어가도 됩니다.

Screen Shot 2018-05-17 at 2.46.08 AM.png
< Key 파일 생성 과정 (passphrase 를 입력한 예시 화면) >

공개키 확인

키가 생성이 완료되면 id_rsa.pub 파일이 생성되고 해당 파일에서 공개키 값을 확인 할 수 있습니다.

cat /Users/jerry/.ssh/id_rsa.pub

Screen Shot 2018-05-17 at 3.20.40 AM.png

해당 공개키 값을 접속하고자 하는 원격 서버의 authrorized id 파일에 입력하면 됩니다.

id_rsa 파일은 분실시 어떠한 방법으로도 복원이 불가하니 반드시 해당 파일은 안전한 곳에 보관해야 합니다.


생성된 키에 대한 실제 사용방법은 다음 포스트에서 다뤄보도록 하겠습니다.


이번 포스트는 nodenv 를 통해 현재 작업중인 나의 workspace 에 적용된 node 정보를 확인하는 법을 알아보겠습니다.
nodenv 를 우선 설치 및 구성 한 후에만 아래 tutorial 이 정상적으로 실행됩니다.

nodenv 를 통해 현재 접속한 shell 에 특정 node version 지정하기

nodenv 를 통해 local (현재 경로) 와 global (시스템 공통) 에 특정 version 을 지정할 수가 이지만, 특별한 경우에는 현재 접속한 shell 에 특정 node 버전을 배정해야 하는 경우가 있습니다. (isolation purpose)

CI 자동화와 CD 자동화 구성시에 가장 많이 활용되는데요. nodenv 는 이를 위해 nodenv shell 명령어를 추가로 제공합니다.

nodenv shell

nodenv shell 은 현재 사용자가 사용중인 tty (작업 경로 포함) 에 대해 active 한 node 버전을 직접 지정하고자 할 때 사용합니다.

nodenv shell [버전번호]

위 명령어는 NODENV_VERSION 환경변수를 생성하여 version 을 지정하며, npm 작업시나 CI 작업시에 해당 환경변수를 참조하여 활용하도록 지정도 가능하고, nodenv 도 local 로 지정된 version 을 제외하고 가장 우선 순위를 갖기 때문에 특정 빌드시작 전에 즉각적인 node version 변경이 필요할 경우 활용이 가능합니다.

Screen Shot 2018-05-05 at 9.05.34 PM.png
nodenv shell 이 실행되면 현재 쉘에 NODENV_VERSION 환경변수가 설정됩니다.

nodenv 를 통해 현재 사용중인 Active 한 node version 확인

nodenv 를 통해 복수의 node 를 설치 및 관리하는 경우 가끔 내가 지금 사용하고 있는, 적용된 node version 에 대한 정보를 기억하지 못하는 경우가 발생합니다.

이때 사용할 수 있는 명령어가 nodenv versions 입니다.

nodenv version | versions

nodenv version 은 현재 사용자가 사용중인 tty (작업 경로 포함) 에 대해 active 한 node 가 무엇이고 해당 버전은 몇 인지를 알려줍니다.
Screen Shot 2018-05-05 at 9.09.50 PM.png

nodenv versions 는 현재 시스템에 설치되어 있는 node 들은 무엇이며, 그 중 active 한 node 가 무엇인지를 알려줍니다.
전체 설치된 node (즉시 사용가능한 node) 목록을 제공한다는 점이 nodenv version 과 다른 점입니다.
Screen Shot 2018-05-05 at 9.10.41 PM.png

시스템에 설치된 node 환경을 재구성 해주는 rehash

nodenv 를 통해 복수의 node 엔진을 관리하는 경우, npm 명령으로 global 에 설치한 팩키지들이 제대로 참조되지 못하는 경우가 발생합니다.

npm i -g [package]

위와 같이 특정 package 를 global 에 설치할 경우 사용자의 bin 경로에 해당 package 의 executable 이 추가로 설치되게 되는데, nodenv 의 shims intercept 에 의해 정상적으로 설치 한 후에도 해당 실행 명령어를 찾지 못하거나 정상적으로 실행되지 못하는 경우가 발생합니다.

이 경우 nodenv rehash 를 통해 shims 를 재 구성(rehash) 해 주셔야만 해당 실행 명령어가 정상적으로 참조되어 실행됩니다.
Screen Shot 2018-05-05 at 9.20.51 PM.png
npm 을 통해 yarn 을 설치하였으나 제대로 참조되지 않아 오류가 발생.

Screen Shot 2018-05-05 at 9.21.12 PM.png
nodenv rehash 실행 후 정상적으로 yarn 명령어 실행됨.

nodenv rehash 명령어는 현재 설치된 npm 패키지내의 executable 을 조회(~/.nodenv/versions//bin/) 하여 shims 경로(~/.nodenv/shims/) 해당 executable 에 대한 interceptor 을 생성해 주어 이후 사용자가 해당 명령어를 실행할 경우 nodenv 와 동일하게 특정 버전에 해당하는 package 가 실행되도록 처리해 줍니다.
Screen Shot 2018-05-06 at 12.28.46 AM.png
< nodenv rehash 를 실행하면 위와 같이 shims 파일들이 추가 또는 업데이트 됨 >

설치된 npm 패키지에 대한 정보 조회하기

복수 node 버전에 대해 global 한 npm 패키지가 복잡하게 설치되어 있는 경우 현재 실행하고자 하는 package 가 어떤 버전에 설치된 package 인지를 확인해야 할 경우가 조종 발생합니다.

이때 사용하는 명령어가 nodenv which 입니다.
nodenv which 는 현재 주어진 명령어에 해당하는 패키지가 설치된 전체 경로를 알려 줍니다.
Screen Shot 2018-05-05 at 9.29.27 PM.png
< 8.11.1 node 에는 yarn 이 설치되어 있지만, 9.10.1 node 에는 yarn 이 설치되어 있지 않음을 확인 >

설치된 모든 패키지에 대한 정보 조회하기

현재 시스템에 설치된 모든 팩키지를 조회할 수 있습니다.

nodenv whence [pacakge]

Screen Shot 2018-05-05 at 9.31.47 PM.png
< 시스템에 설치되어 있는 모든 대상 package 목록을 조회 >

nodenv whence 는 현재 Active 한 node 에 설치된 package 뿐 아니라 모든 설치된 node 버전에서 해당 package 를 조회해서 결과를 보여줍니다.


프로젝트가 많아지고 복잡해 짐에 따라 복수의 node 버전을 구분하여 모두 관리하여야 할 필요가 요구됨에 따라 함께 발전해온 nodenv 를 통해 복잡한 환경에 대한 운영 관리에 조금이라도 편리함을 얻으셨으면 좋겠습니다.

    긴 글 읽어주셔서 감사합니다.

    + Recent posts