오늘의 키워드📌

---

• gitdev.com
• url encoding
• Form
  • 폼 동작 방식
  • 폼의 속성
• get, post
• gitmoji

나중에 배울 get 과 post 에 대해서 잠깐 미리 맛 보았는데 우주를 다녀 온 기분이다.

'여긴 어디, 나는 누구?'

.
.
.

"언젠가는 이해하겠지~" 는 없다.
대충 넘어가지말고 러닝 커브를 극복하자.
고통스럽지만 완벽하게 이해하도록 노력하자.

1. gitdev.com

---

여태 github 을 쓰면서 몰랐던 점인데 github 홈페이지에서 vscode 접근 가능하다는 사실!

1. 주소창에 github.com 대신 github.dev 를 입력해준다.

2. 혹은 레파지토리 페이지 내에서 . 입력키를 눌러줘도 된다.

그럼 웹 페이지가 vscode 편집창으로 이동된다! 정말 신기했던 정보!!!!

2. url encoding

---

url 인코딩이란 url에서 url로 사용할 수 없는 문자 또는, url로 사용할 수 있지만 의미가 왜곡될 수 있는 문자들을 %.. 형태로 변환하는 것을 말한다. 여기서 .. 는 16진수 값이다.

반대로 url 디코딩이란 변환된 url을 다시 원래의 형태로 되돌리는 것을 말한다.

meywerweb 사이트 를 통해 decode , encode을 할 수 있다.

3. Form

---

폼은 정보를 입력하는 영역이다. 로그인 화면에서 아이디와 비밀번호를 입력하거나, 회원 가입할 때 정보를 입력하는 양식 등은 모두 폼을 이용한다.

폼에 입력을 하고 제출(submit)을 하게 되면?

• 데이터는 서버로 전송되고
• 전송한 데이터는 웹 서버가 처리하며
• 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송한다.

3-1 폼 동작 방식

1. 웹 페이지에 있는 form에 데이터를 입력.
2. 웹 페이지에서 액션이 일어나게 되면 데이터는 웹 서버로 이동.
3. 웹 서버는 데이터를 처리하기 위해 APP을 호출.
   => 이때 APP은 물리적으로 별도의 서버일 수도 있다.
4. 필요에 따라 APP은 DB로 데이터를 전송.
   => 이때 DB는 물리적으로 별도의 서버일 수도 있다.
5. DB에서 CRUD 작업이 일어나고 작업 결과를 APP , WEB 으로 전송.
6. 웹 서버는 받은 결과를 클라이언트 브라우저에게 보낸다.
7. 사용자 브라우저는 응답 받은 페이지를 렌더링하여 사용자에게 보여준다.

CRUD

이름	조작	SQL
CREATE	생성	INSERT
READ	읽기	SELECT
CREATE	생성	INSERT
CREATE	생성	INSERT

3-2 폼의 속성

form의 속성은 다음과 같다.

• action : 입력 값을 전송할 페이지를 나타낸다.

• method : 폼의 데이터를 전송할 방법을 정의한다. method의 속성으로는 get과 post가 있다.

  • get은 웹 서버에 데이터를 요청할 때 사용하며 주소에 데이터를 입력하는 방식이다.
  • post는 파일을 올리거나, 보안이 필요한 데이터를 전송하는 등에 사용되고 주소에 입력 내용이 나타나지 않도록 한다.

4. get, post

---

get과 post에 대해서 아직 자세히 알지는 못하지만 지금 내가 알고 있는 내용만 적어보자!

기본적으로 클라이언트 컴퓨터와 서버 컴퓨터가 있다. 클라이언트는 서버에게 요청을 보내는데 어떤 요청을 보내냐?!

"로그인, 회원가입 시켜주세요~"
"이미지 파일 주세요~"
"비디오 파일 보내주세요~"

