Week 1 (03/01 - 03/06)

0. 항해99 승선

막연히 철학 공부를 더해야하나 싶었는데 어쩌다 정신을 차려보니 주니어 개발자로의 항해에 승선해있었다.

마지막 전공 프로젝트(철학자 유형 테스트)때 유형 테스트로 만들지 못해서 알아보던 웹 개발에 관련된 정보들과 작은 프로젝트가 나를 이곳까지 이끌었다니 정말 어떻게 될지 모르는게 인생이라더니! !

1. [Chapter1] 웹개발 미니 프로젝트

시작하자마자 미니 프로젝트가 주어졌다.
팀원들과 만나서 인사하고 다른 이야기를 나누지도 못하고 바로 어떤 사이트를 만들지에 대해서 아이디어 회의를 했다.
생각보다 빠르게 주제가 잡혔고 어떤 기능들을 구현해야할지 이야기해보고 대략 롤을 나누고 개발을 시작했다.

나는 웹 스크랩핑을 맡았고
Jinja2 템플릿 엔진을 이용한 서버사이드 렌더링의 장점에 대해서 알아오기로 했다.

먼저 Jinja2 템플릿 엔진을 알아보기 시작했는데 이 한 문장의 모든 단어가 생소했다.
그래서 차근 차근 템플릿 엔진이 무엇인지/ Jinja2는 뭐고/ 서버사이드 렌더링은 무엇인지 알아봤다.

1-1. 템플릿 시스템(Template System)의 종류 : 템플릿(Template)와 결합되는 위치에 따라 종류를 나눌 수 있다.

서버 쪽(Server Side) : 웹 서버(Web Server)
클라이언트 쪽(Client Side) : 웹 브라우저(Web Browser)
Edge-Side : 프록시 서버(Proxy Server)
분산(Distributed) : 다수의 서버(Multiple Server)
서버 밖(OutSider Server) : 정적 웹 페이지(Static Web Page)는 Offline에서 제작되고 웹 서버에 업로드 된다.

출처 gmlwjd9405.github.io/2018/12/21/template-engine.html
템플릿 엔진을 사용했을 때의 장점

Html 코드 안에서 연산작업 수행 가능, Html 안에서 파이썬 코드 작성할 수 있음
중복된 코드를 줄일 수 있음

출처 m.blog.naver.com/PostView.nhn?blogId=mksun8472&logNo=221552606651&proxyReferer=https:%2F%2Fwww.google.com%2F

1-2. 사이드 렌더링

Client-side rendering(CSR): 자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트 쪽에서 HTML을 완성하는 방법
Server-side rendering(SSR): 서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법

1-3. Jinja2 템플릿 엔진

Flask 프레임워크에서 사용하는 템플릿 언어

'템플릿'이 되는 HTML 문서에 데이터가 들어갈 곳을 표시해놓는 역할을 한다.

Jinja2 기초적 문법

{{ 변수명 }}

{% 파이썬 소스코드 %}

변수를 사용해서 웹페이지를 즉각적으로 수정하고, 입력에 따라 웹페에지의 표시 내용을 변화시킬 수 있다
상속이라는 개념을 통해 중복된 코드를 줄이고 논리적으로 코드를 짤 수 있다

출처 www.youtube.com/watch?v=pb-DDSdqD-I

2. 본격적인 개발 시작

웹 스크랩핑을 이용해 원하는 정보를 가져와서 mongodb에 넣어 ajax를 이용해 페이지에 붙여넣는 작업을 했다.

이후에 강의를 참고하면서 jinja2 템플릿을 이용해서 정보를 가져와 붙이게 수정했다.

개념들을 공부하는데 너무 많은 시간을 할애했고 주어진 강의를 먼저 쭉 훑어라도 봤으면 시간을 좀 단축할 수 있었을텐데 (ㅠㅠ) 무대뽀로 구글! 도와줘! 해버린 바람에 오히려 시간이 너무 많이 걸렸고 걸린 시간에 비해 이해도는 낮았다.

조급함에 막 검색할 시간에 차분히 강의 자료라도 볼걸. 이렇게 삽질을 한 후에야 어떻게 주어진 자료들을 활용해야할지 감이 좀 잡혔다.

그나마 뭐라도 적어볼 정신이라도 있었던 2일 3일

3. 결과

결국 jinja2 템플릿에 대한 이해가 주어진 시간의 끝까지 이루어지지 못해서 검색 기능/마이페이지 찜하기 기능 등 다른 서비스들을 만들지 못했다.

하지만 이건 전적으로 시간의 부족 문제이기 때문에 다음에 꼭 해보려고 한다.

팀장님의 날카로운 판단과 팀원님의 하드캐리로 멋진 사이트가 완성되었다.

