(웹개발 종합반)Project Challenge

스파르타 웹개발 종합반 Project Challenge의 기간이 총 11일인데 벌써 7일 째이다.

이제 figma 이용해서 웹 디자인 짜고 어울리는 글꼴을 정한게 다인데 벌써 절반의 시간이 지났다니 앞으로 남은 5일 동안 번듯한 웹사이트를 만들 수 있을까 의문이 들었다.

속도를 좀 내야만 했다.

 

9월 10일(금)

전에 figma를 통해 디자인 한 웹페이지는 6페이지였다.

맨 처음 입구 역할을 하는 페이지는 제목과 버튼 두 개로 구성되어 있어 상대적으로 간단하여 팀원 중 한 분이 첫 페이지와 Best recipe 추천 페이지를 같이 하기로 했다. 그래서 나를 포함하여 다른 팀원들은 한 사람당 한 페이지를 맡아서 html과 css로 뼈대를 우선 만들기로 했다.

내가 맡은 페이지는 Detailpage.html, Detailpage.css였는데, 상세페이지 안에 레시피 관련 사진이 들어가기 때문에 사진의 비율이 찌그러지지는 않으면서 어떤 크기의 사진이 업로드 되어도 정해진 네모 안에 최대한 꽉 차도록 하려고 하는 부분이 조금 어려웠다. 그래도 어떻게 결과값이 보이는지 이것저것 다 해보면서 CSS의 기능들을 많이 알게 되었다.

생각했던 것보다 html과 css를 작성하는 것도 시간이 꽤 오래 걸렸다.

figma를 이용한 웹사이트 디자인

 

9월 10일(일)

밤에 튜터님과 미팅을 앞두고 html과 css를 마무리 짓도록 열심히 코딩했다.

비록 한 페이지이지만 버튼들, 사진, 레시피 내용, 리뷰 공간 등 기능들이 다양하게 들어가 있어서 그런지 시간이 좀 걸렸다. 특히 비율을 서로 맞추어서 혼자 동떨어진 아이가 없도록 하기 위해서 css 부분에서 많은 노력이 필요했다.

튜터님과의 미팅이 정말 많은 도움이 되었다. 무려 거의 2시간 동안이나 우리 팀을 위해 도움을 주셨다. 반응형 웹을 만드는 방법과 웹페이지 화면에서 바로 '검사' 기능을 사용하여 바로바로 결과물을 확인하는 방법에 대해 배웠다. 늦은 시간까지 많은 시간과 조언을 아끼지 않으신 정석진 미니튜터님께 매우 감사드렸다.

 

9월12일(월)

일요일에도 코딩은 계속 된다. 어제 튜터님께 배운 반응형 웹사이트를 만드는 방법을 적용하여 detailpage를 수정하였다. 튜터님께서 잘했다고 칭찬해 주셔서 기분이 하늘로 날아가는 듯 아주 좋았다. ㅎㅎㅎ 아직은 기능은 없지만 보기엔 그럴싸한 웹페이지였다.

 

9월13일(화)

이제 본격적으로 JavaScript로 기능을 넣는 작업에 들어갔다. 그동안 웹개발 종합반 강의를 들으며 쌓아온 실력을 발휘할 때이다. 일단 오늘은 가장 간단한 부분인 각 버튼들, 리뷰 섹션의 POST, GET 등을 작성하였다. 내가 코드를 작성했지만 실제로 잘 작동하는 결과물을 보며 신기했다. ㅎㅎㅎㅎ

 

9월14일(수)

이제 이틀밖에 시간이 남지 않아서 조금 마음이 조급해졌다. 서둘러서 기능들을 넣고 마무리 작업을 들어가야 했다. 내가 해야할 일은 쌓아놓은 데이터, 즉 여러 레시피들 각각의 페이지를 보여주는 것이었다. 그런데 이 기능을 만들기 위해서 어디서부터 시작해야 할지 감이 잘 안 잡혔다. 어떻게 시작해야 하는거지? 어디서부터 시작하면 되지? 검색을 해보면서 이런저런 생각을 해보았다. 쉽지 않았다. 도움이 필요하다. 튜터님~! :)

 

9월15일(목)

튜터님께서 전에 작성해 놓으신 다른 웹사이트의 코드를 볼 수 있는 깃헙 링크를 공유해 주셨다. 이 코드를 이해하면 상세페이지를 만드는 방법을 알 수 있을 거라고 조언을 해주셨다. 튜터님의 설명 덕분에 코드를 이해하는 데 많은 도움이 되었다. 목표는 이거야, 그러니 그곳까지 어떻게 하면 도착할 수 있을까? 이 생각을 하며 다양한 시도를 해보았다.

프로젝트 마감 시간이 코앞으로 다가왔다. 4-5시간 정도 남았을 쯔음, 화면에 상세페이지에 들어가야 할 내용들이 json 파일 형식으로 보였다. 와, 이거 되겠는데? 만약 못하더라도 남은 시간동안 끝까지 해보자! 재밌으니깐 즐기는 마음으로 해보자! 이런 마음으로 한 것 같다. 그러다 마감 시간이 2시간 정도 남았을 때, 갑자기 화면에 똭! 내가 원했던 상세페이지가 제대로 떴다. 머리카락이 순간 모두 서는것 같은 짜릿함이 느껴졌다. 이어서 정말 잘 작동이 되는지 테스트 후 깃헙에 update를 했다. 그리고 약간 정리가 안된 format과 내용들을 다듬었다. 와 내가 이걸 성공시켰다니! 

 

마감 시간이 훨씬 넘어서 제출을 할 수 있었다. 다른 분들과 함께 마무리를 짓고 마지막으로 AWS 서버에 연결을 하려는데 약간의 이슈가 생겨 기존과는 다른 AWS 계정으로 파일들을 넣고 mongoDB에서 사라진 데이터들을 복구하느라 시간이 좀 걸렸다. 사실 앞에서 미리 코드를 작성하고 웹사이트를 얼추 완성시켜 놓았다면 생각지 못한 이슈가 생겨도 복구가 충분히 가능했었을 것이다. 하지만 11일 이라는 기간 동안 웹사이트를 만든다는 것이 생각보다 짧은 시간이었다고 다시 생각하게 되었다. 버튼 하나하나가 참 많은 시간과 노력이 들어갔다는 것을 아주 잘 알 수 있는 계기였다. 

 

참 많은 것을 배우고 느낄 수 있었던 참으로 값진 프로젝트였다. 마지막 3일동안 정말 하루에 잠은 3-4 밖에 못자면서 온종이 컴퓨터에 앉아 코딩을 하고, 요리 할 시간이 없어서 씨리얼로 대충 먹으며 버텼더니 체력적으로 많이 힘들기도 했다. 그래도 완성된 작품(?)을 보니 매우 뿌듯하다. 확실히 수업에서 배웠던 내용들이 머릿속에서 정리가 되었고, 그 외에 다른 새로운 내용들도 많이 알게 되었다. 또한 이 기회를 통해 코딩을 더 배우고 싶다라는 생각을 더 가지게 되었다.

 

이것이 우리의 결과물: http://cukimon.shop/

아직 수정해야 할 부분이 많지만 참 마음에 드는 웹사이트이다. :)

 

앞으로도 계속 업데이트 해서 실제로 쓸 수 있도록 만들 것이다.

 

그동안 함께 달린 우리 팀원분들과 정석진 미니튜터님, 그리고 왕예리 매니저님, 모두들 너무 감사드립니다.

앞으로도 계속, 함께 코딩해요!