초반 데이터베이스와 C.R.U.D는 정말 중요하다.

장고를 처음 배울 당시 코로나확진으로 세션을 온라인으로 듣고 나름대로 열심히 했지만 다같이 실습하는 것과는 다르다는 것을 느꼈었다.

그런데 프로젝트를 진행하면서 뷰를 작성하려니 뭔가 계속 막히는 것이었다. 그 때 멘토님의 진단을 통해 초반 부분이 미흡하다는 것을 알게 되었다.

모델링을 하려해도 기초가 잘 잡혀있지 않아서 어려웠고 뷰를 작성하는 것은 어렵기만했다. 장고는 물론 굉장히 편리한 프로그램이지만 기초 없이 사용하기는 당연히 어렵다.

멘토링을 따라 미흡했던 부분을 채우고나니 장고와 조금씩 친해지는 것 같았다. 차근차근 순서대로 따라간다면 장고로 프로그램을 만들고 관리하는 일이 더 쉬워질 것 같다.

🍊 팀작업은 어떨까?

혼자 할 때는 "이렇게 작업한 내용을 어떻게 사용하게 되는 걸까?" 라는 생각을 많이 했다.

팀 프로젝트를 진행하면서 초기세팅과 초반모델링을 함께 했다. (다만 에러가 뜨지 않기를 바랄 뿐이었다.)

혼자하는 작업은 혼자서 계획을 짜고 홀로 모든 것을 알아서 하면 되는 것이지만 팀 작업은 팀원 모두가 한 몸이 되어서 만들어가는 게 다르다는 것을 느꼈다.

특히나 모델링을 하거나 데이터를 어떻게 다뤄야할지는 백엔드 혼자서만 결정하는 게 아닌 프론트와 함께 얘기하고 진행해야 어려움이 적어질 수 있다는 것을 배웠다. 함께 하는 작업이기에 물론 소통이 가장 중요하고, 어떤 일이든 함께 공유해야 같은 곳으로 갈 수 있다는 것을 알게 된 시간이었다.

🍊 기억하고 싶은 코드

뷰가 제일 기억에 남는다. 너무 어려워서.

이해하려고 몇 시간을 붙잡고 해석하고 주석달아가면서 붙잡았던 뷰 덕분에 현재 나의 문제점과 어떻게 하면 개선할 수 있는지를 알게 되었다.

다음 프로젝트에서는 ERD설계와 모델링과 뷰 작성에 적극적으로 참여하고 내 코드를 만들고 싶다.

🍊 프로젝트에서 배운 것들

정말 많다. 아무것도 모르던 백지 상태의 내가 산더미 같은 과제를 받은 기분이다. 그런데 어깨가 무겁기 보다는 배운 것들이 재미있고 할 일이 많아져서 행복하다.

🍋 첫 번째로 배운 것은 뷰를 작성하는 방법이다.

뷰 작성을 할 때 무작정 코드를 치거나 다른 코드를 복사 붙여넣기 하는 경우가 있는데 그러기 보다는 작성 전에 직접 순서를 정해서 코드를 작성해 보는 것이다. 해당 메서드에서 처리해야할 로직을 순서대로 정리하는 방법이다.

예를 들면, 아래와 같다.(이 방법을 알려주신 승현멘토님께 감사드린다😄)

1. REQUEST에서 BODY를 가져오기
2. BODY에서 원하는 데이터를 꺼내기
3. 이메일 유효성 검사 진행하기
4. if문으로 db에 email 있는지 확인하기
5. 있으면 LOGIN 메세지 전달, 없으면 SIGNUP 메세지 전달
6. 이 후, SHELL에서 각자 만들어보기

코드를 작성하기 전에 이렇게 먼저 정리를 한 다음 실제 코드를 작성하여 얻는 이점은 아래와 같다.

• 코드를 짜면서 다음 스텝이 무엇인지 고민해야하는 시간을 단축시킬 수 있고
• 처음부터 내가 어떤 부분을 모르는지 파악을 할 수 있게 되어 빠르게 도움을 요청할 수 있게 된다.

작성할 때는 이렇게 플로우 정리부터 한 다음 최종 머지 전에 주석을 없애주면 된다.