뿌듯함과 동시에 아쉬움이 크게 남았다. (이미지를 데려올 때 조금 더 고화질의 이미지를 데려올 수 있었을텐데 - 페이지 우회했던 것처럼)

그래도 어쨌든 완성이 되는구나! 어떻게든 할 수 있었다는 좋은 기억으로 남을 것 같고, 앞으로의 여정에서도 막막할때마다 이 때의 시간을 기억해보면 좋을 것 같다는 생각을 했다.

4. [Chapter1] 웹개발 미니 프로젝트 성찰

내 자신에 대해 돌아보고, 나의 악순환을 발견할 수 있었다.

아는 것이 없다는 생각이 뇌를 지배해서 쓸데 없이 조급한 마음을 가진다 -> 그런 조급한 마음이 프로젝트를 수행할 때 긍정적인 도움이 전혀 되지 않음 -> 그래서 결국 발 동동 구른 시간에 비해 알아낸 결과가 적음 -> 난 아무것도 몰라 라는 부정적인 생각이 들어서 조급해짐 ---> 무한반복

• 팀원분들에게 도움이 되지 않는다는 생각에 죄송해 죽을 것 같은 마음을 가짐 -> 뭐라도 해야할 것 같아 조급해짐 ->실수/아무것도 못함의 반복

이런 나의 악순환이 팀에게도 안좋은 영향을 끼친다는걸 알았다. 물론 나에게는 더.

5. [Chapter2-1] 자료구조, 알고리즘

우리 팀은 먼저 각자 문제를 풀어보고, 함께 모여서 각자 쓴 코드를 리뷰하고 문제를 함께 풀이해보는 방식으로 진행하고 있다.

각자 문제를 풀어보는 시간에는

1. 문제를 최대한 이해한다

2. 문제를 푸는데 필요한 방법들에 대해서 생각해본다. (한국말로)

3. 내가 아는 파이썬 문법들을 생각해보며 이 문제를 어떤 방식으로 풀지 생각해본다. (파이썬)

4. 파이썬 문법 강의 + 강의 자료들을 참고하면서 생각해본다.

5. (잘 정리된) 다른 사람의 코드만 보고 이해해보려고 한다.

6. 최대한 혼자 이해해보고 그 사람의 설명을 본다.

7. 내가 한번 풀어본다.

8. 내가 한 풀이와 참고한 코드를 비교한다.

9. 새로 알게된 문법을 공부한다

이런 흐름을 계속 돌리고 돌려가며 공부한다.

그리고 만나서 같이 코드 리뷰 해보는 시간을 갖는다.

나는 내가 쓴 코드라고 하기엔 다 가져와서 최대한 이해해본 코드임을 이야기하고 설명해보는데,

내가 이해했다고 생각하지만 막상 설명을 하려니 아무말도 나오지 않았다. (제대로 이해하지 못했다는 의미)

그래서 또 좌절하고 ㅜ ㅜ ,,

6. 느낀점

알고리즘 주차로 들어온 5일 6일에도 챕터1때의 악순환의 생각의 꼬리를 끊어내기가 너무 어려웠다.

혼자 공부하면서 절대 갖지 않았던 생각이었는데 팀으로 함께하다보니 지나치게 남을 의식하고, 폐끼치는걸 제일 싫어하는 나에게 너무 힘든 시간이었다.

인생을 살면서 이렇게 팀플에서 버스를 탔다고 생각한 것도 처음이었기 때문에 더 그랬던 것 같다.

알고리즘 팀장님이 당신도 처음에 공부했을 때 문제를 풀기 위해서 몇시간, 몇일씩 걸렸다고 이야기를 해주시는데 많이 도움이 되었다. 팀장님도 팀장님의 쌓아온 시간이 있었기 때문에 지금의 팀장님이 있는건데, 내가 고작 이틀 해놓고 다 알게 해달라는건 완전 도둑놈의 심보라는 걸 깨달았다.

모르는건 죄송하고 미안할일이 아니다.

모른다고 계속 죄송해하고 미안해하면,

나에게도 상대방에게도 나는 몰라서 죄송하고 미안한 애에요! 라는 생각만 심어줄 뿐이다.

알아가려고 하지 않고 모른다고 엉엉 울고있는건 잘못하고 있는거다.

아직은 모르지만 공부하면 곧 알아가게 될 거다. 늘 그래왔으니까 ! 나에게 시간을 주자.

도둑놈 심보 내려놓고 내 위치를 알고 겸손하게 공부하자.

7. 다가오는 한 주는

모르는 것에 대해서 팀원분께 죄송하고 미안한 마음 갖지 말기

열심히 공부하고 있는 나 칭찬해주기

알고리즘이랑 친해지기

하루하루 최선을 다해서 주어진 문제랑 씨름해보기