[TIL] 풀스택 미니 프로젝트 _221117

⭐️ TROUBLE SHOOTING

1. 문제: 콘텐츠 한 줄 평 show_comment()함수로 ajax콜 GET타입으로 받아도 화면에 출력 안 됐음.
해결: url을 /main이 아니라 api/main이라고 명확하게 적으니 출력됨.

2. 문제: Ott platform 버튼을 클릭할 때마다 버튼의 글자(Netflix, Wavve, What를 가져오려고 했다.
javascript onclick으로 tempHtml 함수를 사용하니 텍스트가 출력되는 것은 console.log()로 확인이 됐다.
그런데 db에 저장하지 않으면 새로고침시 데이터가 날라갔다. ajax콜로 db에 저장을 시키니 데이터가 저장은 되는데 undefined로 나왔다. 나는 계속 '버튼 안의 글자를 저장해야해'라고만 생각해서 문제를 해결하지 못한 것 같다. 구글링해서 나오는 함수들을 써보고 ajax도 다르게 써봤는데 다 안 됐다.
해결: 버튼 div에 id값을 주고 querySelector로 해결하는 것이었다. "어떤 것을 클릭했을 때 그 속성과 일치하는 것들만 보여줄 거야" 이렇게 생각했다면 스스로 문제를 해결할 수 있었을 텐데 아쉬웠다.

3. 문제: 한 줄 평 보여주기와 버튼 클릭 시 버튼 이름 보여주는 기능을 같이 뭉쳐놓았었다.
해결: 한 줄 평 작성, 한 줄 평 보여주기 다 기능을 따로 작게 나눠야했다. 콘텐츠 클릭 시 어떤 걸 보여주고 싶은지 명확하게 정의해야했다.

4. 문제: 콘텐츠 영역이 슬라이더 밑에 넣으려고 position:absolute 로 띄웠었다. 그런데 내 노트북이 아니라 다른 모니터 화면에서 보면 레이아웃이 엉망이 됐다.
해결: 슬라이더 부분을 임시로 div를 만들어놓고 그 밑에 영역을 각각 따로 만들어주고 display flex를 주어야 했다.

✔️ TROUBLE SHOOTING 발표 대본

: 추천 콘텐츠 리스트가 db에서 불러와지지 않는 오류가 있었는데, Ajax(에이잭스) 요청 시 url/main이라고 명확하게 적어주니 해결됐습니다. Position absolute 를 썼더니 화면이 커지자 레이아웃이 망가지는 현상이 있었습니다.  html 설계 div를 잘 짜고 display flex로 정렬해야 한다는 것을 느꼈습니다. 구현하고자 하는 기능을 작게 쪼개야 하는 것, 그 기능을 위해 어떤 함수를 써야하는지를 배웠습니다. 한 줄 평 수정/삭제/조회 기능을 구현하지 못한 것이 아쉬웠습니다.

🪐 OTT Planet 프로젝트 진행 방식

1. 각자 취미나 관심사를 이야기하며 주제 및 컨셉 정하기
2. 프로젝트에 구현하고자 하는 기능 정하고 파트 나누기
3. 배경 이미지, 로고 아아콘, 폰트, 색상 세부 사항 정하고 크롤링할 사이트 등 자료 찾기
4. Figma로 와이어프레임 및 디자인하기
5. notion으로 계획서, gihub 만들고 current issues 정리함
6. 각자 기능 구현하고 피드백 및 수정
7. 기획멘토링 Q&A 준비해서 질문
8. 수정 후파일 합치고 git에 최종 업로드
9. 서버에 배포하고 도메인 사기
10. 서버에 올려놓고 기능 추가하기
- 로그인하면 로그인 버튼 사라지게 하는 것
- 로그아웃 기능 넣는 것
11. 최종 서버 링크 제출
12. 서로 코드 리뷰(각자 맡은 기능 설명)
13. 시연 영상 녹화 및 유튜브에 동영상 올리기
14. 발표 준비 (피피티) 대본 작성
15. 프로젝트 발표 후 각자 트러블 슈팅, 질의응답

-> 💫 발표 피피티 만드는 것, 영상 녹화하는 기능 미리 익혀두기!!!

⚡️ Link
https://www.notion.so/99-B-9-OTT-Planet-f167e0af04fb4b9a88d17f9f9899414f
https://github.com/kyuung09/hanghae99_BClass_OTTPlanet
http://ottplanet.shop/

OTT Planet

 

👊🏻 오늘 한 일

• 오전 Mac Settings_install VS CODE extensions
• 오후 main.html, main.css, main.js, app.py 내 파트 code review
• 항해 매니저님의 피드백 : input buttons 여기만 전체적인 디자인과 따로 논다
• 19:00 프로젝트 발표회 시작
• 20:45 풀스텍 미니 프로젝트 트러블 슈팅 발표
• ~05:30 프로젝트 자료들 정리, 발표회 리뷰, TIL 작성

😲 오늘 느낀 점

나는 몇 시간 동안 끙끙거려도 해결하지 못한 부분을 if else문, 화살표 함수, !== 연산자 등을 써서 기능을 구현한 코드를 보니 사실 처음에는 '아..여긴 내가 있을 곳이 아닌 걸까?'라는 생각이 들었다. '개발과 관련된 경력이 있으시거나 나보다 오래 전부터 체계적으로 공부하셨던 분들이거나 아니면 정말 머리가 좋은 분들일 거야. 내가 놀러다닐 때 공부하거나 일하셨을 것이다. 남과 비교하지 말고 나를 보자! 어제보다 오늘, 새롭게 배운 게 하나라도 있다면 나는 성장한 것이다. 비록 그 속도가 정말 한 걸음, 느릴지라도 계속 걷는다면 목적지에 언젠가 도착할 수 있다.' 이렇게 (잘 안 돼도) 계속 마인드 컨트롤을 했다.
이번 프로젝트를 통해 콘텐츠 한 줄 평에 들어가는 정보들을 db에 저장했다가 가져와서 보여주는 전체적인 흐름을 배웠다. 그리고 Git init, clone, branch(-r/-v등), add origin, add, pull, push 등 git bash에 직접 명령어를 치면서 Git과 가까워졌다. 어떤 기능을 구현하기 위해 '어떻게 생각/사고/설계해야 하는지'가 정말 중요하다고 느꼈다. 초반에 html 을 잘 짜고 css 를 적절하게 올리고 javascript 와 여러 언어/라이브러리로 생명을 불어넣어주는 게 Front의 역할인 것 같다. 프로젝트 폴더 및 파일 세팅부터 클래스명 규칙, 레이아웃 짜는 방법, api 명세 쓰는 법, 제한된 시간 안에 어떤 기능을 취사선택할지, 백과 프론트가 어떤 것을 주고받을지 등 많은 것을 배웠다.
프로젝트 기간 동안 나를 찾아주는 우리 반 동기들이 있어서 행복했다. 낯을 좀 가려서 사람들이 많으면 먼저 못 다가가고 말수가 줄어드는데 따로 날 찾아줘서 편안했다. 무슨 일이든 지금 내 곁에 있는 사람이 제일 중요한 것 같다. 정말 좁게 보면 경쟁자일 수 있지만 우리는 같이 더 좋은 사회를 만들기 위해, 다른 사람을 도와주기 위해, 내 주변 누군가가 생활에서 느끼는 그 어려움을 덜어주기 위해 여기에 모인 사람들이라고 생각한다. 내가 먼저 좋은 정보를 주고 밝은 기운을 주고 싶다. 똑똑하거나 지식이 많지 않아서 무엇을 알려주기에는 아직 부족하지만 응원과 칭찬은 자신있다!

👏🏻 오늘의 칭찬

미루고 싶었지만 목표한 대로 프로젝트 관련 내용들을 잘 정리해서 넣어두고 TIL도 썼다.

🤔 오늘의 아쉬운 점

아침에 늦잠을 잘 뻔 했다.

⛵️ 내일 할 일

• 프로젝트 코드 스크린샷 + 새롭게 알게 된 내용 블로그에 써놓기
• 자바스크립트 공부 Ch 6 ~ as many as l can~~
• 알고리즘 1단계 문제 1개 풀기