[Front-end🦁] #18 Tailwind, Linux

1. Tailwind

어제의 bootstrap에 이어 Tailwind로 UI를 작성해보는 실습을 했다.

(자동화순) bootstrap, tailwindcss, tachyons

많이 사용
부트스트랩 + php + mysql
부트스트랩 + 워드프레스
부트스트랩 + Django
부트스트랩 + Node

1-1. 천하제일 이력서 대회

tailwind 만을 이용해서 이력서를 만드는 대회를 진행했다! tailwind 외의 CSS를 안넣고 만드는게 조건이었다. 프로젝트 섹션은 프로젝트 4개로 넣으라고 주셔서 내용만 지어내서 넣었다!

엄청 어렵진 않았는데, 아직 class 이름들을 다 몰라서 계속 찾아보면서 주느라 뚝딱거리고, width: 1200px; 처럼 크게 주려면 커스텀을 해야하는게 조금 단점인 것 같다. 대신 손에 익으면 엄청 빨라질 것 같다.

그리고 사실... 만드는 것보다 내용 채우는게 더 어려웠다ㅠㅠ... 경력 개발자분들 이력서 보면 일단 이력도 화려하게 빛나시고 일하시면서 찾으신 자신의 특장점이 있으신데 나는 개발 경험이 많은게 아니라서 그걸 찾기가 어려웠다.

2. VSC Extension

여러 유용한 Extension 을 추가했다.

• Live Sass Complier
• indent rainbow
• Auto rename tag

SASS는 아직 사용해보지 않아서 모르겠는데, Indent rainbow 는 깔자마자 너무 유용했다.

3. Linux

AWS 학생 크레딧 문제로 groom IDE를 사용한 리눅스 실습을 해보았다. github에 올라간 repo 를 ngnix를 사용해서 구동해보았다.

이미지 출처

IaaS PaaS Saas 클라우드 컴퓨팅 기말고사 문제로 나왔었는데 오랜만에 본다....

기본 명령어

mkdir folder # make directory
mkdir -p one/two/three/four # --parents 옵션으로도 가능
mkdir one;cd one # ; 동시 실행
# ; - 앞이 실패해도 다음 명령어 실행
# && - 앞이 성공했을 때만 다음 명령어 실행
# & - 앞을 백그라운드로 돌리고 동시에 다음 명령어 실행
rmdir folder # remove directory
rm -r folder/ # 파일있는 폴더 지울 때
# -r는 recursive 재귀적으로 파일 지움

pwd # present working directory
ls # list segments -a, -l...
ll # ls -al
cd # change directory
cd / # 최상위 디렉토리로 이동
cd .. # 상위
cd, cd ~ # 홈 디렉토리로 이동
chmod # change mode: 권한 수정.
chmod ugo+x test.py

ehco # print
echo "hello world" > hello.txt # 앞의 명령어의 결과를 파일에 덮어쓰기.
rm # remove
cp test.py test2.py # copy
# Tab - 자동완성, History - 화살표 위, 아래
cat test.txt # 파일 읽기, 양이 많으면 more로
# q : 종료
# enter : 1행 아래로
# z 또는 스페이스바 : 1페이지 다음페이지, b : 이전페이지, = : 현재 행번호 표시
# /문자열 : 문자열 검색 (구름에서 제대로 하이라이팅이 되지 않음)
# v : 현재 열려있는 위치에서 vi 실행
cat test.txt | grep "asdf" # test.txt 에서 asdf 들어간 line 잡아옴.

mv test2.py ../ # move
mv test2.py scientist.py # 이름 바뀜
mv abc.txt xyz/def.txt #xyz 안의 def로 이름 바뀌어 이동
mv abc.txt xyz #xyz 디렉토리가 없다면 abc.txt 파일을 xyz로 이름을 바꾸어 이동, 있다면 xyz 디렉토리 안으로 abc.txt 파일을 이동.
# cp 도 같음.

VIM