이렇게 순서를 정해서 만들면 처음에는 시간이 오래 걸리는 것 같지만, 막상 진행해보면 금방 끝난다. 조금 귀찮은 일이지만 이런 순서를 정해서 활용하면 실수하는 일이 적어진다.(고 멘토님께서 말해주셨다.)

🍋 두번째로 배운 것은 스탠드업 회의에서 체크할 것들이다.

• 전체 진척도를 살피기( 백엔드/프론트엔드 모두 포함한 진척도)

• 사이트 이용 플로우를 확인하고 고려해서 일정을 짜기
• 언제 통신할 것인지 확인하기
• 진행시 우선 순위를 고려해서 작업을 진행하기
• 회의 시 트렐로 활용하기
• 트렐로에 어떤 API를 활용할지 공유하기
• 회의록 작성하기
• 미리 한 것, 앞으로 할 일, 막히는 부분 등 작성해서 화면으로 한 번에 보여주기

위의 체크사항대로 회의를 진행하면 막힘없이 진행 되고 빠르게 회의를 끝마치게 되어 프로젝트 시간을 좀 더 확보할 수 있다. (래영멘토님의 조언에 감사드린다😊)

🍋 세번째는 중간 발표에서 동기들에게 배운 것이다.

• 노션과 트렐로는 프론트엔드와 백엔드의 소통의 창이다.

• 모르는 용어와 내용은 바로 바로 공유해야한다.
• 하고싶었던 것과 필수구현목표를 명확히 해야한다.
• 초반 모델링은 정말 중요하다.
• 데이터베이스 공부 특히 중요하다.
• 소통의 중요성 : 프론트엔드 용어 공부
• 내 일만 하지 말고 모든 일에 내 일 처럼 관심 갖고 소통할 것.

중간 발표에서도 정말 얻은 것이 많다. 처음 초반 세팅을 어떻게 어떤 방식으로 가져갈 것 인가도 무척 중요하지만 동기들의 마인드셋을 보면서도 느낀 점이 많았다. 조금은 루즈하고 가라앉아있던 와중에 동기들의 태도를 보며 마음가짐을 다시 한 번 다잡는 계기가 되었다.

🍊 프로젝트를 마치고 느낀 점

프로젝트는 혼자 하는 일이 아니다.

프로젝트에는 여러 사람이 참여하고, 그 사람들이 한 몸 처럼 서로의 일에 대해 알고 있어야 삐걱거림 없이 원활하게 흘러간다.

기능 구현과 데이터 관리 모두 정말 중요하지만 가장 중요한 것을 꼽으라면 역시 소통인 것 같다.

우리가 만약 서로의 일에 대해 전혀 관심 없이 프로젝트를 진행했다면 어땠을까? 결과는 냈겠지만 조금 더 힘든 여정이 아니었을까?

사실 나는 결과가 중요하다고 믿어왔던 사람인데 이번 프로젝트를 통해서 생각이 완전히 달라졌다. 결과도 중요하지만 결과에 이르는 과정이 정말 중요하다고 생각하게 되었다.

같은 목표를 향해 가는 사람들이 모여서 하는 일, 프로젝트. 과정이 얼마나 길지 모르는데 그러한 과정 속에서 소통이 되지 않거나 힘든 일이 있으면 함께 하는 일이 의도치 않은 곳으로 흘러갈 수도 있을 것이다.

그런데 팀원 중 한 명이 일이 풀리지 않는데 모든 팀원들이 자기 일처럼 관심을 갖고 알아봐준다면? 일단 고민하는 시간이 줄어들 것이고 그러면 시간확보를 하게 되고 속도가 더 빨라진다. 또 서로 관심을 계속 가져주고 즉각적인 반응을 해주면 팀에 대한 믿음과 든든함을 느끼게 되고 확신을 갖게 된다. 정서적인 부분이 케어가 되는 것이라고 생각한다.

이번 프로젝트와 우리팀이 소통하는 방식을 보면서 서로에 대한 믿음과 배려가 소통의 첫 번째 단추가 아닐까 하는 생각을 하게 되었다. 우리는 결과를 만드는 일을 하지만 결과를 만들어가는 것도 사람이 하는 일이다. 한 가지 목표를 위해 만들어가는 과정이 지난하고 힘들 수 있다. 하지만 그 과정을 조금은 덜 힘들도록 해주는 것이 소통이 아닐까?

