WIL 22-7-17 한 주 마무리

항해 99 부트캠프를 시작한지 1주가 지나고 있다..!

사전 준비기간부터

토이 프로젝트도 하고 그랬는데도
막상 시작 바로 전까지는 

막막하기만 했다..

시작한 첫 날에 ZOOM을 통해 간단한 OT를 진행하고 나서 

'미니프로젝트 시이이이이22222 작!!!!!'

하는 느낌으로

팀원들과 함께 작은 돛단배 태우고 바다로 던져진 기분이었다...

 

이번 미니프로젝트는 총 4명이 팀을 이루었고 이번 첫 프로젝트 조에서는

팀장이 되어 프로젝트를 진행하게 되었다.

사실 말만 팀장이고 팀원들을 모아주는 역할과 의견을 취합하는 역할을 주로 하고

나머지는 모두가 팀원이고 팀장이라고 생각했다.

 

하지만

 

나름 이런 직책을 맡으면 잘하고싶은 욕심이 생기기때문에

마냥 편하게만 생각이 들진 않았고 사실 부담이 되었다.

그리고 부담을 느낄새도 없이 빠르게 프로젝트 주제를 정해야만 했고

팀원들끼리 어떤 주제로 프로젝트를 할 지 정해보았다.

이번 프로젝트는 웹사이트를 만들었어야 했고

 우리가 정한 주제는

음악관련하여 취향에 따라 태그를 선택 ex)운동할때, 신나는, 새벽

이런 태그를 선택하면 음악 리스트가 나오고 클릭하면

유튜브 영상으로 넘어가는 사이트를 만들기로 했다.

정한 주제로 간단한 프레임을 만들고

각각 페이지대로 나누어 진행하기로 했다.

내가 맞게된 페이지는 로그인/회원가입 페이지였는데

전부터 가장 해보고싶었고 어떻게 작동하는지 궁금했었기때문에 기쁘게 맡았다.

 

먼저 항해99에서 제공해준 강의를 바탕으로

강의를 들었고 내용은 이해했지만 코드를 그대로 작성하기는

무리가 있어서 강의를 따라한 완성물을 이용한 소스코드를 이용하여 만들었다.

그리고나서 css를 붙여서 

아래 그림과 같은 페이지를 완성했다.

 

-내가 만든 첫 로그인 페이지-

 

그리고 나서 우리는 깃을 이용해 서로에 작업물들을 합쳐야 했는데

처음에 시작을 잘못했던게 

깃을 이용해서 시작파일을 서로 공유해서 시작을 했어야했는데

깃을 잘못 이해하는 바람에 이름 같은 파이썬 파일을 합치면

끝나는 줄 알았다..

그래서 우리는 작성한 파일들을 한 명한테 보내서

같이 화면을 공유하면서 맞췄다.. (거의 반나절은 그렇게 지나간 듯)

 

그래도 다같이 힘을 합쳐서 해결했던게

뿌듯했다.

그리고 나중에 보니 대부분의 조가 이런 실수를 저질렀다고 한다... ㅎㅎ;

 

아무튼 여차저차 합쳐서 마무리 하는 과정에서 나만 프론트엔드가

하고 싶은 개발자이고 나머지 분들은 백엔드로 선택을 해서인지

보여지는 부분을 나만큼 신경쓰진 않아서

욕심이 생겨 주도해서 진행했다.

그리고 하면서 느꼈지만 역시 프론트엔드가

맞는 것 같다는 생각을 했다.

나중에 시연할때 프론트적으로 잘해주었다고 말씀해주셔서

특히나 뿌듯했다.

아무튼 이렇게 미니프로젝튼는 끝이 났는데

굉장히 힘들만한 일정이었는데 개인적으로는 힘들기보단 즐거웠다.

하고 싶었던 일을 한다는게 이런 느낌일까 싶었다. 

약간의 괴로웠던 것은 모르는 것들이 많아서 답답했던 것 같다...

하지만 너무 좋은 경험이었고 처음이어서 당연한 것이라고 생각한다.

 

마지막으로 더 나아진 나를 기대하며 아래엔 이번 주 핵심 학습내용을 적으며 글을 마친다.

 

 

---

 

 

*이번 프로젝트의 가장 핵심내용: JWT, API

JWT : 인증에 필요한 정보들을 암호화시킨 JSON토큰을 의미한다. 이번 프로젝트에서 로그인/회원가입 페이지를 맡았기때문에 나에겐 가장 핵심적인 것이었다.

서버가 클라이언트 인증을 확인하는 방식은 대표적으로 쿠키, 세션, 토큰 3가지 방식이 있는데

그 증 JWT는 쿠키방식으로 확인하는 방법을 이용한다.

 

JWT를 이용한 인증 과정은 이러하다.

 

1.ID: APPLE PW: 1234로그인합니다.

- 사용자가 ID, PW를 입력하여 서버에 로그인 인증을 요청한다.

 

2.ID: JWT, 엑세스 토큰, 리프래시 토큰 발급

-서버에서 클라이언트로부터 인증 요청을 받으면, Header, Payload, Signature를 정의한다.

 Header, Payload, Signature를 각각 Base64로 한 번 더 암호화하여 JWT를 생성하고 이를 쿠키에 담아 클라이언트에게 발급한다.

 

3.액세스토큰을 사용하여 API 요청

-클라이언트는 서버로부터 받은 JWT를 로컬 스토리지에 저장한다. (쿠키나 다른 곳에 저장할 수도 있음)

 API를 서버에 요청할때  Authorization Header에 Access Token을 담아서 보낸다.

 

4.액세스토큰에 문제가 없으면 정보 응답.

-서버가 할 일은 클라이언트가 Header에 담아서 보낸 JWT가 내 서버에서 발행한 토큰인지 일ㅇ치 여부를 확인하여 일치한다면 인증을 통과시켜주고 아니라면 통과시키지 않으면 된다.

 

5. 리프래시 토큰으로 액세스 토큰 재발급

-클라이언트가 서버에 요청을 했는데, 만일 액세스 토큰의 시간이 만료되면 클라이언트는 리프래시 토큰을 이용해서 서버로부터 새로운 액세스 토큰을 발급 받는다.

 

 

 

---

 

 

API : API는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.

 

이걸 식당으로 비유해주신 분이 있어서 참고하여 작성해보자..!

 

손님은 점원이 가져다준 메뉴판을 보면서 음식을 고르면, 점원이 주문을 받아 요리사에 요청을 한다.

그러면 요리사는 음식을 만들어 점원에게 주고,

손님은 점원이 가져다준 맛있는 음식을 먹을 수 있다.

 

말하자면 점원이 중간 다리역할을 하는데 이 다리역할을 하는 것을 API라고 볼 수 있다.

 

API는 프로그램이 명령할 수 있게 명령 목록을 정리하고, 명령을 받으면

응용프로그램과 상호작용하여 요청된 명령에 대한 값을 전달한다.

쉽게 말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있다..!