[SW 정글] WEEK00 개발일지

* 앞으로  매주 일요일마다 TIL(Today I Learned), 개발일지(+일기)를 적도록 하겠다.

 

 오늘은 일요일. 정글에서의 첫주가 끝났다. 입소하고 적응하느라 매우 정신없이 바쁘게 한 주가 흘렀고, 오늘은 바쁘게 보낸 한 주를 기념하며 MS님, HJ님과 대전 투어를 했다. 우리 모임의 본 목적은 독서모임이었으므로 대전 시내의 교보문고에 들러 읽을 책을 골랐다. 선정된 책은 올더스 헉슬리의 멋진 신세계. 줄거리가 흥미로워 골랐다. 그러고 시내의 식당에서 대창덮밥(꿀맛)을 먹고 카이스트 본캠까지 걸어가 벚꽃구경, 호수구경, 중앙도서관 구경을 했다. 중앙도서관은 너무 따뜻해서 잠이 솔솔 왔고, 덕분에 의도치않게 셋 모두 에너지를 충전하고 다시 나왔다. 그러고 충남대와 카이스트 사이의 번화가까지 걸어가 수제버거를 먹고 다시 본캠까지 걸어와 셔틀을 타고 문지캠퍼스로 돌아왔다. 정말 알찬 나들이였다.(날씨도 너무 좋았음)

 

 이렇게 아주 잘 휴식을 취했는데, 이번 주는 어떻게 보냈는가 하면 크게 두 가지를 했다.

1. 미니 프로젝트
2. 알고리즘 입문

 두 가지를 했지만, 정글의 한 주 시작과 끝이 목요일이기 때문에 이번 포스트에는 Week00인 미니프로젝트까지만 기록하고 알고리즘 입문에 대한 기록은 Week01으로 넘기도록 하겠다.

미니 프로젝트

 입소한 날(월요일), OT 후 우리에게 바로 3박4일짜리 미니 프로젝트가 주어졌다. 미니플젝의 목적은 짧은 시간동안 팀워크를 경험해보는 것이었으며, 입학시험 때의 공부내용(웹 페이지 구현 및 배포)을 토대로 자유롭게 주제를 선정해 웹페이지를 구현하는 것이었다.

 

 나와 SG님, JH님 세 명이 한 조가 되어 먼저 미니플젝의 필수 포함 사항과 advanced 요구조건을 확인해보았다.

 

• 필수
  • 로그인 기능이 포함될 것
  •  Jinja2 템플릿 엔진을 이용한 서버사이드 렌더링을 구현할 것
• 더 고민해볼 키워드(Advanced)
  • Bootstrap을 대체할 CSS 라이브러리 사용하기 (Bulma 등)
  • JWT 인증 방식으로 로그인을 구현하기 (쿠키/세션 대비 등장하게 된 배경은?)
  • (코치님이 추가로 언급하신 것) 회원 비밀번호 암호화하기

 위의 조건들 중 먼저 필수 조건에서 요구하는 내용이 무엇인지 서로 이해한 후에 프로젝트 주제를 짰다. 후보로 나왔던 대표적인 주제는 '특정 그룹의 MBTI 궁합을 확인해주는 웹페이지 구현'과 '회원이 원하는 운동을 모집하고 신청할 수 있는 웹페이지 구현' 중 로그인 기능이 좀 더 명확하게 필요한 후자를 선택하게 됐다.(웹페이지 명은 '헬스킹')

 

 바로 다음날(화요일) 오전에 정코치님의 피드백 시간이 있어서 아래 자료를 활용해 아이디어를 발표했으며, 시간이 부족해 구현하지 못한 랭킹 부분을 제외하고 거의 그대로 개발되었다.

 코치님은 이 주제에 해해 3일 안에 충분히 구현할 수 있을만한 무난한 주제라고 피드백해주셨고 우리는 수정 없이 그대로 진행했다.

초기 아이디어 발표자료

jungle

Git과 Git-Hub

 효율적인 코드관리와 협업을 위해 먼저 프로젝트 레포지토리를 만들고 SG님을 통해 협업 시 branch 관리 방법론 및 branch 생성, merge, 삭제 방법, merge 시 conflict가 발생하지 않기 위해 주의해야 할 사항 등을 배웠다.

Branch 관리 방법을 참고한 글

[GitHub] Git 브랜치의 종류 및 사용법 (5가지) - Heee's Development Blog

git을 사용해 협업을 하며 내가 새로 배웠던 것은 아래와 같았다.

 

1. main 브랜치에는 개발과 테스트가 완료된 완본만 merge한다.
2. 모든 개발은 main 브랜치에서 파생된 dev 브랜치에서 이루어진다.
3. 개개인이 코드를 수정할 땐 각자가 맡은 영역에 맞는 이름으로 dev 브랜치로부터 새로운 브랜치를 만들고 그곳에서 작업한다.
4. 자신이 작업한 브랜치의 작업이 완료되면 --no-ff 옵션을 주고 dev 브랜치에 merge하도록 하며, merge한 브랜치는 삭제한다.
5. merge 시 되도록이면 confilct를 방지하기 위해 서로가 같은 파일을 작업하는 일이 없도록 한다.(이 때문에 구현하는 기능에 따라 파일을 구분해 만들고(이것도 OOP인가?), 업무 분담을 명확하게 잘 해야 한다.)