짧다면 짧은 2주, 프로젝트와 팀을 통해서 배운 것들이 정말 많다. 그 중에서도 한 가지만 꼽으라면 단연코 소통이다. 앞으로도 어떤 프로젝트에서든 소통하는 방법을 잊지 않을 것이다.

🍊 개발 한 달, 개발자가 갖춰야할 필수조건은 무엇일까?

• 말하는 방법, 소통

• 일의 순서에 대한 지각
• 무엇을 알고 무엇을 모르는지, 메타인지
• 기본이 제일 중요하다

zsh: command not found: brew

brew 입력하기만하면 빨간불 떠서ㅠㅠㅠ 반나절동안 서치하고 고생하다 찾아낸 방법...!

/opt/homebrew 디렉토리 삭제 후 아래 방법대로 다시 설치

>1. /opt 디렉토리로 이동

cd /opt​

2. Homebrew 디렉토리를 만든다.(root 권한 필요)

sudo mkdir homebrew​

3. /opt/homebrew 디렉토리의 소유권을 부여(root 권한이 필요 없도록)

sudo chown -R $(whoami) /opt/homebrew​

4. homebrew를 다운로드하고 압축을 푼다.(https://docs.brew.sh/Installation 참고)

curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew​

5. homebrew/bin 디렉토리를 PATH에 추가한다.(zsh를 사용하지 않을 경우 직접 해야 한다고 하는데 그냥 했다..)

echo "export PATH=/opt/homebrew/bin:$PATH" >> ~/.zshrc​

6. 마지막! 명령어 실행

/bin/bash -c "$(curl -fsSL https://gist.githubusercontent.com/nrubin29/bea5aa83e8dfa91370fe83b62dad6dfa/raw/48f48f7fef21abb308e129a80b3214c2538fc611/homebrew_m1.sh)"​

참고 : https://gist.github.com/nrubin29/bea5aa83e8dfa91370fe83b62dad6dfa

https://sokkung.tistory.com/148

# Mac homebrew mysql 설치 후 ERROR! The server quit without updating PID file

1. brew install mysql
2. sudo mysqld --initialize --user=niee
3. mysql.server start

출처: https://niees.tistory.com/72 [NIEE WEB 개발]

GitHub

• Git repository를 위한 호스팅 플랫폼
• Git을 사용하는 프로젝트를 위한 호스팅 서비스
• GitHub을 사용하여 로컬 프로젝트 repository를 원격 클라우드 기반 GitHub 저장소에 업로드 할 수 있고, public repository 들을 통해 다른 개발자들과 교류할 수도 있다.

Git

• 버전 관리 시스템으로, 시간이 지남에 따라 파일의 변경 사항을 추적하는 도구

Using GitHub

• Common Workflow: 내 로컬 Repository를 GitHub 에 push 하기

1. 로컬에서 add / commit 한다.
2. Github 으로 이동 후 새 repository를 생성한다.
3. 나의 로컬 repository 를 GitHub repository 와 연결한다. (remote 추가)
4. 새 remote 를 이용하여 코드를 Push 한다.

• github.com 이동

1. repository 생성
2. repository 에 코드 push 하기

   git remote add origin https://github.com/<your-username>/<your-repo-name>.git
   git push -u origin master

• repository 에 변경사항 남기기

1. 변경사항 push -> GitHub repo 업데이트

   console.log("안녕하세요, 위코더 여러분!");

2. 저장 후 커밋을 위해 add 후 커밋메세지를 남기기

   git add .
   git commit -m "Change greeting"

3. 업데이트 된 로컬 repo를 GitHub repo로 push

   git push origin master

Using GitHub 2

• repository 클론 GitHub repo 를 먼저 생성한 뒤 clone 을 받아 내 로컬환경에 다운로드 후 프로젝트를 시작하는 방법

1. GitHub repo 를 생성 repository 를 clone 하기 위해서 'Clone or download' 라는 초록색 버튼을 누른 뒤 아래 복사 아이콘을 클릭 (repository 주소를 복사)
2. 해당 remote repository 를 내 컴퓨터로 받아오기 위해, 해당 repo 를 다운로드 받고 싶은 경로로 이동한 뒤 git clone 명령어에 방금 복사해준 URL 을 붙여주고 실행

   git clone <github-repo-link>

   이렇게 하면 해당 경로에 clone 받은 GitHub repository 의 이름을 그대로 딴 폴더가 생성되고 cd 명령어를 사용해 해당 폴더로 이동하면, clone 시점에 remote repository에 존재했던 모든 폴더 및 파일들이 그대로 복제되어 있는것을 확인할 수 있다.

다른 개발자들의 public repository 를 클론받아 작업할 수도 있다.

Branching and merging

• 테스트를 아직 해보지 않았거나, 새로 추가한 기능을 GitHub repo 에 push 하고 싶다면?

• Branch

• 브랜치를 사용해서 현재 프로젝트의 코드를 그대로 복제하여 작업 환경을 만들 수 있다.
• master 브랜치를 건드릴 필요없이 작업환경에서 기능을 추가하거나 테스트를 진행
• 나중에 전부 완료가 되면, master 브랜치와 merge (병합)

GitHub 에 브랜치 push 하기

1. 예를 들어, 전에 생성 한 hello-wecoders 프로젝트에 새로운 파일을 추가하고 싶다면, 우선 아래 명령어를 통해 새로운 브랜치를 생성하고 이동해야한다.

   git checkout -b feature/greetings
   <feature/greetings> 부분 원하는 브랜치 이름으로 대체

2. example.js 라는 파일을 만들고, 아래 코드를 삽입

   console.log("Hello Wecoders!");

3. 커밋 절차를 거쳐 변경사항을 커밋

   git add .
   git commit -m "Add: greetings"

4. push를 통해 feature/greetings 브랜치를 remote 로 올린다.

   git push origin feature/greetings

-> GitHub repository 에 내가 방금 push 한 branch가 추가되는 것을 확인

Pull Request (PR) 생성

• 프로젝트 오너 (혹은 팀 리더) 에게 내가 작업한 브랜치의 작업내용을 master 브랜치에 반영해달라는 요청을 보낼 수 있다.
• Pull Request 에서는 해당 repository 를 열람할 수 있는 권한이 있는 개발자들이 작업내용에 대한 리뷰를 해주거나, 변경 사항을 확인할 수 있다. (master 브랜치로 합쳐지기 전에 확인해야하기 때문에)
• 해당 링크를 클릭하면, Pull Request 를 생성할 수 있는 페이지로 이동 / 해당 PR의 제목과 어떤 내용을 담고 있는지 설명하는 Description을 작성할 수 있다.
• 작성을 완료했다면, 하단에 'Create pull request' 버튼을 눌러 마무리
• 이때부터는 함께 협업하는 개발자들이 방금 만든 PR을 리뷰, 분석하고 댓글까지 달아줄 수 있다.
• 모든 리뷰 내용이 반영된 후 master 브랜치와 충돌이 발생하지 않았다면, 해당 PR은 master 브랜치로 merge 될 준비가 끝났다.

Conflicts (충돌)

• merge 하기 전 conflicts (충돌) 가 발생할 수도 있다.
• 충돌은 어떤 파일의 변경사항이 기준이 되는 master 브랜치의 파일과 겹쳐, Git 에서 어떤 버전의 코드를 선택해야하는지 모를 때 발생한다.
• 이런 상황에서는, 개발자가 직접 코드를 비교해 충돌을 해결하고 merge 를 마무리 해야한다.

GitHub 으로부터 변경사항 pull 하기

• Pull Request 를 통해 master 브랜치를 업데이트했다면, 이제 로컬 repository 는 GitHub 에 있는 master 와 서로 다른 내용을 가지고 있게 된다.
• 이 때 git pull 명령어를 통해 remote 의 최신화된 코드를 내 로컬 repo 에 반영할 수 있다.
• 여기서 GitHub remote repo 링크에 origin 이라는 이름을 붙여줬었기 때문에 아래 명령어를 통해 GitHub repo 의 master 브랜치 내용을 받아올 수 있다.

  git pull origin master

마무리

• 깃헙help
• 깃헙가이드

• 분산 버전 관리 시스템 (VCS)
• 프로젝트 파일의 변경 사항을 추적하는 시스템

Repositories (저장소)

Git으로 관리하는 프로젝트 저장소

• Local repository - 본인의 컴퓨터에 저장된 로컬 버전의 프로젝트 저장소
• Remote repository - 로컬 repository 와는 반대로 내 컴퓨터가 아닌 외부 (일반적으로 원격 서버) 버전의 프로젝트 저장소. 팀에서 작업 할 때 특히 유용하다. 이 곳에서 프로젝트 코드를 공유할 수 있고, 다른 사람의 코드를 확인할 수도 있다. 또, 로컬 버전의 프로젝트와 병합하고, 변경 사항을 적용 할 수 있는 곳이다.

기본 명령어

• git init : git 시작 (.git 디렉토리 생성)
• git status : git 상태 확인
• git add : 파일 수정 이력 기록 준비
• git commit : 파일 수정 이력 기록
• git log : commit 이력 보기

Staging area에 파일 추가하기

프로젝트 폴더에서, git add 라는 명령어를 통해 우리가 원하는 파일들을 staging area 로 추가해줄 수 있습니다.

특정 파일만 추가
git add file.js

여러개의 파일들을 추가
git add file.js file2.js file3.js

모든 파일을 한번에 추가
git add .

커밋 남기기

큰 따옴표 안에 커밋 메세지를 작성
git commit -m "Commit message"

커밋 메시지는 repository에 커밋하는 변경 사항을 설명하는 짧은 summary 여야한다. 위 명령어를 실행하면, 터미널에 방금 남긴 커밋에 대한 세부 내용이 보여지게 된다.

- 새 커밋을 남기려면 staging area에 파일을 추가 한 다음 커밋을 남기는 프로세스를 반복
-git status 명령어를 통해 어떤 파일이 수정, 추가 또는 추적되지 않고 있는지 확인

커밋 히스토리

프로젝트의 모든 커밋 내역을 보려면
git log

특정 커밋 시점의 코드로 되돌리고 싶다면
git checkout <commit-hash>
<commit-hash> 를 git log 에서 보이는 커밋의 실제 hash 값으로 대체

Ignoring files

staging area 에 추가하고 싶지 않거나, git 에서 관리하지 않아도 되는 파일이 있다면 .gitignore 파일을 프로젝트 폴더에 생성 .gitignore 파일 안에, 해당하는 파일명과 폴더명을 나열(각 파일, 폴더가 새로운 줄에 입력되어야한다.)

Branch

• 독립적으로 어떤 작업을 진행하기 위한 개념
• 다른 브랜치의 영향을 받지 않기 때문에, 여러 작업을 동시에 진행
• 여러 명이서 동시에 작업을 할 때에 다른 사람의 작업에 영향을 주거나 받지 않도록, 먼저 메인 브랜치에서 자신의 작업 전용 브랜치를 만든다. 각자 작업을 진행한 후, 작업이 끝난 사람은 메인 브랜치에 자신의 브랜치의 변경 사항을 적용한다. 이렇게 함으로써 다르사람의 작업에 영향을 받지 않고 독립적으로 특정 작업을 수행하고 그 결과를 하나로 모아 나가게 된다. 이러한 방식으로 작업할 경우 '작업 단위', 즉 브랜치로 그 작업의 기록을 중간 중간에 남기게 되므로 문제가 발생했을 경우 원인이 되는 작업을 찾아내거나 그에 따르 대책을 세우기 쉬워진다.
• 저장소를 처음 만들면, Git은 바로 'master'라는 이름의 브랜치를 만들어둔다. 이 새로운 저장소에 새로운 파일을 추가 한다거나 추가한 파일의 내용을 변경하여 그 내용을 저장(커밋)하는 것은 모두 'master'라는 이름의 브랜치를 통해 처리할 수 있는 일이 된다.
• 'master'가 아닌 또 다른 새로운 브랜치를 만들어서 체크아웃 하지 않는 이상, 이 때의 모든 작업은 'master'에서 이루어진다.

브랜치 생성

git branch <new-branch-name>

보통 코드를 개선하고 새로운 실험 기능을 추가하는 등의 작업을 할 수있는 development 브랜치를 만드는 것이 좋다. 새로운 기능을 개발하고 테스트 한 후 버그가 없고, 사용할 준비가 되어있는지 확인한 후 최종적으로 master 브랜치에 병합할 수 있다.

브랜치 전환

다른 브랜치로 이동
git checkout <branch-name>

브랜치 생성과 동시에 생성된 브랜치로 이동하고 싶다면 
기존 checkout 명령어에 -b 라는 flag 를 추가
git checkout -b <new-branch-name>

프로젝트에 존재하는 모든 브랜치를 확인하고 싶다면 
git branch

브랜치 병합

• A 라는 브랜치에서 작업한 내용을 B 라는 브랜치에 적용하고 싶을 때, 브랜치 A 와 브랜치 B 를 병합(merge)할 수 있다.
• 특정 브랜치에서 새로운 기능을 완벽하게 구현하고 테스트까지 완료한 시점이면, 기준이 되는 master 브랜치에 구현내용을 적용시켜야 할 때 사용한다.

  git merge <branch-name>

브랜치 삭제

조심해서 쓰자...
git branch -d <branch-name>

FHS(Filesystem Hierarchy Standard)

• root(/) 루트 폴더. 최상위 경로.

• /home (~) 윈도우 : C드라이브/Users/사용자명 ⇒ 바탕 화면, 다운로드, 내 문서 유저의 공간. 가장 빈번하게 사용하게 되는 경로. Home 디렉토리 이외의 다른 디렉토리 들은 주로 system directory 라고 하는데, 즉 리눅스의 운영과 관리에 관련한 파일들이 존재하는 디렉토리들. ~ 기호로 곧바로 접근할 수 있다.

• /bin & /sbin 윈도우 : C드라이브/windows/system32 폴더 Binary의 약자. OS의 최소한의 구동을 위해 필요한 프로그램이 들어있는 폴더. cat, chmod, chown, cp, date, echo, kill, ln, ls, mkdir, etx 와 같은 기초적인 프로그램들이 포함. sbin 폴더는 bin과 유사하지만 오직 루트유저 전용 프로그램 포함.

• /usr 윈도우 : C드라이브/Users/사용자1 user의 약자. 각 유저 이름에 해당하는 폴더이름이 존재. 각 폴더마다 bin, sbin, shared, lib과같이 각 유저들이 사용할 수 있는 폴더가 생성되어 있음. 각각의 유저별로 다른 파티션으로 존재하기 때문에 다른 사용자들이 사용할 수 있도 록 마운트할 수 있지만 이 경우 수정할 수는 없음.

PATH

• / : root 디렉토리
• ~ : home 디렉토리
• 절대 경로 : Absolute path는 이름 그대로 절대적 경로. 경로를 표현하는 방식이 root 디렉토리 부터 시작한다는 점에서 "완전한"의 의미에 더욱 가까움. (ex. /home/eun/bin)
• 상대 경로 : Relative path. 현재 자신의 위치를 기반으로 움직이는 경로. (ex. cd ..)
• . : 현재 경로
• .. : 상위 경로
• 환경 변수 OS도 프로그램이기 때문에 OS가 동작하기 위해 변수가 필요 env 명령어로 linux의 환경변수 확인

2. 터미널

터미널에서 할 수 있는 것

텍스트 기반으로 명령어를 입력할 수 있는 CLI(command-line interface)역할을 한다. 모든 명령어를 구현할 수 있다.

터미널 실행하기

Mac OS는 Spotlight (⌘ + Space)를 불러 “Terminal”을 찾아 실행할 수 있다. Linux는 “terminal” 을 찾아 실행하면 된다. 단축기 Ctrl + Alt + T를 이용해 실행할 수 있다. Windows 10은, PowerShell이라는 터미널을 실행한다.

기본 명령어

• vi : 파일 편집 에디터 활성화(파일명.확장자)

• cd : 폴더이동 cd (경로) → . .. /usr (change directory)
• ls : 현재 경로 내 파일 목록 출력 (list segments)
  ls -al
• pwd : 현재 경로 출력 (print working directory)
• mkdir : 디렉토리 생성 (make directory)
• rmdir : 디렉토리 제거
• rm : 파일 / 디렉토리제거
• rm -rf : 묻지 않고 디렉토리 모두 제거 (하지말것, 복구가 어려움)
• cp : 파일 / 디렉토리 복사
• mv : 파일 / 디렉토리 이동
• cat : 터미널에 파일 내용 출력 (concatenate)
• touch : 파일 생성 및 날짜정보 변경 touch readme.md
• chmod : 파일 / 디렉토리 권한 설정 change mode (chmod u+x readme.md)

파일 편집 명령어

vi : 파일 편집 에디터 활성화

• i : 편집모드(끼워넣기/insert)
• esc
• Shift + ;
• wq : write & quite 입력모드에서 다시 명령모드로 가려면 [ESC]키

vi에서 커서 움직이는 방법

H : ← J : ↓ K : ↑ L : → gg : 파일의 맨 위

커서 & 라인 기준으로 움직이는 방법

G : 파일의 맨 아래 a : 현재 커서의 오른쪽 A : 현재 라인의 맨 끝부분 i : 현재 커서의 왼쪽 I : 현재 라인의 왼쪽 o : 현재 라인의 아래 O : 현재 라인의 위

문장 컨트롤

→ y는 "복사"의미를 가지고 있다 yy : 현재 커서 라인 복사 yy를 이용해서 문장을 number의 라인을 복사할 수 있다 ex) 3yy (현재 커서부터 아래로 3라인을 복사한다)

