자바스크립트 공부 일지

미니프로젝트 주제선정 및 발대식

입영


항해99이 드디어 시작됐다.

발대식 이후 항해에 대한 커리큘럼 및 일정을 듣고난 이후 미니프로젝트 조원들을 만나 프로젝트 기획을 진행하고, TIL/WIL 작성 규칙 강좌를 들었다.

발대식


발대식은 오후 3시에 진행되었다. 이번 기수는 한달 주기로 시작이 진행되기 때문에 전 기수 보다 인원이 보다 적은 상태로 진행된다고한다.
전 기수까지는 매니저 비율 수강생이 많기 때문에 관리가 부족했다고 전해들었었는데, 이렇게 바뀐 점은 만족스럽다.

미니프로젝트


아니나 다를까 캠프가 시작되자마자 훈련이 시작되었다. 발표식을 마치고 널널하게 종료될줄 알았던 하루는 곧 바로 프로젝트로 시작되었다.

우선 팀원들은 캠프에서 제공되는 사전 웹 강의를 들었기 때문에 내가 이걸 개발할 수 있을까? 라는건 넘기고 일단 부랴부랴 기획부터 진행하였다. 일단 나는 팀장으로 지목되어 선봉을 맡게 되었다.
쇠질이나 하러다니는 나에겐 융통성이란 없기 때문에 자기소개 없이 바로 규칙부터 선정하였다. 그래도 민주주의 국가에 사는 만큼 모든 절차는 투표로 진행하였다.

프로젝트의 와이어프레임은 대략 아래와 같다.(고마운 팀원분께서 정성스럽게 그려주셨다...)

프로젝트 시작 전 규칙을 정해두었다. 우리 팀의 규칙은 다음과 같다.

text
1. 저녁시간 : 6-7시 자율적으로!
2. 토이프로젝트는 BE, FE로 나누지 않습니다! 하나의 기능을 도맡아 개발을 진행해 봅시다.
3. 튜터님께서도 GIT을 강조하였습니다. 프로젝트 관리는 GIT을 이용합니다.
4. 이번 프로젝트에서는 어려운 기능을 구현하기 보다 작은 기능을 구현합시다. 패턴에 익숙해지는것에 초점을 맞추도록 합시다. 그리고 무엇보다 GIT 사용에 익숙해지도록 합시다.
5. 호칭은 ~님을 이용합니다. 남에게 상처가 되지 않는 말을 사용합시다!

미니프로젝트 주제


이번 프로젝트에서는 무엇보다 Git을 이용해 협업을 진행하는 것에 초점을 두었다. 팀원 전원이 Git을 이용한 협업 경험이 전무했기 때문에 이를 초점으로 맞추었다.

그래서 나온 프로젝트 주제는! 뭐가 좋을지 몰라 다 가져왔어요! 여러 도구들의 모음집 마이스크린~ 제목이 길지만 bing, whale의 첫 페이지와 같이 한 화면에서 시간을 확인하고 추가로 투두리스트 및 오늘의 날씨를 확인할 수 있는 일반 검색 포털 사이트 메인페이지와 같은 화면을 만들기로 했다.

프로젝트의 사용자


우선 플랫폼을 사용하는 주체(사용자)를 먼저 정했다. 프로젝트의 사용 주체는 나. 즉 사용자 자신으로 투두리스트등 개인이 작성하고 개인이 활용할 수 있는 도구를 제공하는 플랫폼을 구현하기로 정하였다.
이 프로젝트에서는 무엇보다 로컬스토리지를 핵심 요소로 활용하기로 했다. 팀원들도 자바스크립트 활용 능력 향상을 위해 이 점에 동의하였다.

프로젝트 기능


마이스크린 플랫폼의 기능은 다음과 같다.

text
1. 투두리스트
2. 날씨 API 이용해 화면에 현재 위치 날씨 정보 제공
3. 명언 텍스트 제조기
4. 구글 검색창
5. 현재 시간 표시
6. 즐겨찾기 링크 모음
7. Welcome 방명록
8. 메모장

위 모든 기능을 한 페이지에 담아 내기로 했다. 이렇게 하면 기능 구현에 더욱 초점을 두고 개발을 진행할 수 있기 때문에 이후 선택점이 많을 것으로 예상되었다.
매니저님께서는 사이즈 및 기능 피드백에서도 좋다고 말씀해주셨다. 다만 DB연동은 되지 않기 때문에 백엔드 지원이 4명중 3명이기 때문에 이 부분이 아쉽다고 하셨다.
그래서 이를 위한 챌린지도 구상하게 되었다.

현재 구상한 플랫폼은 로컬스토리지에 데이터를 저장하고 조회해오기 때문에 사용자가 브라우저에서 로컬스토리지 정보를 삭제한다면 모든 정보는 사라진다. 이를 위해 기능 구현의 진척도를 살펴본 뒤 다음과 같은 기능을 추가하는 것을 구상했다.

text
챌린지 - DB 저장

- 로컬스토리지를 이용하기때문에 한 PC에서만 사용가능함. 회사 PC에서도 집에서 작성한 투두리스트를 조회하고 싶다! → 불가능합니다.
- mongoDB atlas를 연동하여 로그인 기능을 추가한다면 이 문제를 해결할 수 있다. 사용자 인증(로그인 기능 추가 필요)이 되었다면 집에서 저장한 투두리스트, 메모장을 다른 PC에서도 조회할 수 있도록 구현한다.
이 정보는 사용자가 직접 삭제하지 않는 한 영구 보존할 수 있다.
1. mongoDB atlas 연동
2. 로그인 기능 구현. 로그인 시 로컬 스토리지내 데이터가 저장되어 있다면 DB 저장.