touch test.txt # file 생성.
touch test{3..5}.txt #3~5번
touch test6.txt test6.txt #6 7번
vi test.txt # esc 명령모드 a, i, o 입력 모드 : 나가기 q wq wq! ...
# 명령모드에서 아래 명령어 실행
# dd : 삭제, 2dd : 2줄 삭제
# 6x : 6개 char 삭제
# yy : 한 줄 복사, p: 붙여넣기
# i : 커서 앞으로 추가, a : 커서 다음으로 추가, o : 커서가 있는 한 줄 뒤
# Shift + i, Shift + a : 현재 있는 라인 가장 앞/뒤에서 추가
# Shift + v : 여러줄 선택(y 눌러서 복사 후 p 누르면 붙여넣기, 또는 d(삭제), 또는 =(정렬))
# Shift + ^, Shift + $ : 처음과 마지막
# hjkl : 방항키 대용
# Ctrl + f, Ctrl + b : 이후와 이전 페이지 보기
# /python으로 python이라는 단어를 찾을 수 있음, n이면 이후, N이면 이전

ngnix 배포

wget http://www.paullab.co.kr/images/ceo.png
# Web에서 get한다!

apt-get

sudo apt-get install git
#sudo는 Super User Do
#apt-get은 패키지 매니저! 앱을 다운로드하는 google studio와 같은 역할!
git clone 주소
sudo apt-get update
sudo apt-get install nginx
vi /etc/nginx/sites-available/default
# root /var/www/html; 을 root /workspace/컨테이너이름/1000hours; 로 바꾸기.
sudo service nginx start
# server 확인
# sudo service nginx stop

vi /etc~~ 단계에서 입력모드 안하고 입력하다가 그냥 입력한게 막 들어갔는지 마지막에 배포가 안돼서 그냥 삭제하고 다시 했다.... 실제로 배포하는 작업을 하게 된다면 신중하게 해야겠다.

프로세스, 접근권한

top # 작업관리자, q를 누르면 빠져나감
ps # process status 현재 프로세스 상태
ps aux
kill 22131
# 22131이라는 PID(프로세스아이디)를 가진 프로세스 종료

cd ~
cd /
find / -name 'test2.py' # 해당 파일의 경로를 찾아준다.
find / -name '*.py'
sudo find / -name '*.py'
# 현재 폴더면 .cd 위에서 찾은 폴더로 이동
chmod 700 test.py
# chmod(Change Mode)
# 파일의 종류 / 소유자 / 그룹 사용자 / 기타 사용자
# rwx - 읽기(4), 쓰기(2), 실행(1) 
# 700의 경우는 소유자 모든권한 / 그룹, 기타 권한 X
ls -al
chmod ugo+x test.py
# 사용자 카테고리 u(파일 소유자), g(그룹), o(기타 사용자)
# +권한 부여, -권한 제거
ls -al
# 압축파일 올리고
unzip test.zip
mkdir one;touch test.py;touch testTwo.py
zip -r one.zip ./one # 압축할 폴더 이름을 현재 위치에 맞춰서 경로를 써야 함.

추가 커맨드

alias # 별칭 지정. alias만 치면 목록 나옴.
# alias ls='ls -a' / alias rm='rm -f'
# unalias ls # 별칭 삭제.
man # 메뉴얼

nslookup # 도메인 명령으로 IP 조회
# 기본 설치가 안되어 있어서 apt-get update 후
# apt-get install dnsutils로 설치해야 함
ping # 접속이 되는지 : 대기업에서는 막아둠
# sudo apt-get install iputils-ping
traceroute # 경로 추적 : 네트워크 이슈 생겼을 때 사용.
# apt-get install traceroute

which find
which python
which node # 실행하고자 하는 프로그램의 경로명
echo "hello world"
echo "hello world" > file.py
# 내용이 있는 파일 생성 가능

fg # foreground
bg # background
# 프로세스를 백그라운드나 포그라운드로 옮기는 작업
python file.py &
# "&" 명령어, 터미널의 백그라운드에서 실행, 
# 터미널 세션이 끊기면 종료됨, 버전에 따라 nohup명령과 같은 동작하기도 함
jobs # 프로세스 작업 출력
ifconfig # 네트워크 정보 출력(ip, 이더넷 등)
htop # 모니터링(top과 같음, 기본 설치 X)

