1일차
9 to 9 의 압박이 아직은 실감나지 않았던 첫 날.
토이프로젝트를 새벽까지 하고 슬랙에 소개하진 않았지만, 어쨌거나 제대로 구동을 시키고 나서 바로 1주차 풀스택 미니프로젝트가 시작 되었다.
조원은 바뀌었고, 새로운 아이디어가 필요했고, 기간은 토이때보다 말도 안되게 짧았다. 단 4일만에 웹사이트 하나를 만들어서 론칭을 해야하다니;;
왕초보용 강의 두번 들었던게 다였는데, 새롭게 들을 수 있는 강의가 열렸고 강의를 다 들으면서 사이트를 만들기엔 시간이 턱없이 부족했다.
그래도 어쩌겠나.
만들라면 만들어야지.
컨셉은 생각보다 쉽게 나왔다. 얼마전 휩쓸고 지나갔던 태풍으로 밤새 실시간 중계를 하던 방송사들이 떠올랐다.
그중에 지역의 CCTV영상을 다 모아서 한 화면에 띄워두고 중계하던 모습이 인상적이었는데, 그럼에도 일기예보로는 모든 곳의 정보를 알기는 어려웠다.
방송사마다 실시간으로 제보를 받고 있었는데, 우리팀도 여기에 착안해서 실시간으로 날씨를 공유하는 플랫폼을 만들기로 했다.
거기에 매일매일 날씨를 체크해야했던 그림일기를 떠올려서 그림일기처럼 생긴 포스팅 페이지가 있으면 좋겠다고 생각했고.
API의 설계와 필요한 기능에 대한 설계가 필요했는데... API의 구조조차 아직 머리에 명확하지 않았다.
토이때는 API의 설계 없이 페이지를 만들었고, 각자 페이지를 만들었기 때문에 단일한 페이지에 필요한 기능은 글을 쓰고, 지우는 기능 정도 였던거 같다. 유저가 쓴 기록들은 한 페이지에 띄워지는 형태로 강의에서 배운대로 했던거 같고.. CRUD로만 이루어진 단순한 페이지.
이번에는 같은 CRUD여도 메인페이지가 있고, 포스팅 페이지가 있고, 내가 쓴 글만 모아볼 수 있어야 하고 지역별로 모아서 볼 수 있어야 하기 때문에 API설계는 필연적이었다.
일단은 대충써놔야 했던 첫 날... 그나마도 다행인 것은, 팀원들이 좋았다.
그렇지만.. 하필 내가 포스팅 페이지를 맡게 되면서 머릿속이 하얗게 되었더랬다...
젤 먼저 필요한건 각 페이지의 모양이라고 생각해서 부트스트랩으로 포스팅 페이지 디자인을 잡아뒀는데, 벌마라고 하는 새로운 프레임워크를 알게 되어서 그걸로 다시 디자인을 짰다. 부트스트랩보다 예뻤기 때문이다.
그리고 조원분이 맡았던 로그인 페이지가 도착했다...
아직 나는 틀밖에 못만들었는데 벌써 로그인 회원가입이 다 되는 페이지라니 ㅠㅠㅠ
코드도 너무 생소했는데, 나는 아무리 해도 로그인이 되질 않았다.
내 컴에 문제가 있나.. 내가 또 뭘 잘못했나...
대체 왜...?
2일차
이 날 html 형태는 갖췄다. 기능연결만 하면 되도록.
내가 작성한 포스팅 페이지에서는 연결이 되게 만들어서 넘겨야 했는데...
날씨정보, 시간정보, 지역정보, 글포스팅, 사진까지 모두 받아서 서버로 넘겨야 돼서 핵심적인 페이지 였던 것이다.
포스팅이 완료되어야 데이터베이스에 들어간 자료를 가지고 와서 메인페이지도 마이페이지도 구성을 할 수가 있는데 ...
속이 타들어갔다 ... ㅋㅋㅋㅋ
내가 빌런이구나.. 이걸 어쩐다 ..
이후로 내내 "난 왜 안되지?" 와 홀로 싸우게 된다.
얼른 넘겨야 하니까 2일차 밤에 조금 무리해서라도 HTML을 줘서 그걸로라도 각자 연결을 해보라고 던져야겠다 생각했던 것이다.
왕초보를 위한 웹종반 수업에는 그런 내용이 없었고, 새롭게 받은 웹개발 플러스 강의에 나름 뭔가 들어있었는데, 응용을 하려니 눈에 하나도 안들어왔다.
다른팀을 보니 애초에 데이터베이스 연결하는 걸로 몇시간씩 애먹고 있었더랬다.
그래서 난 과감하게 기존에 쓰던 방식으로 데이터베이스를 연결하기로 하고, 강의는 사전 펼치듯 부분부분 꺼내보았는데 팀원들이 줬던 코드가 한개도 구동되지 않아서 애먹었다.
깃허브 사용법도 나만 서툴러서 코드를 주고 받는게 이게 맞는건가 .. 깃수업까지 들을 여력은 없었다..
로그인 문제는 해결했다. 토큰쪽에 문제가 있었던거 같다.
JWT 토큰은 기존 쿠키 세션처럼 데이터베이스에 개인정보가 저장되어 있어서 꺼내 쓰는 방식이 아니라 토큰이 서버에 달려서 그냥 따라다니는건데 이것부터가 장벽으로...
.decode(utf-8)을 붙이는 방식으로 해결했는데, 나중에 팀원분이 수정된 코드를 전해줘서 그뒤로는 그걸 붙이지 않고 구동이 되었다.
아주 한참뒤에 말이다...
3일차
드디어 조금씩 실마리가 풀렸다. 내가 한건 아니었고, 팀원의 도움을 받았다.
내가 짠 코드로는 실행이 되지 않던 업로드 버튼이 된다는 것이다.
문제는 내컴에서는 여전히 안되고 있었다는 것...
어쨌거나 되는 사람의 코드를 모아서 깃허브로 공유를 하기로 했기 때문에 나는 그 다음으로 필요한 기능을 찾았다.
그림일기의 형태라서 사진을 등록하면 서버로 넘어가지 않아도 웹페이지 상에 떠야하는데... 이건 강의에도 없는 내용이었다.
그렇지만 컨셉상 꼭 필요한 기능인데...
구글링을 해보니 자바스크립트로 작성하는 부분이 있어서 한번 해보았더니 간헐적으로 사진이 떴다가 안떴다가 했다..
그래도 일단은 되는거네 .. 그다음.
이제 업로드가 되니까 다른 페이지들의 진행도 빨라졌다.
메인페이지 디자인을 어제 넘겼기 때문에 제대로 뜨는것을 확인 했는데 지역을 선택하게 하는데서 난관에 부딪혔다.
원래는 서울시 API를 받아 띄우고자 하였으나, 띄워지기만 할뿐 선택되고 클릭되지 않아서 방법을 바꾸어야했다.
이부분도 역시 조원분이 해결했다. 일일이 쳐서 해결하기도 하고, 선택하기 버튼을 눌러서 실행한다고 조금 우회하는 방식으로 구동을 시켰다.
이제 모든 웹페이지들이 작동을 하고 있었다.
여전히 내 컴에서는 안되고 있었지만...
나는 코드 오류가 어디서 났는지 눈이 빠지게 읽기 바쁜 시간들을 보내고 있었다.
4일차
나는 야행성이지만 조원들은 바른생활중이라..
아침 일찍 업로드 작업까지 끝나 있는 완성페이지를 보게 되었다.
HTML 넘길때, 모바일 처리를 조금 해두었었는데 모바일로 보니 더 예뻤다.
포스팅을 하고 삭제하는 기능이 있었으면 좋겠다고 이야기를 하면서 내가 쓴글을 모아서 볼때 삭제하는 버튼이 뜨도록 수정을 하겠다고 했다.
나는 왜 나만 안될까에서 아직 벗어나지 못했다.
그나마 다행인것은 어제 기어이 오류를 잡고 페이지를 띄우는데 성공했는데, 사진을 띄우는 자바스크립트가 실행되지 않았다.
이건 꼭 됐으면 좋겠는데 ㅠㅠ
게다가 벌마로 작업하면서 몰랐던 것이, 강의에서는 부트스트랩이라서 부트스트랩용 라이브러리 코드를 줬었다. 벌마에서는 쓸수가 없는..
그것도 모르고 대체 왜 사진을 불러오기 하면 사진명이 옆에 안뜨는건지를 몰랐다. 발표전에는 해결이 필요했고, 구글로 찾고 찾다가 결국 벌마 사이트 하단에 친절하게 자바스크립트 처리할수 있는 코드가 있다는걸 찾게 되었다.
영어공부를 좀 빡세게 하던지 해야지... 공식문서를 쉽게 읽는것만으로도 코딩에 큰 도움이 될거 같다는 생각이 들었다. 영어는 평생 따라다니네 정말..
일단은 저녁에 회고 발표가 있었기 때문에 발표준비도 해야했다.
API를 구성한 것과 만들면서 힘들었던 점들을 정리해나가는데 여전히 머릿속에서 혼란스러웠다.
이 날 발표준비를 하면서 내 나름대로 GET과 POST 방식에 대해 정리해보게 되었다. 이대로 발표를 했다간 개망신이겠다 싶어서.. 코드를 다시 읽었다.
POST는 클라이언트가 서버에게 예고장을 날린다는 느낌이었다. 이런저런 정보를 데이터베이스에 넣을거야~ 라고 포스트 요청을 하면, 서버에서는 그럼 요런요런 정보가 필요해 라고 요구를 해오고 그 정보가 딱 들어맞으면 데이터베이스에 들어가는 형식 말이다.
GET은 클라이언트가 이런 정보가 필요하니 데이터베이스에서 좀 줘~ 라고 겟 요청하면 서버는 그대로 받아다가 클라이언트에게 줬다. 그 받은 정보를 어떻게 띄울것인지는 클라이언트쪽에서 해결해야할 문제였다.
서버는 요청하는대로 순순히 들어주는 느낌이 강하다. 상당히 친절한 조력자의 느낌..
이게 코딩의 왕초보로서 내가 이해한 POST와 GET 방식이었다.
그리고 최종제출을 하고 영상을 찍어서 유튜브에도 올리고 했는데,
발표 직전에 조원분이 자바스크립트를 수정해서 그림일기 형태가 완성되었고 바로 발표를 하게 되었다. ID값을 연결하지 않아서 오류가 났다고 하는데, 복붙만 한게 아니라 나름 적용을 했던건데 .. ㅠㅠ 흠...
발표를 5분간만 한다고 해서 보여주고 싶은 기능만 보여줬는데.. 쩝스.. 좀 더 길고 꼼꼼하게 자랑할걸 그랬다.
발표 이후에 이미지 파일만 허용한다는 처리와 모바일 처리 했던 부분이 제대로 실행되지 않는다는 오류를 발견하고 밤에 수정을 해서 넘겼다. 마지막 수정이었다. 그리고 나만 왜 안될까에서 완전히 벗어나게 되었다.
CSS파일만 따로 했는데, 모달 띄울때는 JS파일도 따로 필요했었다는걸 강의를 보고 알았다. 분명 강의를 봤었지만, 말 그대로 보기만 봤던거고 세밀한 부분은 스킵되었던 것이다. 후... 꼼꼼히 봤으면 마음 고생은 덜했을텐데. 시간이 없었으니깐 ㅠ
5일차
다시 새로운 조가 구성되었다. 지난 밤에 넘겼던 코드는 무사히 실행이 되고 있다.
알고리즘 공부가 시작 되었다.
예전에 코딩테스트 사이트에 접속해서 문제를 풀어보려고 했는데.. 그게 고급문제였다니... 불나방처럼 뛰어들었던것이구나...
첫문제는 난이도가 하중에서도 하라는데 대체 왜 ㅠㅠ
일단은 이것도 강의를 듣지 않고서는 대체 무슨말인지 알수가 없어서 제공된 자바스크립트 강의를 거의 다 들었다.
하루종일.
그날은 과제도 있었는데, 사실 그 과제와 강의는 이어지는 내용이 아니었기 때문에 저녁전 시간까지 강의를 듣고, 저녁이후에는 과제를 했다.
나만의 언어로 정리하기에는 여전히 무리가 있었다.
GET POST를 이해했던것처럼 또 대충 덩어리만 지어놓은 느낌이다.
계속 공부해 나가야겠지.
WIL도 ... 점점 코드로 요약되는 날이 있길...
과제를 다끝내고, 다시 문제풀이에 도전해봤지만, 실패...
뭐가 문제일까 싶어서 프로그래머스에서 무료로 제공하는 강의를 듣기 시작했다. 순서대로 가다가는 패가망신하겠다 싶어서 강의를 듣는 도중에 이거다 싶으면 멈추고 다음문제를 풀었더니 풀렸다...!
일단은 이렇게 가보자. 완전히 이해할순 없겠다.
6일차
사실상 이번주 코딩공부의 마지막날이었다.
7일차는 일주일간 밀린 잠을 자고, 집안일과 싸우느라 손도 못댔다.
조원들은 다 출석해서 공부한거 같던데.. ㅎ...
6일차에는,
하루종일 알고리즘 문제에 뛰어들었는데,
정말 풀리지 않아서 골머리를 앓았다.
웃긴것은.. 수능 수학 4등급으로 처참했던 내가 수학적 접근으로 문제를 풀어내고 있다는 것이었다.
하아...
100글자 이내의 문자열 가운데 인수 찾는 문제는 ... 짝수면 두글자 홀수면 한글자를 출력하라는데, 수학적으로 접근을 하면 전체 글자에서 무조건 반으로 나눠서 정수만 걸러서 짝수면 앞쪽 문자를 함께 추출하고, 홀수면 그냥 냅두면 되는 식으로 풀었다. 컴퓨터는 0부터 시작하니깐.
더 웃기게 푼 것은 랜덤으로 던져지는 정수 X~Y 까지의 합을 구하는 것이었는데, 1부터 100까지 더하라고 하면 쓸 수 있는 수학공식 등차수열이 생각났다.
수학 4등급도 등차수열을 아는구나... 졸업한지 꽤 됐는데... 내 친구들이 알면 배꼽을 잡았을거 같다.
어쨌거나 내가 직접 푸는 것에는 성공을 했는데, 이걸 어떻게 자바스크립트로 옮기지????
결국 전부 변수 선언해서 풀었다. 등차수열 공식도 최대한 간결하게 만들어서 ㅋㅋㅋㅋㅋㅋ
그러고 통과가 되어서 다른사람들 답변을 보았는데 ...
가우스 함수를 쓴 사람이 있단다.
난 가우스... 이름만 알지 공식은 전혀 모름 ㅋㅋㅋㅋ
아... 등차수열도 기뻤는데...
당장 위기의식이 들었다.
이걸 점점 수학식으로 생각하면 수능 4등급에게는 희망이 없다..
잘 알았으면 4등급이 나오지 않았겠지.
알고리즘을 보다 더 쉽게 접근할수 있는 방법은 없는건지 계속 고민하게 되었다.
여전히 문제는 수학으로 풀어나가고 있느라 힘드는 중..
그러다 8시에 문제풀이 세션이 열려서 참여하게 되었는데,
일단 풀이방식이 달랐고, 뒷부분 문제들은 그냥 보게 됐다. 봐도 어차피 기억을 못할거라..
다만 이 세션을 통해 얻게 된게 있었는데,
우선은 나의 검색 방법이 잘못되었다는 것과 콘솔창을 띄워놓고 하면 편하다는 사실을 알게 되었다.
그리고 반복문의 형태를 온전히 이해하고 있는 것은 아니라는 점을 완전히 깨달았다.
반복문을 써야한다! 정도를 인지해도 정확하게 쓰질 못해서 번번히 다른 길로 돌아가야 했던 것이다.
수학 얘기를 자꾸 하게 되는데, 수학 4등급은 공식을 외우고 떠올리는 것은 쉽지만, 정확하게 적용해서 문제를 푸는데 어려움이 있는 사람의 등급이다.
일단은 프로그래머스 상의 문제를 이해하는데 시간이 좀 걸리고, 그 문제에 어떤 방식을 적용할 지 구상하는 것에 시간이 좀 걸린다. 정확하다는 확신도 없다. 그 상태에서 계속 이렇게 저렇게 해보는 것이다.
오랜만에 펜을 들어 연습장에 끄적이면서 하고 있다.
아직 몇문제 못풀었는데... 주어진걸 다 풀수 있었으면 좋겠다.
그러면 수학 4등급이던 지난 날의 나를 조금 용서 할 수 있을 듯 하다.
여기까지만 보면 수학을 싫어했나 싶지만, 사실 좋아했다... 대반전 두둥.
그때도 문제푸는 건 좋았다. 다른 과목은 정답만을 쫓는 시험이 싫었는데 수학은 정답만을 쫓아가도 돼서 싫지 않았다. 다만, 10문제 푸는데 야자시간을 다써도 모자랐기 때문에 다른 공부를 할 수 없어서 수포자가 되어야 했다...
이제 그 고민을 원없이 해보게 되었다.
다른 과목의 눈치를 보지 않고.
영어는 쫌..
하지만 시간이 많지는 않아서 느긋할 수는 없겠다. 문제를 보다 많이 풀어서 익숙해질수 밖에 없겠고, 많이 풀 수 있는 방법도 어떻게든 생각해 내야 한다.
끝으로 ...
여전히 부족한 부분
1. 자바스크립트 기초 문법 (특히 반복문)
2. 알고리즘 접근방식
이걸 다음 주에 확실하게 다져야겠다.