yw : 단어 복사(단어위에 커서를 올리고 실행) p : 현재 커서 아래에 붙여넣기 P : 현재 커서 위 에 붙여넣기 dd : 라인 삭제 → d는 "삭제"의미를 가지고 있다. ex) 3dd (햔재 커서부터 아래로 3줄 삭제한다) u : 실행취소(undo) ctrl+r : 다시실행(redo)

실행모드

명령모드 → 실행모드 [:을 붙여주는 명령어] :q : 종료 (파일 변경시 저장하지 않고 나가면 에러메세지 출력) :q! : 저장하지 않고 종료 :w : 저장 ▼ :wq : 저장후 종료 :set nu(:se nu) : 해당 줄에 인덱스들이 보임 :se nonu는 인덱스는 보이지 않음 -->> : num번째 줄로 이동 ex) :5 : 5번째 줄로 이동 :,y : num1num2 라인 복사 :,d : num1num2 라인 삭제

%는 전체

:%y : 전체복사 :%d : 전체삭제

$마지막 라인

:$y
:$d

y자리에 d가 d자리에 y가 들어갈 수 있다.

찾기

/copy : 찾기(아래방향) ?copy : 찾기(위의방향) => 이때 단어를 하나찾고 기능을 멈춘다

중복된 단어 찾기