head file.py #파일 내용 위부터 10줄 표시
head -3 file.py #위부터 3줄
tail file.py #파일 내용 아래부터 10줄 표시
tail -3 file.py #아래부터 3줄
head -F file.py
tail -F file.py
#head와 tail에 -F 속성을 추가하면 꺼지지않고 파일변경내용이 실시간으로 갱신된다.

# no hang up : 끊기지 않고 실행! 퍼미션은 항상 755이상이어야 함
nohup python file.py # 데몬 형태로 실행: 터미널 세션이 끊겨도 계속 실행됨
nohup python file.py & # 백그라운드에서 실행, 터미널 세션이 끊겨도 계속 실행됨 + 종료없이 백그라운드에서 동작
tail -f nohup.out
# nohup을 사용하면 nohup.out파일이 나온다. 해당 파일에 프로세스의 출력내용이 기록된다. 서버로그등을 실시간으로 보고싶다면 해당 명령어와 조합하여 사용하면 좋다.

curl <option> <url>
# 서버에 테스트 요청 날릴 때 많이 사용.
curl http://www.paullab.co.kr
curl -o index.html http://www.paullab.co.kr
curl -d {data:1, data:2} -X POST <url> # 패킷 날릴 때 사용!!!
# -d 뒤에 데이터를 넣어놓는 형식으로 요청할때 사용, -X는 요청방식 선택
curl -H "Content-Type: application/x-www-form-urlencoded"\
-X GET <url>
# -H는 헤더내용 추가 이하 더 많은 내용이 있으나 너무 많으니 생략
curl -d

명령어들도... 컴퓨터 시스템 과제할 때 권한 잘못 줘서 교수님이 내 과제 파일 못보면 점수 0점이라고 제대로 주라고 막 그러셨었는데... 너무 오랜만이다... 거의 백지 상태에서 시작하는 기분이었다......

4. JS Challenge

어제 했던 내용을 복습하고, challenge 과제를 만들었다. 과제 내용은 정확하게 말할 순 없지만... 내가 너무 코드를 잘 짰는데, 문제가 있었다. input에서 가져온 a, b가 둘 다 0인데 a === b 를 false가 나오는거야...... 정말 30분간 문제를 해결하려고 노력했는데 콘솔에 찍어보다가.. input.value는 무조건 string임을 깨달았다... parseInt 하나 추가해서 해결했다... 허무해..........

5. 작은 회고

fact - 무슨 일이 있었는지, 뭘 했는지

• tilewind CSS 를 사용하여 이력서를 만들어 보았다.
• groom IDE, ngnix 를 이용해서 프로젝트를 배포해보았다.
• Linux 명령어들과도 오랜만에 만났다.
• JS Challenge 과제를 1시간 정도 걸려서 풀었다.

feeling - 무엇을 느꼈는지,
finding - 어떤 인사이트가 있었는지

• tilewind가 편하지만 내가 생각보다 정석적인 방법을 좋아하는걸 보면... 내가 기피했던 보수적인 개발 환경이... 의외로 나에게 맞을지도? 라는 생각이 들었다.
• 리눅스 오랜만에 보니까.. 반갑고 재밌는데 힘들었다. 학교에서 강의 들을 때 제대로 공부할걸...
• JS Challenge 해보니까.. 생각보다 어렵지 않은데 내가 코드를 참~ 참~ 더럽게 짠다는 것을 새삼 느낄 수 있었다....
• 챌린지를 위한 마크업이다보니 시멘틱이고 BEM이고 나발이고 고려하지 않고 일단 짜니까 너무 편하고 한편으론 이러면 안되는데.. 하는 마음이 들었다...

future action - 액션 플랜이 있는지

• 리눅스 명령어들 오늘 배운거라도 익숙해지기!

feedback

추후 추가 예정.