[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 3주차 회고록

[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기]
3주차 회고록
!!

 

 
이번 주는 정말 눈뜨니까
한주가 끝나있네..?
 
왜냐하면 이번주 약 5일간
팀 프로젝트를 진행하였기 때문이다.
 
주제 선정하고 화면 구상하고
기능 구현하고 코드 정리하고 
발표 준비하니 ..
일주일 순삭!
 
시간이 더디게 가는 듯 빠르다.
이 시간이 빨리 지나갔으면 좋겠다가도
너무 빠르게 흐르는 것 같아 무섭다.
 
뭐 여튼,
HTML, CSS, JS 이용해서
화면, 이벤트, 간단한 기능만 구현하는
간단 프로젝트였지만
나름 나의 첫(제대로 된) 팀 프로젝트로
배운 것도 은근히 많았던
팀 프로젝트였다!
 
그럼 이번 팀 프로젝트에 대한
리뷰 시작 하겠당~~
 

팀프로젝트 진행 

 
우선 팀원 구성은 4인 1팀으로 진행되었다.
주제는 정말 아무거나~
기한은 1주일이였다.
정확히 말하면 4일..!
 
월요일부터 시작해서 금요일에 발표하긔..
근데 중간에 다행히도 발표가 미뤄져서
 1주일 정도 기한이 있었다.
 
아직 html, css, js만 배웠기 때문에,
엄청난 기능을 구현하지는 못하고 
디자인 적으로 선정하면 되었다.
 
우선 우리 조 주제를 적기 전에,
다른 조들은 인스타그램 클론코딩, 
안경 사이트 클론코딩 등등 
클론코딩이 많은 것 같다.
 
 

주제 선정 이유 및 기능 선정

 
처음 대두된 주제는 아이스크림 조합 추천 사이트를
만들자! 였다.
 
하지만 이걸론 부족하다 싶어 주제를 좀 더 넓힌 것이
우리만의 아이스크림 브랜드를 만들어,
실제로 론칭할 때 사용할 사이트를 제작하자! 였다.
 
4명 다 팀프로젝트도 처음이고, 막 개발을 시작하는 느낌이여서
아이스크림으로 귀욤 귀욤하게
각자만의 특색을 나타낼 수 있을 것 같았다.
 
그 세부기능은
메뉴 소개, 장바구니, 알러지 체크 기능,
아이스크림 맛 조합 추천, 이벤트 페이지 였다.
 
나는 대략적인 디자인, 메뉴 소개, 이벤트 페이지를 제작하는 역할을 맡았다.
 

제작 과정?

디자인? 

 
일단 디자인은 프리미엄 1달권 무료 사용해서
Canva에서 했다.
 
여기 오기 전 한 3개월 정도 헬스장에서 알바했던 경험이 있는데,
그때 하루에 하나씩 인스타그램 카드뉴스 제작해서 업로드 했던 경험이
그래도 조금은 도움이 되었던 것 같다.
 
 

 
대충 요런 식으로
내맘대로 만드는 아이스크림 메뉴 ㅋㅋㅋ
메뉴명은 정말 내맘대로 지었다. 겨자맛도 있다 ㅋ
 
 
 

내가 구현한 페이지 1. 메뉴 소개 페이지

 

 
이 화면에서 뭐 기능적으로 얘기할 건 딱히 없긴.. 하지만..
그냥 자동 무한 스크롤 기능, 
페이지 넘김,
데이터 배열 만들어서 jquery로 데이터 넣기 뭐...
그냥 그정도?
뭐 특별한 코드는 없다. ㅎ
 
디자인도 나름 열심히 디자인 했지만..
뭔가 허전하다.
 역시.. 디자인도 아무나 하는거 아니네~
 
 

내가 구현한 페이지 2. 세균 피하기 게임 (이벤트 페이지)

 

 

저기 오른쪽에서 날라오는 초록색 세균을 
왼쪽 주황군이 피하는 게임이다.
3번 성공하면 성공했다는 알림창을 띄워준다.
 
허접하지만 만들고 나니까
좀 귀여운 것 같다 ㅋㅋ

여기서는 충돌 시, 점프 시 함수 짜서

적용했다 !
 
 

협업을 하며 어려웠던 점

 
제대로 협업해본 것은 이번이 처음이다.
나 뿐만 아니라 팀원 모두 개발 협업은 다 처음이였다.
 
오히려 좋았다. 다같이 배우는 느낌~
그렇다면 협업할 때 어려웠던 것, 배운것, 얻은 것 등 ~ 
리뷰해보자!
 

 협업 할 때 어려웠던 것

1. 깃허브

 
깃허브... 대충 내 브랜치 파고 main에 머지 하는거
개념은 알고 있었는데
이번에 처음 제대로 사용해보았다!
 
계속해서 수정을 해야하는
nav바를 다른 모듈로 빼서
그 페이지만 수정하면 작동 되게 만들고 싶었는데,
그렇게 구현하려면 아직 안배운 부분인
ejs가 들어가야 해서 그냥 안했다.

그래서 그냥 하나하나 일일이
nav바를 수정했다

그래서.. 진짜 대 혼란의 카오스
사실 팀원중 한분이 짠 코드 일부
내가 날려 먹었다.
이 글을 보고 계신다면..
이 자리를 빌려 대용님 죄송합니다...
ㅋㅋ,,,
 

2. 변수명

 

그동안 항상 혼자 무언가를 만들어 왔으니
변수 지을 때 뭐 언제나 그랬던것 처럼
별 생각 없이 지었다.
 
예를 들면 box1, box2, font1, font2 ....
나만 알면 되니까 ~ 별생각 없이 지어갔는데
요것이 꽤나 애를 먹었다.
 
내가 또 귀찮아서 html, css, js 파일을 안나누고,
html파일에 css, js 다 넣고
순서도 뒤죽박죽, 주석도 안달고 짜갔더니
대용님이 이렇게 짜면 서버 연동이 늦다?
좀 느리다? 해서
이것도 파일 나누신다고 변수 일일이 찾아
파일을 나누어주셨다.
다시한번 이 자리를 빌려 대용님 죄송합니다...ㅋㅋ
 
 
그냥 그래서 결론적으로 어려웠던 것은
깃허브다.
깃허브.. 모르겠어 모르겠어~~
근데 깃허브는 정말 천재가 만든 것 같음 ㄷ ㄷ
쩌는 프로그램인 것 같긴 하네..
깃허브에 능숙해지는 그날까지~~
 
그리고 앞으로 코드 깔끔하게 짜기 ~~ 메모메모 ㅎㅎ

 

 

 

팀프로젝트로 느낀점

조금은 미숙했지만 나름 뿌듯한

나의 첫 팀프!

하나하나 생각한대로 만들어지는 것을 볼 때

되게 뿌듯 했다.

 

하나 아쉬웠던 것은 반응형에 대해서 제대로 이해하지 못하고

프로젝트를 시작했던 부분이 아쉬웠다. 

좀 더 공부해보자..

 

그리고 깃허브도 제대로 공부해야겠다는 생각과,

코드를 짤 때에 조금 깨끗하게,

가독성있게,

짜는 것이 중요하다고 생각이 되었다!

 

다음주 부터 백엔드 들어가고

백엔드가 들어간 프로젝트를 하게 되면..

여러가지 면에서

정말 대 혼돈의 카오스 일듯 ㅎㅎ

 

내일부터 안졸고 수업 열심히 들어야지..

우리모두 아자잣..~