[WIL] 개발일지: 항해99 1주차

3일은 3달 같았고, 일주일은 하룻밤 같았던 항해99의 첫 주가 지나갔다.

 

항해를 시작하기 전 보내주신 항해99 웰컴 키트!!

 

[항해99 1기 웰컴 키트]

 

"배는 항구에 정박해 있을 때가 가장 안전하다. 하지만 그것은 배가 만들어진 이유는 아니다." -파울로 코엘료 <순례자>

 

항해99라는 브랜드 아이덴티티를 잘 대변하면서도, 직장을 그만두고 새로운 도전을 하는 나에게 있어 큰 힘이 되고 와 닿는 글귀였다. 귀여운 굿즈도 마음에 들었지만, 무엇보다 대표님이 적어주신 글이 좋았다. 코딩만 잘하는 사람이 아닌 '좋은 개발자'를 양성하고자 하는 항해99의 진정성이 느껴지고, 이것이 내가 수 많은 부트캠프 중 항해99를 선택한 이유이기도 하다.

 

 

<3/1 항해99 1기 오리엔테이션>

항해99 프로그램은 요즘 가상 오피스로 많이 사용되고 있는 온라인 플랫폼인 Gather.town을 통해 이루어진다. 이 서비스는 나도 처음 이용해 보는데 너무 신기하고 귀엽다 !!ㅠㅠ 자신의 아바타를 설정하고 실제처럼 만들어진 가상의 공간을 통해 사람들을 만나고 자유롭게 소통할 수 있다. 항해99 답게 우리 프로그램의 공간은 선박 모양이다. 넘나 찰떡..ㅎㅎ 대규모 강연장을 이용할 때는 100명이 모이는데 과부하가 일어나지 않을까 했는데 그렇지 않았고, 진짜 사람들이랑 모여있는 느낌이라 생각보다 집중도 잘되고 강연을 듣는 동안 사람들이 쓰는 이모지나 댓글을 보는 재미도 쏠쏠했다. 누구하나 같이 앉자는 말도 안했는데 첫번째 프로젝트 조인 26조 팀원들과 나란히 나란히 앉았다. ㅎㅎㅎㅎ

 

[Gather.town 항해99 선박장]

[Gather.town 항해99 1기 OT]

항해99에 대한 소개, 커리큘럼, 첫번째 프로젝트에 대한 설명으로 OT 가 마무리 되었고, OT가 끝나기 무섭게 첫번째 프로젝트가 시작되었다.

 

---

<3/1 - 3/5 : Chapter 1 웹개발 미니 프로젝트>

 

1. 3/1 (월) : 프로젝트 주제 정하고 와이어프레임 구축하기

   - S.A(Starting Assignment) 작성

항해99 Chapter1 웹개발 미니 프로젝트_S.A_26조

 

2. 3/2 - 3/4 (화-목) : 프로젝트 만들기

   - 3/2 그룹 피드백 (25-26조)

   - 3/4 자정까지 프로젝트 제출

항해99 Chapter1 웹개발 미니 프로젝트_편의점 맥주 털기!!_26조

3. 3/5 (금) 프로젝트 전시회

   - 전시회는 엑스포 형식으로 진행 (각 팀마다 부스가 주어지고, 정해진 시간동안 팀원들은 한명씩 돌아가며 전시장을 지키며 설명하고, 그 외 시간은 전시장을 돌아다니며 다른 팀들의 결과물을 보고 질문하는 형식)

 

---

<첫번째 프로젝트를 통해 배운 것>

 

1. 로그인/회원가입 페이지 만들기

***** Session/Cookie 방식과 토큰 기반 인증 방식(JWT)의 차이를 이해하고 JWT 방식으로 로그인/회원가입 페이지 만들어보기.

 

계정정보를 요청 헤더에 넣는 식의 로그인 방식은 보안에 매우 취약할 뿐 아니라 서버에서 신호가 올 때마다 ID/PW를 통해 유저가 맞는지를 인증해야 하기 때문에 매우 비효율 적이다. 그렇기 때문에 일반적으로 사용하는 방식이 Session/Cookie 방식과 토큰 기반 인증 방식(JWT)이다.

 

Session/Cookie 방식

사용자가 로그인을 하면 사용자의 고유한 ID값을 받아 세션 저장소에 저장한 후 세션 ID를 발행한다. 사용자는 서버에서 해당 세션 ID를 부여 받아 쿠키에 저장한 후 인증이 필요할 때마다 요청 쿠키를 헤더에 실어보내고 서버는 그 쿠키로 사용자를 인증한 후 데이터를 제공한다.

 

>> 장점

1. 사용자 계정정보가 아닌 쿠키를 매개로 인증을 거치기 때문에 보안성이 높다.

2. 서버는 쿠키의 값을 받았을 때 일일이 회원정보를 확인하지 않고 어떤 회원인지 알 수 있기 때문에 서버 접근성이 높다.

 

>> 단점