n 같은방향으로 탐색 N 반대방형으로 탐색

바꾸기

:범위s/찾을내용/바꿀내용/옵션 ex) 2~4번쨰 라인에서 abc를 찾고 ABC로 변경하겠다 :2,4s/abc/ABC 이때 중복된 값은 한개만 치환되기에 커서를 그 문장에 두고 :s/abc/ABC/g option g(global)옵션을 사용한다 이렇게 되면 라인안에서 abc문자가 ABC로 모두 바뀌게 된다. 모두 바꾸고 싶을때는 :%s/abc/ABC/g 전체를 나타내는 %와 option g를 같이 사용한다.

vi 실행 중 커멘드 실행하기

:!<command>
:! ls /root

하면 /root의 내용이 출력되고 ENTER를 누르면 다시 vi편집기로 돌아갑니다.

vi안에서 다른 vi열기

:sp : 다른 파일도 열겠다

cat > : 파일 출력 cat : 파일 편집 (나올 때 cmd + c) vi : 파일 편집(실행/입력/명령모드)

• Semantic Web이란? ‘의미론적인 웹’이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹

• 웹 기술의 발전과 인터넷의 활성화로 정보와 웹사이트의 양이 방대해졌다.
• 이로 인해 다양한 정보들이 축적되었고, 정보가 너무 많아짐에 따라 많은 문제들이 생겨났다.
• 사용자가 직접 처리하는 문제를 해결하기 위해 기계가 읽고 처리할 수 있는 웹을 개발하고자 탄생한 것이 Semantic Web이다.
• 꼭 필요한 정보만 얻을 수 있도록 기계가 스스로 정보의 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 것이 Semantic Web의 목적이다.

