🦁_21.11.23 TIL

21년 11월 23일

📝 Tailwind CSS

Tailwind CSS

• 부스트크랩과 비슷하게 미리 정의된 유틸리티 클래스를 이용하여 별도의 CSS 파일없이 HTML 코드 내에서 스타일링 할 수 있는 utility-first CSS 프레임워크

Using Tailwind via CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

=> 이 방법은 몇 가지 제약조건이 있으므로 사용 전 확인 필수

📎 Tailwind 실습 - 천하제일 이력서 대회

Tailwind 사용 후기

• 원하는 속성을 찾기 쉽다. (Ctrl + k)
• 간단하게 사용할 수 있다.
• HTML 코드에 클래스 명이 잔뜩 포함되어 있다.
• 동일한 스타일을 한 번에 지정할 수 없다.
  => 각 요소에 각각 스타일을 적용해야 한다.

참고링크

• Tailwindcss를 소개합니다.
• Hello Tailwind CSS! | 장점, 단점, 사용법

📝 Sever(Linux, Ubuntu, AWS)

📎 Ubuntu 실습

• 구름IDE라는 클라우드 서비스를 이용하여 Linux가 설치된 컴퓨터를 무료로 빌려서 실습

클라우드 서비스

• 무언가를 빌려쓰는 것
• Google docs, 네이버 클라우드, 구글 클라우드 등, 내 컴퓨터에 없는 소프트웨어 또는 하드웨어를 빌려 쓰고 있는 것

[출처: Red Hat]

• SaaS(Software as a Service)

  • 가장 포괄적인 형식의 클라우드 컴퓨팅 서비스로, 모든 애플리케이션은 제공업체가 관리하며 웹 브라우저를 통해 제공된다.
    => Dropbox, Google Cloud 등

• PaaS(Platform as a Service)

  • 제공업체가 자체 인프라에서 하드웨어와 소프트웨어를 호스팅하고 이러한 플랫폼을 사용자에게 통합 솔루션, 솔루션 스택 또는 인터넷을 통한 서비스로 제공
  • 사용자는 애플리테이션 코드를 작성, 빌드, 관리하지만 소프트웨어 업데이트, 하드웨어 유지관리와 같은 번거로움은 사라진다. 빌드 및 배포를 위한 환경이 사용자에게 제공
    => AWS Elastic Beanstalk, Heroku, Red Hat OpenShift 등

• Iaas(Infrastructure as a Service)

  • 사용자는 운영체제 및 데이터, 애플리케이션, 미들웨어 및 런타임을 담당
  • 제공업체는 사용자가 필요로 하는 네트워크, 서버, 가상화 및 스토리지 관리와 엑세스틑 담당하고 사용자를 대신해 온사이트 데이터센터를 유지관리 및 업데이트
    => AWS, EC2 등

참고 링크

• Red Hat - IssS, PaaS 및 SaaS 비교

구름IDE로 Ubuntu 실습하기

• 구름IDE 가입 후 새 컨테이너 클릭
  

• 이름만 작성 후 생성하기 클릭
  

• 컨테이너 실행하기 클릭
  

• 창 - 새 터미널 창 클릭
  
  

📎 Linux 명령어

• 새 디렉토리 생성 (make directory)
  $ mkdir [디렉토리명]
$ mkdir [디렉토리명/디렉토리명/디렉토리명...] : 여러 디렉토리 생성
• 디렉토리 이동 (change directory)
  $ cd [디렉토리명] : 해당 이름의 디렉토리로 이동
  $ cd .. : 상위 디렉토리로 이동
  $ cd / : 루트 디렉토리로 이동
• 현재 작업중인 디렉토리 확인 (print working directory)
  $ pwd
• 디렉토리 목록 확인 (list)
  $ ls : 현재 디렉토리에 있는 내용 출력
  $ ls -a : all, 숨겨진 파일 또는 디렉토리를 출력
  $ ls -l : long, 자세한 내용 출력 (권한, 포함된 파일 수, 소유자, 그룹, 파일 크기, 수정일자, 파일 이름)
  $ ls -al : 가장 많이 사용하는 방법
  $ ll : $ ls -al와 같은 동작
  $ ls > file.txt : file.txt 안에 디렉토리 내용 저장
• 디렉토리 삭제 (remove)
  $ rm -r [디렉토리명]
-r : remove directories and their contents recursively, 해당 디렉토리 내에 있는 내용들도 삭제

---

• 비어있는 파일 생성
  $ touch [파일명]
• 파일 삭제 (remove)
  $ rm [파일명]
• 파일 복사 (copy)
  $ cp file_1.txt file_2.txt : file_1.txt파일을 file_2.txt로 이름을 바꾸어 복사
  $ cp file.txt dir : dir라는 디렉토리가 없다면, file.txt파일을 dir파일로 복사 / dir라는 디렉토리가 있다면, file.txt파일을 dir 디렉토리 내에 복사
  $ cp file_1.txt dir/file_2.txt : file_1.txt을 dir 디렉토리 내에 file_2.txt라는 이름으로 복사
