개발자가 되기 위해 시작한 항해99 프로젝트 첫주를 마치며, 일주일이라는 시간동안에대해 정리하는 회고의 시간을 가져보고자한다.
1주차 미니프로젝트
-
프로젝트 S.A(Starting Assignment)
https://velog.io/@guswls1419/Chapter1
설레임 반, 긴장감 반 을 가지고 항해99 부트캠프가 시작 되었다.
OT가 진행되었는데 스파르타라는 이름과같이 첫시작부터 미니프로젝트-홈페이지 만들기라는 과제가 주어졌다.
항해99부트캠프는 모든과정이 팀플레이로 이루어지기 때문에, OT를 듣고 배정된 조로 가서 팀원분들과 인사를 나누고, 어떤 주제로 미니프로젝트를 진행하면 좋을지에 대해 대화를 나누었고,우리조는 이번 항해99를 진행하는동안 일정을 확인할수있고, to-do리스트 및 공부한 내용을 기입할수있는 일종의 다이어리개념의 홈페이지를 만들기로 하였다. 각자 역할을 분업했는데, 우리조는 프론트,백 으로 나누지않고, 페이지별로 역할을 분담하였다.
내가 맡은 페이지는 메인페이지인 달력을 구현하는 페이지였는데 가장 기능이 많이 담겨있어 다른팀원1명과 같이 2명에서 맡기로 하였다. 달력 페이지를 구현하기 하기 위해서는
- 달력 구현하기
- 기록한일정 일자별로 달력에 보여주기 위한 서버구축 및 DB생성
- 일정 및 to-do 리스트를 기록할수있는 from 제작 및 서버구축
이렇게 3가지로 요약할수있겠다.
시작하자마자 난관에 봉착했다. 달.력.구.현......
팀원들과 프로젝트 아이디어 회의를할때 나왔던 달력은 달력에서 일자를 클릭하면 우측화면에 to-do리스트와 일정을 작성할수있는 창이 뜨고, 입력하면, 달력부분에 일정이 붙어버리는 형식으로 회의를 하였는데, 인터넷에 배포되어있는 무료 라이브러리 달력들은 일정을 입력하는 방식이아닌, 드래그해서 가져오는 방식의 것들이 대다수였고, 일부 라이브러리들은 연동조차 되지않았다.
그리고 무엇보다 큰 문제점은 이런 라이브러리들은 html이 아닌 javascript 또는 react 언어들로 되어있었는데 이제막 코딩 기어가기를 시작한 내수준에선 너무나도 어려운 일이었다.
하지만 뭔가 이걸 해내면 엄청난 성취감이 있을것 같아 끝까지 포기하지않았다. 계속해서 구글링을 하며 시도한끝에 달력 라이브러리에 드래그하는형식이 아닌, 일정을 붙이는 단계까진 구현을 해냈다. 여기까지 구현해 내는데 하루를 통으로 썻다.
결단이 필요했다. 왜냐면 우리에게 주어진 시간인 4일밖에 없고 이렇게 가다간 제시간에 제출을 할수 없을것 같았기 때문이다. 그래서 나는 새벽 늦은시간에 마침 들어와 계시는 기술매니저님께 찾아가 조언을 구하였고, html로 뼈대를 만들어 기능을 구현하는방식으로 바꾸어 진행하기로 하였다.
html로 뼈대를 만들고 css를 이용하여 달력모양을 구현해 내는데 성공하였고, to-do리스트 및 일정 입력 페이지는 달력에서 일자를 클릭했을때 새로운 페이지로 이동하는 방식으로 진행하기로 하였다.
여기서 두번째 난관에 봉착하였다. 일자를 클릭할때 해당 일자정보를 어떻게 새로운 페이지로 전달하지???
산넘어 산이었다. 구글링으로 '페이지이동시 값 전달하는법' 에 대해 엄청 찾아보았고 끝내 방법을 찾았다.
로그인구현할때 파라미터로 다음페이지에 이름넘기는 방식을 응용하여 사용해보기로 하였다.
파라미터로 전달하기 - 순서는 아래와 같다.
<1> html input태그에 value 속성값에 일자별 데이터를 지정한다. ex) value = 3월13일
<2> 달력에서 일자를 누른다.
<3> 해당하는 일자를 누르면 input태그에 연결된 백엔드 요청 함수 실행
<4> 백엔드에서 다음 페이지 렌더링해줌
여기서 중요한 함수는
window.location.href 와 window.location.search 이다.
파일은 총 세개 필요하다.
calender.html
to-do_list.html
app.py
# calender - html파일
$(document).on('click','.unstyled-button', function () {
let num = $(this).attr("value")
window.location.href = "/calender_toodo?calender=" + num;
});
# to-do_list - html파일
let getday = window.location.search;
let getdays = getday.split('=');
let getOnlyday = getdays[1];
let decodeday = decodeURI(getOnlyday)
# app - 파이썬파일
@app.route('/calendar')
def render_calendar():
return render_template('calender.html')
@app.route('/calender_toodo')
def render_calender_toodo():
return render_template('todo_list.html')이렇게 코드를 작성하여 달력 => to-do리스트로 페이지이동을 무사히 구현해 내었고, 이후 서버작업 및 ajax 작업 등 별 탈 없이 진행하여 달력 & to-do 리스트 작성 하는페이지 구현이 완료되었다.
막상 완성된 코드를 보면 엄청난 코드도 아닌데, 2일동안 헤매다 완성한 페이지라그런지 엄청 뿌듯하고 뭔가 대단한일을 해낸것같은 기분이 들었다.
약간의 시간적 여유가 생겨 로그인기능을 맡아서 하던 팀원의 작업을 도와주게 되었는데, 이때 jwt,Token,cookie등 처음 보는 단어들을 많이 접하게 되었다.
간략하게 정리해 보자면 아래와 같다.
- 세션 : 세션은 서버에서 가지고 있는 정보
- 쿠키 : 사용자에게 발급된 세션을 열기 위한 열쇠(SESSION ID)
- JWT : JSON Web Token의 줄임말로, JSON 객체를 사용해 정보를 안정성 있게 전달하는 웹표준
인증에 필요한 정보들을 암호화시킨 토큰을 뜻한다.
jwt 확장성이 뛰어나다. 토큰 기반으로 하는 다른 인증 시스템에 접근이 가능하다.- 세션/쿠키와 jwt 의 차이점 :
세션/쿠키는 세션 저장소에 유저의 정보를 넣는 반면, JWT는 토큰 안에 유저의 정보들이 넣는다.
세션/쿠키는 별도의 저장소의 관리가 필요함. 그러나 JWT는 발급한 후 검증만 하면 되기 때문에 추가 저장소가 필요 없다.- API : 서버와 데이터베이스에 대한 출입구 역할을 하고, 애플리케이션과 기기가 원활하게 통신할 수 있도록 하며 모든 접속을 표준화 한다. => 간소화되고 빠른 프로세스 처리를 가능하게 한다.
처음 접해보는 로그인. 이것 또한 만만치않았다. 아직 로그인 기능에대한 이해가 부족하고, 혼자서는 구현이 힘든 단계이다.
로그인은 수없이 많이 접할것으로 예상되기에, 앞으로 로그인기능에 대해 좀더 자세히 공부해보고자 한다.
1주 동안의 회고
부트캠프 본과정에 참여하기전, 사전강의듣는 기간이 있었고, 항해99 사전 스터디조에 들어가 토이프로젝트를 진행하면서, 간단하게 한번 만들어 봤기때문에 엄청나게 어려운 느낌으로 다가오진않았다. 충분히 해낼수 있을것만 같았다.
하지만 역시 생각대로 되지않았다. 토이프로젝트로 한번 진행을 해봤어도, 아직은 익숙치않은탓인지 조원들 모두가 투박하게 진행하며 구현이 안되는것도 겪고 허탈함에 빠지기도하였다. 하지만 이런 과정을 겪으면서도 포기하지않고 끝까지 구글링하고, 강의영상참고해가며 열심히한결과, 비록 우리가 처음에 회의했을때의 모습은 아니지만 비슷한모습의 완성된 페이지를 구현하고 나니 조원들과함께 4일이란 시간동안 함께 성장해나갔구나 하는 생각이 들었고 너무나도 뿌듯하였다.
아직은 많이 부족하지만 열심히 공부해서 실무에 투입되어 실제 런칭되는 사이트를 제작해보고싶고, 내가 원하는 서비스를 구현해보고싶다.