이와 같이 검색엔진이 잘 검색할 수 있도록 최적화를 내기 위해 문서의 의미에 맞게 구성된 웹이 Semantic Web이다.

• 결론적으로 Semantic Web은 웹에 존재하는 수많은 웹들의 메타데이터를 부여하여, 웹 접근성을 높였다.

메타데이터란 다른 데이터를 기술하기위해 사용되는 언어로 특정 데이터를 검색엔진으로 쉽게 찾아낼 수 있으며 데이터를 사용하는 사람의 눈에 보이지 않고, 컴퓨터가 이용함

2. Semantic Tags

• 시맨틱 웹에서 사람과 기계가 이해할 수 있는 형태, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag

2-1 non-semantic Tag 와 semantic Tag 비교

• non-semantic Tag : div , span

• 자신이 무엇인지 설명해주지 않는다. (content에 대한 설명이 없다)

• semantic Tag : form , table , img

• 자신이 어떤 요소인지 정확히 설명한다.

2-2 검색의 최적화

• 의미있는 Tag들의 등장으로 기계는 정보를 더 효과적으로 읽고 처리할 수 있게 되었다.

3. img와 background-image

img

• 시멘틱 태그로써 컴퓨터가 이해할 수 있다.
• alt 속성으로 이미지가 깨졌을시 무슨이미지 인지 예측이 가능하다.
• 사용자의 검색에 노출된다.

