📕 [ TIL ] : 5일차_2022.04.22.(금) - 첫 프로젝트 완성

20220422(FRI)_TODAY TIL

TODAY PROJECT

• 자기 소개 페이지 발표

TO LEARN

• 서버 테스팅
• 발표 PPT 제작
• 발표 및 팀 회고

✏️ REMIND : PROJECT .배경

• 우리 팀의 아이덴티티 : 동물을 사랑하는 사람들​

직관적으로 표현하기 위해 강렬한 킹콩의 이미지 추가함.
온순하고 여린 사람들이어서 작은 원숭이 가미하는 형식으로 자기소개 페이지 제작하게 됨.

✏️ REMIND : PROJECT .역할

이번 프로젝트에서는 분업보단 하나의 결과물을 내는것이 중요하다고 생각해서 각자 기본 틀을 만들어보고 가장 좋은 걸 채택하는 방식으로 협업을 진행하였다. 또한 정해진 회의시간에 필요한 자료가 있으면 같이 찾고 라이브로 코드를 같이 수정해보는 방식으로 진행했다.

✏️ REMIND : PROJECT .구현기능

• 우리 팀(킹콩파워 팀)의 이번 '자기소개 페이지' 프로젝트 핵심 기능
  -- 1) Flask에서의(로컬 서버에서의) 페이지 간, Html간 이동​
  -- 2) 방명록 (flask를 활용한 요청 및 응답기능)​
  -- 3) 버튼 호버 및 간단한 CSS 애니메이션​버튼에 넣기(꾹- 누르면 카드 커지는 기능)
  -- 4) 배포 및 테스팅 (og태그, 배포)​

✏️ REMIND : PROJECT .다음목표

• 내가 생각하는 우리 팀(킹콩파워 팀)의 프로젝트 다음 해결해야할 목표
  -- CSS grid 기능 좀 더 자유자재로 다뤄보기
  -- CSS 애니메이션기능 다양하게 다뤄보기
  -- 모바일쿼리기능 사용해보기
  -- 레이아웃, 목업 작업시 figma tool 사용해보기
  -- 체계적인 분업화

- google slice를 이용하여 mockup

- 페이지 미리보기(기능 시연)
-- 1) Flask에서의(로컬 서버에서의) 페이지 간, Html간 이동​
-- 1-1) 배포한 서버에서 html간 이동

-- 1-2) 깃허브 아이콘 클릭시 해당 팀원의 깃허브로 이동

-- 1-3) 블로그 아이콘 클릭시 해당 팀원의 블로그로 이동

-- 2) 방명록 (flask를 활용한 요청 및 응답기능)
-- 2-1) mongoDB를 이용한 방명록 기능

-- 3) 버튼 호버 및 간단한 CSS 애니메이션​버튼에 넣기(꾹- 누르면 카드 커지는 기능)

-- 4) 배포 및 테스팅 (og태그, 배포)​
-- 기존에 사용하던 http://cafehyeon.shop/ 링크를 사용하였다.

🌾 수확 및 질문

• flask에서 html, 링크를 연동해 하나의 페이지에서 자유롭게 이동하는 방식과 서버를 연동하지 않고 html파일간 html내에서 자유롭게 이동하는 방식은 차이가 있다는 점을 알게되었다.(이동할때 app.py 파일에 redirect 방법을 사용하면 새창을 띄우지 않고도 뒤로가기를 할 수 있게 페이지를 이동시켜준다는 것을 알게되었다.)
• 카드 클릭해 이동할때 링크를 어디까지 입혀주느냐에 따라 클릭에 오류가 발생할 수 있다는 사실을 알게되었다.
• CSS 파일의 오류가 잦은 것을 알게되었다. (다른 사람의 파일과 겹치는 부분이나 코드를 가져올때 유의)
• 페이지를 가로정렬할 시 CSS에서 grid 기능이 사용된다는 것을 알게되었다. (grid는 CSS파일에 분리해 넣어놓으면 작동을 하지 않는다는 것도 알게되었다.)
• 버튼 호버+버튼 애니메이션 기능이 동시에 적용된다는 것을 알게되었다.

🌱 팀 프로젝트 후 느낀점

• 가현 : HTML,CSS,자바스크립트,Flask,파이썬,장고,제이쿼리,에이젝스 등 기능에 사용되는 기초 문법과같은 기본에 대한 이해와 깔끔한 페이지를 만들기 위해서는 클론코딩이 필요하다고 생각했다. 또한 다음 프로젝트부터는 발표자와 영상시연자, 코드에서는 각자가 어떤 기능을 구현해볼지 등 세부적인 역할을 미리 정하면 개인의 실력향상 뿐 아니라 더 효율적인 분업이 가능하겠구나 생각했다. 😃
• 태인 : 내가 무엇을 모르는지를 아는 것 부터가 제일 중요하다고 생각했고, 구글링 능력과 코드 자체를 이해하여 빠르게 적용할 수 있는 능력을 더 키워야겠다는 생각을 많이했다
• 철현 : 서둘러서 기능을 구현하러 무작정 뛰어들기 전에 와이어 프레임을 차근차근 이해하면서 큰 그림을 이해하는 것이 우선순위라고 느꼈다. 코딩의 첫 단추가 잘못 맞춰지면 갈수록 복구하는데 시간 소모가 커지는 것을 느꼈다. 빠르게보다는 바르게!
• 명주 : 사실 이번 프로젝트는 경쟁을 한다기보다는 팀원들끼리 같이 협업해서 프로젝트를 완성해나간다는 느낌이 컸다.혼자서하는 것보다 같이 하니까 더 재밌고, 특히 배울수있는 점이 많아서 좋았다.

🌱 추후 나의 계획

이번 프로젝트 이후 깨달은 바를 바탕으로 공부해야 할 방향을 잡아보았다.

• github.io 사이트를 만들어보면서 공식문서 보는 법을 차차 익혀보자. (영어로된 공식문서에 익숙해지도록)
• 이번 프로젝트에서 사용한 기능 말고도 백엔드에서 사용되는 다양한 기능을 각각 함수로 만들어 작동시켜보면서 기초를 탄탄히 다져보자.

오늘 작업한 자세한 코드는 나의_깃허브 에 게시해 두었다 💩