내일배움단 15일 프로젝트 3-7일자 개발일지

#코딩 개발일지 시작의 한마디

• 또.... 개발일지 매일 못 썼다...ㅋㅋㅋㅋㅋㅋㅋㅋ 😂😂😂 오늘부터라도 부디.. 매일 쓰길 ㅎㅎ
• 심지어 지금... 이 글 날라가서 한 번 더 쓰는 것이다.... 증말 해탈 직전 ㅎ

# 개발 업무내용

[오늘의 목표]

1. 메인페이지 section 1, 3 구현
2. 반응형 구현

[토의 내용]

• 회의마다 본인이 한 파트 진행 사항 보고, 공유
• 튜터님과 한 차례 미팅
• 프론트 전반적으로 정리 + 백엔드 차차 돌입

# 업무 중 이슈/고민 .. 그리고 해결한 내용

메인 페이지를 맡게 되었다. 메인 페이지는 3개의 section으로 나뉘어져있는데, 내가 section 1, 3을 맡고, 정현님이 section 2를 맡는 것으로 배분하였다. 그래서 깃허브를 사용하여 서로 내용을 공유하고, 오늘 드디어 메인 페이지를 전반적으로 완성하여 합치는 것까지 완료하였다.

 

메인페이지를 어떻게 구현했는지 회고해본다면,,

아무래도 첫 반응형 페이지 구현이었기 때문에, 개념을 잡고 미디어 쿼리를 이해하는 부분에서 애를 먹었다. 

그래서 초반에 진도를 많이 못 나갔고,, 아래 강의를 통해서 좀 이해한 후에는 section 1은 그래도 수월하게(?) 진행할 수 있었다.

https://www.youtube.com/watch?v=52TT7SLexxE&list=PL4UVBBIc6giL7ygRa-P7UExEKqZgx4t9K&index=1 

나중에 왜인지 모르겠으나 페이지가 줄었을 때 로고 변화가 자연스럽지 않은 문제가 발생했으나, 그건 정현님께 남겨두고,,, ㅋㅋㅋㅋㅋㅋㅋ 나는 이만 백엔드로 넘어가야만 한다...

 

section 3는 팀 소개 페이지인데, 처음에 table을 이용해 만들었으나, 반응형 구현이 내가 원하는 방식대로 되지 않았다. 팀장님의 조언에 따라 grid를 적용해서 해결!

gird도 처음에 그 개념을 잡기 어려웠다. 역시 유튜브에서 강의를 찾아 해결했다. 유튜브 최고^^

https://www.youtube.com/watch?v=sgyibPa-2i8 

뿌듯하게도 section 3만큼은 완벽하게 반응형 구현에 성공한 것 같다. 예이!!!

동영상으로 남기고 싶었으나... 게임 런처 화면 녹화 기능의 문제로 녹화하지 못 했다.

아래 영상은 오늘 정현님과 합친 메인 페이지의 모습! (api 브런치에 있다.)

 

 

아쉽지만 캡쳐 화면으로라도 남겨본다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이런 식으로 화면이 줄어듦에 따라 반응형으로 구현될 수있도록 했다.

 

아래에 푸터도 추가했다. 푸터에는 저작권 관련 문구를 넣었다. sns 공유 아이콘을 추가하면 좋겠다는 생각에 정현님께 말씀드렸다! 아마 이 것도 정현님께서 구현해주실 것 같다.

나도 개인적으로는 백보다 프런트를 선호하지만,, 이번에는 백에 도전해보고 싶기도 해서 백에 지원했는데

사실 좀 막막한 부분이 많다. 게다가 우리 팀이 node.js를 이용하게 되어 공부해야할 것들이 산더미...ㅎㅎㅎ

그래도 지난 프로젝트에서는 하지 못했던 반응형 구현을 하게 되어 아쉽지만 뿌듯하게 프런트 파트를 마무리한 것 같아 다행이다.

오늘은... 어려울 것같고 내일부터!! 정말 백에만 몰입해야 할 것 같다.

적어도.. 이번 주 안에는 백 초안은 잡고 가고 싶어서 부지런히 달려야겠다. 화이팅!

 

# To-do List

• node.js 공부.....(오늘도 못 함ㅎㅎ^^...)
• 백엔드 돌입

주말에는 상대적으로 시간이 없으니까... 최대한 목, 금에 많이 해야할텐데ㅠㅠ 진짜 열심히 하자!!!!

+ 내일 오전에 백신 2차 맞아서 좀 불안하다... 제발 몸이 괜찮아서 목, 금에 많이 해놓을 수 있길 제발!!!!!!!