이 기능으로 불러올 수 있는 이점은 로그인/비로그인 상태 모두 온전히 사용가능하다는 것이다. 로그인 상태에서는 모든 환경에서 투두리스트등 개인이 저장한 데이터를 조회할 수 있고, 비로그인 상태에서는 기능을 온전히 사용할 수 있지만 한 PC에서만 사용가능하다는 단점만 존재한다.
다만 이 기능은 프로젝트의 기능을 구현하면서 진척도를 살피고 구현하기로 결정했다.

프로젝트를 진행하면서 얻을 수 있는 장점과 단점으로 다음과 같이 정리했다.

text
- 프론트엔드 > 백엔드, 즉 프론트엔드 분야의 기술 숙련을 강점을 살릴 수 있을 것으로 예상됩니다. 무엇보다 HTML/CSS/JS와 친숙해질 수 있습니다.
- 여러 API가 사용될 것으로 예상되기 때문에 API 요청 방법 및 제공받은 JSON 데이터를 화면에 표시하는 등 다음 프로젝트에서도 도움이 클 것으로 예상됩니다.
- DB가 아닌 로컬스토리지를 사용하기 때문에 기능을 빠르게 구현하기에 장점이 있습니다. DB 연동, 작업이 필요없기 때문에 개발 속도를 높일 수 있을것으로 예상됩니다. 단, DB연동 경험을 이번 프로젝트에서는 겪지 못해요.. 공동 데이터베이스 생성 후 개발 진행을 경험을 쌓지 못하는 단점이 있습니다. 이 점은 개발 진척도를 살펴본 뒤 추가 기능을 구현해보록 합시다.

그리고 무엇보다 팀원 모두 초심자 이므로 다음과 같이 핵심 규칙을 정해두었다. 한 화면에 모든 기능을 표시하기때문에 각자 기능먼저 구현하는것에 초점을 두고 꾸미기에는 우선 신경쓰지 말것. 모양은 생각해두지말고 기능을 구현하는데 초점을 두기로 했다.

이번 프로젝트 환경은 다음과 같이 구성될 것 같다.

text
- 프론트 : HTML/CSS/JS/jQuery
- 백엔드 : Flask(Python) -> 챌린지 기능 구현 시 사용
- 데이터 저장 : 로컬 스토리지, mongoDB atlas-> 챌린지 기능 구현 시 사용
- 프로젝트 관리 : Git, SourceTree
- 프로젝트 배포 : AWS

다음날 회의전까지는 Git 사용법 숙지, 로컬 스토리지 개념 조사, 개인적인 자바스크립트 공부, 항해 1일차 TIL 작성을 필수 과제로 진행하도록 하였다.

강민철 튜터님의 개발 블로그 작성 강의


미니프로젝트 회의 중간. 오후 5시 강민철 튜터님의 개발 블로그 작성 강의 시간에 항해 구성원 모두가 참석하였다.

개발 포스팅(TIL..)은 어떻게 작성해야할까?


TIL? Today I Learned의 약자. 그날그날 내가 공부한 것을 정리하는 것을 말한다. 미국에서는 흔하게 이루어지는 개발 문화라고 전해진다.
사실 개발블로그를 구현하고 많은 TIL을 남겨보고자 하여 글을 작성했지만 대부분 나 혼자만 알아보기 위한 글이었기 때문에 후에 봐서는 전부 삭제하였다. 이번 강의를 토대로 TIL을 작성해보면 좋을 것 같다.

채용으로 이어지기 위해서는 일종의 자기 증명이 필요한데 TIL이 중요 지표가 되기도 한다. 실제 면접장에서는 지원자가 어떻게 공부했는지 어떤 가치관을 가지고 있는지 파악하기 쉽지않은데, 이때 블로그가 중요 포트폴리오가 된다.
그리고 블로그 속의 지원자의 포스팅이 질문으로 유도되기도 한다. 그럼 이 TIL이 오픈북이자 힌트가 될 것이다. TIL내가 이걸 안다라는 것을 증명하기 위한 수단이 되기 때문이다.

TIL작성 시 다음과 같은 문장을 기억해두도록 하자 문시해알

  1. 어떤 제가 있었는가?
  • 이러한 ~ 문제가 있었다.
  1. 그래서 어떻게 도했는가?
  • 다음과 같은 케이스를 시도했다.
text
1. A 케이스를 시도
2. B 케이스를 시도
3. C 케이스를 시도
  1. 어떻게 결했는가?
  • 위 케이스 중 해당 케이스로 해결이 되었다.
  1. 무엇을 새롭게 았는가?
  • 그래서 여러 시도를 통해 배운점은 무엇인가?

위 규칙을 기억하고 글을 작성한다면 후에 경우 이상적인 글을 볼 수 있을 것이다.

만일 프로젝트가 아닌 강의를 듣고 TIL을 작성하는 경우에는 강의 내용을 그대로 요약할 것이 아니라 스스로 나만의 코드를 작성해보고, 오류를 발생시켜보고 해결해보기도 하자. 결국 내 것으로 남기 때문이다.

TIL vs WIL


개발 일기 중 TIL말고도 WIL도 존재한다.

두 개발 일지의 핵심은 두가지이다.

  • 알게 된 점 총정리
  • 목표

WIL

  • TIL의 회고는 이번에 알게 된 점을 정리하는 회고이다.
  • WIL은 이번 주 목표 달성 여부 정리 및 다음 주 목표를 정하는 방법이다.

정신없이 항해 1일차가 지나갔다. 부디 내일도 순조로운 항해가 진행되었으면한다. 항해 1일차 기록 끝.