background-image

• 이미지가 깨졌을 시 로딩불가만 표시되고 어떤 이미지인지 확인이 불가하다.
• 사이트의 장식을 위해서 사용한다.

🪴 정리하며 든 생각

✔ 정리를 마치며 HTML을 배울 때 생활코딩으로 시작했는데 굉장히 인상적이었던 말이 있다. 태그의 용도를 정확히 알고 사용하고, 거기에 맞게 코딩하는 것은 시각장애인을 배려하는 휴머니즘이면서 검색엔진에 노출될 기회를 높여 비즈니스적인 표면적을 넓힐 수 있는 전략이다. 이 말이 Semantic Web과 Semantic Tags 과제를 하며 계속해서 떠올랐다. 나 또한 개발자로서 적절한 코딩으로 휴머니즘을 품고 비즈니스를 끌어가는 사람이 되고 싶다.

HTML이란 뭘까?

HTML로 무엇을 할 수 있을까?

HTML ( Hypertext Markup Language )

여기서 질문. 그럼 Hypertext는 뭘 의미할까?

Hypertext

*Text 란 무엇일까? * 명사 : 본문 / 글, 문서 동사 : 문자를 보내다

Hyper 란? 접두사 : 어떤 범위를 훨씬 벗어난, 어떤 범위를 뛰어넘는