업무 분담과 구현

 나는 회원가입 페이지 구현과 비밀번호 암호화를, JH님이 메인페이지 구현을, 그리고 SG님이 로그인 페이지 구현과 JWT을 사용한 로그인 기능 구현, 프로젝트 레포지토리의 디렉토리 및 템플릿 구성을 맡았다. 구현 과정에서 front와 back-end 역할을 따로 나누지 않고 각자가 맡은 기능에 맞게 스스로 front와 back-end를 구현했다.

비밀번호 암호화

 회원의 비밀번호를 DB에서 확인할 수 없도록 암호화 작업을 했다. 암호화 시에는 salting(비밀번호에 임의 문자열 추가)과 key stretching(해싱 반복)을 사용하는 단방향 암호해시 함수인 BCrypt를 사용했다.

 좀 더 자세한 내용(간단한 암호학 용어 및 python bcrypt 라이브러리 사용법)은 링크에 정리했다.

 

비밀번호 암호화가 잘 된 모습. 실제론 'salmon'회원과 'bear'회원의 비밀번호가 같지만 BCrypt의 salting으로 인해 인코딩된 결과가 다른 것을 확인할 수 있다.

JWT(JSON Web Token)

Json 형식을 서버에서 인코딩해 토큰을 만들어 클라이언트에 넘겨주면, 사용자 인증 시 해당 토큰을 활용할 수 있는 기술

 

절차

1. (클라이언트) 회원이 로그인 하면, 입력한 아이디와 비밀번호를 서버로 보낸다.(POST)
2. (서버) 아이디와 비밀번호가 유효하면, (1) 회원의 아이디(id), (2) 토큰 만료 시간(exp), (3) 토큰 이름(sub)을 'payload'라는 변수에 json형식(dictionary)으로 담는다.
3. (서버) payload, secret_key(임의의 정해진 비밀번호), algorithm(해시 함수 종류인듯?)을 가지고 토큰을 생성한다.(파이썬 기준 jwt.encode(payload, secret_key, algorithm='HS256'))
4. (클라이언트) POST에 대한 요청으로 토큰이 성공적으로 돌아오면 이를 클라이언트의 특정 공간(쿠키 or 로컬 스토리지 등)에 저장한다.
5. (클라이언트) 토큰이 필요할 때마다(Request 보내기 or 페이지상 상호작용 및 표시) 저장소에서 토큰을 꺼내 사용한다.
   • 활용 1(페이지 상호작용 및 표시) : 토큰의 유무(로그인 여부)를 바탕으로 로그인했을 때에만 상호작용이 가능하도록 한다.
     • 예시 : 로그인한 사람에게만 특정 컨텐츠, 버튼이 보이도록 만들거나 상호작용이 가능하도록 만들기
     • 토큰의 유무만 확인하기 때문에 유효한 토큰인지는 확인하지 않는다.
   • 활용 2(Request 보내기) : request를 보내는 경우 header에 토큰을 담아 서버에 보낸다. 서버는 받은 토큰을 디코딩해 해당 토큰이 유효한지(만료된 것인지, 아니면 없는 아이디로 만든 것인지 등) 확인한 후 유효한 토큰을 통해 온 request에 대해서만 response를 보낸다.

JWT 특징(내 생각)

 클라이언트에서는 토큰을 봐도 해석할 수 없으며, 인위적으로 토큰을 만들 수도 없다.(인코딩, 디코딩하는 데 필요한 Sectret key가 서버에 저장되어 있기 때문) 따라서 토큰을 탈취하지 않는 이상 악의적으로 토큰을 생성해 request를 서버에 보낼 수 없다.

 * 우리는 JWT를 구현할 때 토큰을 로컬 스토리지에 저장했다.

 

아쉬웠던 점

• 모달 창에 대해 좀 더 자세히 이해하지 못한 것
• 프론트엔드를 개선하고 싶었는데, 손을 거의 대지 못한 것(기초가 너무 부족하다고 느낌)
• 내가 맡았던 회원가입 페이지 구현과 비밀번호 암호화가 예상보다 쉬워 빨리 끝났던 점

프로젝트 디렉토리 구성

 

개발 레포지토리

GitHub - GrilledSalmon/health-king: 정글 4기 0주차 미니 플젝 레포

구현 페이지(서버 종료 시 접속 불가할 수 있음)

 

 

미니 프로젝트가 끝나고

 첫 주여서 체력적으로 힘든 부분이 있었지만 같은 조원들 덕분에 프로젝트를 잘 끝낼 수 있었다. 이번 플젝의 가장 큰 수확은 git과 git-hub을 활용해 협업해본 게 아닐까 싶다. 앞으로 계속 필요한 부분일테니 말이다.

 비록 한 주밖에 지나지 않았지만, 짧은 시간동안 생각했던 것보다 정글의 운영진(장병규 의장님, 이범규 대표님, 류석영 교수님, 정주원 코치님)님들이 우리에게 많은 관심과 애정을 쏟고 있다는 느낌을 받았다. 전 기수의 누구 이름을 말하면 그게 누구였는지 기억하시는 걸 보고 놀랐었다. 그리고 생각보다 운영진님들을 이렇게 자주 볼지 몰랐다.(첫주만 그렇다곤 하지만) 프로젝트가 끝난 뒤 A반 동기들과 이범규 대표님, 정주원 코치님과 함께했던 술자리에서 그분들이 정글에 참여하게 된 이유를 들으면서, 정글이 생각보다 참 인간적인 과정이라는 걸 느꼈다.

 정글에 참여해 어느때보다 몰입하기 좋은 환경에서 공부할 수 있게 된 지금의 상황에 감사하며, 앞으로 즐겁게 공부하자. 화이팅~~