[0주차 개괄]
SW 정글 5기의 0주차가 끝났다.
입학 시험을 준비하면 배웠던 내용을 바탕으로 3일간 미니 프로젝트를 진행했다.
입소한 날부터 바로 팀이 정해지고, 기획안 발표까지 진행되어서 조금 놀랐지만, 열정적이고 배울 점 많은 팀원 두 분을 만나 재밌게 프로젝트를 진행할 수 있었다.
주차별 과제만 주어질 뿐, 아무런 제약도 가르침도 없어서 정글이 내가 욕심낸 만큼 성장할 수 있는 구조라는 것을 정말로 느낄 수 있었다.
[최정기_로드]
입학시험을 위해 공부했던 flask를 사용해 '나만의 서비스'를 만드는 것이 0주차 과제였다.
우리 팀(6조)은 대학가 맛집 추천 서비스인 "최정기_로드"를 제작했다.
🤙 과제 필수 사항
0주차 과제의 필수 포함 사항들은 다음과 같이 주어졌다.
- 로그인 기능 구현
- jinja2를 사용해 서버 사이드 렌더링 사용
👍 과제 선택 사항
필수 사항 외에 선택 사항도 2가지 주어졌다.
- JWT를 사용해 로그인 구현
- bootstrap이 아닌 tailwind, bulma...의 css 라이브러리 사용
🙋♀️ 나의 역할
나는 프론트엔드 작업을 맡았다.
- 팀원들과 서비스 기획하기
- 피그마를 사용해서 팀원들과 함께 와이어프레임 작성
- base.html를 포함한 페이지별 html 코드 작성
- tailwind를 사용해 (상대적으로 수월하게) 반응형 구현
- jinja2 템플릿 엔진을 사용해서 서버 사이드 렌더링하기
- 최종 발표 자료 만들기
💻 새롭게 배운 점 [jinja2 템플릿 엔진]
이전에 django 프레임워크를 사용할 때 django template를 활용해본 경험이 있어서 jinja2 템플릿 엔진을 비교적 수월하게 사용할 수 있었다.
하지만 사용 방법만 익혔을 뿐 서버 사이드 렌더링이 무엇이고, 클라이언트 사이드 렌더링과 어떤 차이점이 있으며, 어떤 장단점이 있는지는 모르고 있었다.
0.렌더링이란?
클라이언트로 받은 요청을 브라우저 화면에 보여주는 것
1. 서버 사이드 렌더링이란?
서버 사이드 렌더링은 화면에 보여질 페이지를 서버에서 그려서 브라우저에게 보내는 방식이다.
2. 그렇다면, 클라이언트 사이드 렌더링이란?
서버 사이드 렌더링과 다르게 브라우저에서 페이지를 그리는 방식이다.
3. 서버 사이드 렌더링 VS 클라이언트 사이드 렌더링
서버 사이드 렌더링은 앞에서 말했듯, 서버에서 페이지를 다 그린 다음에 브라우저에 보여준다.
따라서 브라우저는 html 파일에 포함되어 있는 javascript 파일을 다운받고 실행되기까지 기다릴 필요가 없다!
클라이언트 사이드 렌더링은 빈 html 파일에 javascript 링크가 달려있는 상태로만 브라우저에 전달된다!
따라서 서버 사이드 렌더링에서 TTFB(Time To First Byte, HTTP 요청을 했을때 처음 정보가 브라우져에 도달하는 시간)가 클라이언트 사이드 렌더링에 비해 느리다.
서버에서 페이지를 그리는 시간이 필요할 것이기 때문이다.
(참고:https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8)
4. 실제 프로젝트에선 어떻게 사용했는지
[HTML 파일의 개수를 효과적으로 줄임]
if문을 사용해서 하나의 html파일에서 조건마다 다르게 보이게끔 코드를 작성했다.
extends를 활용해 base.html를 다른 html 파일들이 상속받도록 코드를 작성했다.
[불필요한 코드를 줄임]
for문을 사용해서 반복되는 코드를 줄일 수 있었다.
🌊 새롭게 사용한 기술 [Tailwind CSS]
1. Tailwind CSS란?
Utilty-first를 지향하는 CSS library로, 정해진 틀을 사용해서 쉽고 빠르게 css작업을 효율적으로 할 수 있도록 도와준다.
실제 css에 하나씩 지정하다보면 복잡한 작업을, Tailwind에서 정해준 class명을 인라인에 적어주면 바로 적용되는 마법같은 일이 일어난다!!
2. 장점
1) 반응형을 구현하기 쉽다!
2) 클래스명을 고민하지 않아도 된다!!
3) Tailwind CSS IntelliSense를 설치하면 더욱 직관적이고 쉽게 작업할 수 있다!!!
3. 단점
1) 초반에 클래스명이 익숙지 않아 공식 문서를 찾아봐야 하느라 번거로울 수 있다.
2) 인라인 스타일이기 때문에 html 코드가 복잡하고 길어질 수 있다.
4. 실제 프로젝트에선 어떻게 사용했는지
[반응형 구현]
비록 시간의 제약과 미숙함으로 인해 완벽한 반응형을 구현하지 못했다. 하지만, 라이브러리 없이 '쌩'으로 css작업할 때보다 수월하게 구현할 수 있었다.
가장 마음에 들게 된 부분은 대학교 맛집 리스트페이지이다!
(거의 유일하게 반응형이라는 점은 안ㅠ비ㅠ밀ㅠ)
😿 아쉬웠던 점
1. 프론트 작업밖에 못해 본것
처음부터 BE / FE를 나눠서 역할을 나누었다. 효율적인 업무 분담이기는 했지만, 짧은 기간 내에 서비스를 만들어야 했기 때문에 Session, JWT에 대해서 공부하고 코드를 직접 짜볼 기회가 없었다.
또한 입학 시험 과제 내용 중 BE과 크롤링에 관련된 부분을 제대로 복습하지 못하고 넘어가게 되어서 아쉬웠다.
목요일(22일)에 있었던 전체 회식에서 의장님과 짧게 대화할 기회가 있었는데, 그 때 FE / BE을 굳이 구분해서 하는 것을 지양하라고 조언해주셨다.
지금 수준에서는 굳이 구분할 필요도 없을 뿐더러, 정글은 기술을 익히러 온 것이 아니라 개발자로서 고민하고 문제를 해결해 가는 자신만의 방식을 갖추는 데에 궁극적인 목표가 있는 곳이기 때문이다.
다음에도 웹 서비스를 제작하는 과제가 주어지거나, 정글이 끝난 후에도 이와 비슷한 기회가 온다면 BE / FE 모두 경험할 수 있도록 의식적으로 노력해야겠다.
2. 공부한 내용을 공유하는 시간이 부족했던 것
flask, session, jwt, html, css 등등 어느 것 하나 익숙지 않았고, 주어진 시간도 꽤 짧아서 팀원간 새로 알게 된 내용을 공유할 여유가 없었다.
그러다 보니 지금 당장 발생한 문제를 해결하는 것에만 집중할 뿐, 새롭게 알게된 내용들이나 더 공부하면 좋을 내용들을 정리할 시간 또한 부족했다.
앞으로의 팀플에서 팀원들과 적극적으로, 그리고 의식적으로 공유하고 대화하는 시간을 가져 더 효율적이고 효과적으로 공부할 수 있는 방법을 익혀야겠다고 생각했다.
[0주차를 보내며]
0주차의 마지막으로 전체 회식을 했다.
대표님, 의장님, 코치님까지 함께해 주셨고 도움이 되는 조언들을 많이 해주셨다.
무엇보다 정글 교육 과정에 운영진분들이 진심인 것을 느낄 수 있어서,
정글에 오길 잘했다!
라고 생각했다.
바쁘게 팀플할 때는 미처 알지 못했는데, 끝나고 보니 0주차의 궁극적인 목적은
5개월간의 교육과정에 임하는 마음가짐을 다잡는 것에 있다는 생각이 들었다.
1주차부터 4주차까지는 컴퓨팅적 사고 능력을 키우는 과정이다.
1주차도 화이팅이다! 아자!
