[Front-end🦁] #18 Tailwind, Linux

1. Tailwind

昨日のBootstrapに続き、TailwindでUIを書く実践が行われました.
(自動化順)bootstrap、tailwindcss、tachyons
大量使用
ガイドバー+php+mysql
スタートバー+ワードプレス
スタートストリップ+Django
ガイドバー+ノード

1-1. 天下第一履歴書コンテスト

tailwindを利用して履歴書を作るコンテストを行いました!条件はテール風以外のCSSを入れないことです.プロジェクト部分は4つのプロジェクトなので、内容だけ編集して入れました!

難しくはありませんが、クラス全員の名前がまだ分からないので、ずっと探していました.width:1200 px;大きめにするにはカスタマイズが必要なのがデメリットですでも焼いたらとても早く感じます
そして実は...制作内容よりも内容の埋め込みが難しいですㅠㅠ…経験のある開発者が履歴書を見ると、まず履歴書も華やかで、自分が仕事で見つけた特技がありますが、私の開発経験はそれほど多くないので、見つけにくいです.

2. VSC Extension

多くの有用な拡張が追加されました.

Live Sass Complier

indent rainbow

Auto rename tag

SASSはまだ使ったことがないので、IndentRainbowが敷かれるととても役に立つとは知りませんでした.

3. Linux

AWS学生信用問題に対してbroomIDEを用いたLinux実習を行った.ngnixを使用してgithub上のrepoを駆動します.
画像ソース
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

コマンドも...コンピューターシステムの課題をするときに権限を間違えたので、教授は私の課題ファイルが見えなければ、ゼロ点をあげて、ちゃんとあげさせてくださいと言いました.お久しぶりです.ほぼ空白状態からの感じ・・・

4. JS Challenge

昨日の内容を復習し、課題に挑戦しました.課題の内容は正確には言えませんが…私はよく編んだが,問題がある.Inputから導入されたa,bはいずれも0であるが,a==bはfalseである.本当に30分の問題を解決しようと努力しましたが、コンソールで撮ってみました...input.valueに気づいた...解決するためにParseIntを追加しました...虚無......

5.小回顧

事実-何が起こったのか、何をしたのか.

tilewind CSSを使用して履歴書を作成します.

brow IDE、ngnixを使用してプロジェクトを配置します.

Linuxコマンドとも久しぶりに会いました.

1時間ほどかけて

JSチャレンジ課題をクリアしました.

feel-何かを感じて、
find-はどんなウェブサイトがあります

tilewindは便利ですが、私が思ったより固定的な方法が好きなのを見たら・・・私が回避している保守的な開発環境は...意外に殴られるかも?という考えが生まれた.

久しぶりに

Linuxに会いました...楽しくて面白かったけど疲れた学校で授業を受けている間によく勉強したと知っていたのに...

JSチャレンジ後...想像していたほど難しくはありませんでしたが、私が編んだのが汚いと感じました.

に挑戦するための表記なので、詩的、BEM的、バジル的、考えずに先に1つ編んでおくので、気持ちがいいのですが、一方でこれでは無理です…こんな気持ちになりました.

future action-行動計画があるかどうか

Linux命令語は、今日習ったとしても、慣れなければなりません!

feedback
今後追加する予定です.