• 파일 이동
  $ mv file_1.txt file_2.txt : file_1.txt파일을 file_2.txt로 이름을 바꾸어 이동, 파일 이름을 바꾸는 것과 같은 결과
  $ mv file.txt dir : dir라는 디렉토리가 없다면, file.txt파일을 dir로 이름을 바꾸어 이동 / dir라는 디렉토리가 있다면, file.txt파일을 dir 디렉토리 안으로 이동
• 파일 내용 보기 (concatenate)
  cat [파일명]

---

• 명령창 내용 삭제
  $ clear

---

vi 편집기

vi 편집기의 세 가지 모드

• 명령 모드 (command mode) : vi 명령어를 통해 vi 편집기가 시작되어 실행되는 모드. 방향키를 통해 커서를 이동할 수 있다.
• 입력 모드 (insert mode) : 명령 모드에서 i 또는 a키를 눌러 입력 모드로 넘어갈 수 있다. 입력 모드에서는 자유롭게 코드나 글을 작성할 수 있으며, Esc키를 누르면 명령 모드로 돌아간다.
• 마지막 행 모드 (last line mode) : 명령 모드에서 :(클론)을 입력하면 화면 하단에 :___ 입력할 수 있는 공간이 생긴다. 이 공간에 현재까지 작성한 내용을 저장 후 종료(wq, wq!) 또는 그냥 종료(q, q!) 등을 입력할 수 있다.

$ vi [파일명] : 파일명의 파일이 있는 경우, 해당 파일 수정 / 파일명의 파일이 없는 경우, 파일을 생성

• 명령 모드 👉 입력 모드 전환

  • i : 커서 앞(왼쪽)에 입력
  • I : 커서가 위치한 행의 첫 컬럼으로 이동하여 입력
  • a : 커서 뒤(오른쪽)에 입력
  • A : 커서가 위치한 행의 마지막 컬럼으로 이동하여 입력
  • o : 커서가 위치한 행의 다음 행에 입력
  • O : 커서가 위치한 행의 이전 행에 입력

• 입력 모드 👉 명령 모드 전환

  • Esc

• 저장, 종료하기 : 마지막 행 모드에서

  • :q : 종료
  • :q! : 저장하지 않고 강제 종료
  • :w : 저장
  • :wq : 저장 후 종료

  => vi 에디터에서 비정상 종료 시 .swp 파일이 생성됨
  => 리눅스 VI 에디터 스왑파일(SWP) 생성시 해결방법

• 커서 이동

  • h, j, k, l : 좌, 하, 상, 우 커서 이동
    => 방향키가 없는 키보드에서 사용
  • :숫자 : 지정한 숫자 행으로 이동

• 삭제

  • x : 커서가 위치한 글자 삭제
  • dd : 커서가 위치한 행 삭제

• 명령 취소

  • u : 명령을 취소

• 복사 / 붙여넣기

  • yy : 커서가 위치한 행 복사
  • p : 커서가 위치한 행의 아래쪽에 붙여넣기
  • P : 커서가 위치한 행의 위쪽에 붙여넣기

읽어보기

• Ubuntu에서 apt-get 명령어 사용하기

---

APT(Advansed Package Tool)

• packaging system과 interact 하기 위한 command line tool
• apt로 패키지를 install, upgrade, clean 할 수 있다.

packaging system

• 시스템에 소프트웨어를 설치하고 유지 및 관리하는 방법 중 하나
  => 이것을 사용하면 소스 코그를 받아 프로그램을 빌드하지 않아도 된다.
• 리눅스에서는 deb 패키지를 사용하는 Debian 계열과 rpm 패키지를 사용하는 Redhat 계열이 있다.

• apt-get : 패키지 매니저로, 패키지를 install, upgrade, clean 할 때 사용
  => 앱을 다운로드 하는 google studio와 같은 역할
• apt-get으로 패키지 업데이트 하기
  $ sudo apt-get update
  => sudo : Super User Do

Nginx

• 웹 서버 소프트웨어
• nginx 설치
  $ sudo apt-get install nginx
• 서비스 구동
  $ sudo service nginx start
• 서비스 중지
  $ sudo service nginx stop

=> 작성중입니다 :)

---

마무리

• Ubuntu 실습은 처음이라 걱정스러웠지만 수업내용을 잘 따라갈 수 있었다
  => 다행히 문제 없이 잘 넘어갔다.
• 내가 비전공자이기 때문에 기초지식이 없어서 정보처리기사 자격증 따면서 얕은 지식이라도 쌓자 라는 마음이었는데 자격증 따놓길 잘했다는 생각이 잔뜩 들었다.
  => 아무것도 모르는 내용이라 이해도 안되고 암기도 어려워서 머리카락 잡아 뜯어가면서 공부 했는데 보람차다...!
  => 이거 아니였으면 오늘 수업 내용 이해하기 어려웠을 듯 싶다.
• 기온이 낮아지고 비도 내려서 어제, 오늘 집에서만 있었는데 너무 아늑하다.. 따숩
  => 비 소식이 없을 땐 카페로 이동해야지