위와 같은 요청들을 서버에게 보낸다. 그럼 서버는 요청에 따라 적합한 응답을 주는 것이다.
그렇다면 서버가 알아서 판단해서 응답을 주냐?! 그것은 아니다.
기본적으로 컴퓨터는 한글을 모르고, 어떤 요청이 로그인 시켜달라는 요청인 건지, 이미지 파일을 보내달라는 요청인 건지 구분하지 못하기 때문이다. 이때 체계가 필요한데, 그 체계가 바로 API이다. 즉, API는 클라이언트, 서버와 같이 서로 다른 프로그램에서 요청과 응답을 주고 받을 수 있게 만든 체계다.

API는 요청을 보내는 쪽과 응답을 주는 쪽으로 나뉜다. 클라이언트는 요청을 보내고, 서버 컴퓨터는 요청을 받고 응답을 준다. API는 서버 개발자가 개발하고, 클라이언트 개발자는 그 API를 사용한다.

이제 get과 post를 알기 위해 클라이언트 관점에서 살펴보자.
클라이언트는 서버에 요청을 보낸다고 했다. 예를 들어 "타임라인에 사진을 올리는 요청" 이 있다고 가정하면 CRUD 라고 불리는 기준으로 구분할 수 있다.

• CREATE : CRUD의 C 약자로 "타임라인에 사진을 올리는" 요청을 뜻한다.
• READ : CRUD의 R 약자로 "타임라인에 사진을 불러오는" 요청을 뜻한다.
• UPDATE : CRUD의 U 약자로 "타임라인에 사진을 바꾸는" 요청을 뜻한다.
• DELETE : CRUD의 D 약자로 "타임라인에 지우는" 요청을 뜻한다.

그리고 RESTful API 에서는 요청을 보낼 때 어떤 요청을 보냈는지 메소드를 붙이는데,
(RESTful API는 상황마다 다양한 방식으로 변형해서 사용한다.)

• CREATE => POST
• READ => GET
• UPDATE => PUT(전체) / PATCH(일부)
• DELETE => DELETE

라는 메소드를 붙이게 된다.

정리하자면, API라는 체계에서는 CRUD 라는 기준으로 요청을 구분할 수 있는데, 이때 체계적으로 API를 관리하기 위해서 RESTful API 라는 체계를 사용한다. 그리고 RESTful API 에서는 어떤 요청을 보냈는지 알기 위해 메소드를 붙이는데 CREATE요청에는 POST메소드를, READ요청에는 GET메소드를 붙인다는 것이다.

5. gitmoji

---

5-1 gitmoji

호준님이 잠깐 언급해주신 gitmoji를 오늘부터 해볼까 한다.

• gitmoji : github 커밋 메시지에 이모지 사용을 표준화 하고 설명하기 위한 구상

gitmoji를 사용하면 커밋 메시지에 표시되어 있는 이모지만 보고 커밋의 목적이나 의도를 쉽게 식별 가능하다!

gitmoji 사이트 에서 이모지들의 용도와 의미를 확인할 수 있다. 이미지를 클릭하면 이미지가 복사되고 키워드를 클릭하면 키워드가 복사된다.

5-2 gitmoji-cli 사용법

CLI를 활용하는 것은 gitmoji 공식 문서에도 언급될 정도로 좋은 방법이다.

1. 먼저 gitmoji-cli 를 설치하기 전에 npm이 필요하므로 설치해주자.
2. npm 설치가 끝났다면 $ npm i -g gitmoji-cli 입력을 통해 gitmoji-cli 를 설치한다.
3. $ git add를 통해 스테이징를 해두자.
4. 그리고 $ gitmoji -c로 커밋메시지를 작성한다.
   4.1 키워드를 통해 검색 또는 방향키를 통해 이모지 선택이 가능하다!
5. 이모지를 선택했으면 커밋 제목과 메시지를 입력해준다.
6. $ git push 를 통해 원격 저장소에 push !!!

짜잔!!🎉 이모지가 추가 되었다!!
이렇게 배운것을 바로 써먹으니 정말 뿌듯하다!!!

참고

---

• URL 인코딩/디코딩
• Gitmoji 사용법
• 도서 - 비전공자를 위한 이해할 수 있는 IT지식