사전적 의미만 두고 봤을 때 Text 는 정보 그 자체를 의미하고 Hyper는 어떤 상태를 뛰어넘는다는 의미를 갖고 있다.

🌳 그렇다면 Hypertext란 무엇일까?

정보에 대한 순차적 접근을 뛰어넘는다는 의미로 일반 텍스트와 달리 문장이나 단어 등이 링크를 통해 서로 연결된 네트워크처럼 구성된 문서를 말한다.

아래 링크를 눌러보자.

HTML 공식 설명 페이지

공식 설명 페이지로 바로 연결되어 쉽게 다른 페이지로 갈 수 있다.

이처럼 Hypertext란

한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트, 다른 문서와 쉽게 연결이 되도록 한 링크의 모음으로 구성된 문서이다.

여기까지 하이퍼텍스트에 대해 알아보았다.

🌳 Markup Language는 어떤 역할을 할까?

문서의 구조를 표현 웹 브라우저에게 명령 정보를 수집하는 검색 엔진에게 자료를 제공

그럼 다시 돌아와서,

01-1. HTML이란?

HT(Hypertext) : 문서와 문서가 링크로 연결되어 있다 M(Markup) : 태그로 이루어져있다 L(Language) : 언어

🌼웹 페이지를 만들기 위한 언어

01-2. HTML의 기능

• 웹페이지의 구조를 잡을 수 있다
• HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있다
• 브라우저가 HTML파일을 갖고 무엇을 어떻게 그리면 될지 파악한 후에 웹 페이지를 생성한다

01-3. HTML 파일

HTML은 .html 확장자가 붙은 텍스트 파일 파일 이름은 원하는대로 정할 수 있다.

• index.html
• 1.html
• main.html

01-4. HTML tag

<p>위코드 첫시작</p>

<태그이름>내용</태그이름>

시작태그와 종료태그가 필요한 태그

<p></p>
<h1></h1>
<h2></h2>
<a></a>

시작과 동시에 종료되는 태그

<img>
<br>

01-4-1. attribute(속성)

속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있다.

아래에서 div, a, img는 태그 / class, href, src, alt는 속성

<div class="title">타이틀</div>
<a href="https://naver.com">네이버로 이동</a>
<img src="./me.png" alt="강아지사진">