1.  쿠키를 탈취당하더라도 사용자의 계정정보는 알 수 없어 안전할 수 있지만, 해커가 HTTP 요청을 가로챘다면 그 안의 쿠키도 가로챌 수 있다. 이 단점을 보안하기 위해서 HTTP의 요청 자체를 탈취해도 그 안의 정보를 읽게 힘들게 하고, 세션에 유효시간을 준다.

2. 서버에서 세션을 저장하는 저장소가 필요하기 때문에 추가적인 저장 공간이 필요할 경우 부하도 높아진다.

 

 

토큰 기반 인증 방식(JWT)

JWT(Jason Web Token)는 인증에 필요한 정보들을 암호화 시킨 토큰으로 위 세션/쿠키 방식과 유사하게 Access Token(JWT 토큰)을 HTTP 헤더에 실어 서버로 보낸다. 토큰을 만들기 위해서는 크게 3가지(Header, Payload, Verify Signature)를 인코딩해서 만들게되고 Header, Payload 는 누구나 디코딩해서 확인할 수 있다. (Verify Signature은 SECRET KEY를 모르면 알 수 없다.) ----자세한 내용은 아래 링크 참고----

세션/쿠키 방식과 가장 큰 차이점은 세션 쿠키는 세션 저장소에 사용자 정보를 넣는 반면 JWT는 토큰 안에 사용자 정보를 넣기 때문에 별도의저장소가 필요 없다.

 

>> 장점

1. Stateless 하다. 세션을 저장할 별도의 저장소가 필요 없기 때문에 서버를 확장하거나 유지, 보수하는데 유리하다.

2. 확장성이 뛰어나다. 토큰을 기반으로 하는 다른 인증 시스템에 접근이 가능하다.  (ex. Facebook 로그인, Google 로그인 등은 모두 토큰을 기반으로한 시스템이다.)

 

>> 단점

1. 이미 발급된 JWT는 돌이킬 수 없다. 만일 세션/쿠키 방식에서 쿠키가 악의적으로 사용된다면 해당 세션을 지워버리면 되지만 JWT는 유효기간이 만료될 때까지 계속 사용가능하다. 이를 해결하기 위해 Access  Token의 유효기간을 짧게하고 Refresh Token이라는 새로운 토큰을 발급한다.

2. Payload 정보가 제한적이다. Payload는 따로 암호화 되지 않으므로 디코딩하면 누구나 알 수 있기 때문에 사용자의 중요한 정보들은 넣을 수 없다.

3. JWT의 길이가 길다. 따라서 인증이 필요한 요청이 많아지면 서버의 자원 낭비가 발생한다.

 

[참고사이트]

쉽게 알아보는 서버 인증 1편(세션/쿠키 , JWT)

 

>> JWT 방식 로그인/회원가입 페이지를 만들 때는 스파르타코딩클럽 웹개발 플러스 4주차 강의를 참고 했다. 항상 밝은 얼굴로 강의해주시는 어니부기 튜터님 감사합니다 !!

 

 

 

2. 프론트엔드

 

첫번째 프로젝트라 누가 무엇을 하고 싶은지 몰라 골고루 분배해 진행했지만 결과적으로 프론트엔드 단을 많이 만지게 되었다.

 

Bootstrap과 Bulma

팀원이 전체적으로 짜놓은 HTTP 뼈대에 Bootstrap과 Bulma를 이용해 디자인을 입혀보았다. Bootstrap는 jQUERY을 써서 웹사이트에서의 상호작용을 쉽게 가져다 쓸 수 있지만 수정에 어려움이 있었다. 하지만 Bulma는 순수한 CSS 프레임워크로 내가 원하는 디자인을 구현하기에는 훨씬 용이했다. +_+!!!!

https://bulma.io/documentation/

Jinja2 템플릿 서버사이드

서버사이드 렌더링은 초기에 보여지는 화면을 따로 서버에서 받아오기 때문에 초기 로딩 속도가 빠르다.

 

 

3. 도메인 연결

AWS EC2 와 gabia에서 내 서버와 도메인을 구입하고 연결해보았다.

 

---

실제로 웹사이트를 만들고 배포하는 것까지 전체적인 사이클을 한주만에 돌아본 경험은 소중했다. 코드를 짤 땐 나의 부족함에 좌절하고 나무를 보는 단계였다면 배포하는 경험을 통해 작게나마 숲을 본 느낌이었다. 더 많이 공부해야겠다고 느끼고 함께하는 팀원의 소중함을 느낀 첫 번째 프로젝트였다.

 

---

<3/5 - 3/12  : Chapter 2-1 자료구조, 알고리즘>

 

Chapter 2는 BAEKJOON ONLINE JUDGE 사이트에 올라 오는 프로그래밍 문제들을 풀어보는 기간이다. 자료구조와 알고리즘을 생각하는 것도 어렵지만 아이디어가 떠올라도 Python 언어로 표현하는데서 어려움이 크다. 다행히 블로그에 친절하게 풀이를 써놓은 분들이 많아 그것들을 보며 새로운 언어들을 익혀가고 있다. 무엇보다 내가 푼 문제를 팀원들에게 설명하거나 문제 풀이 방식을 공유하며 배우는 점들이 많다.

 

---

둘째 주도 화이팅 !!!!!!!!!