내배캠 TIL 2022.11.04 (팀 소개 페이지 프로젝트 발표)

줌으로 실시간으로 소개 페이지 프로젝트 소개

발표 중 눈에 띄던 기능

- 같은 데이터 베이스를 쓰나 다른창에 뜨도록 해주었다.
 - a href type= video.mp4 
 - 노래도 넣어주었다.
 - 방명록 내림차순 기능
   시간도 넣어주었다.
   sort()를 이용해서 해준것이다 
   서버에서 담당한다

- 날씨마다 다른 아이콘 뜨도록 해주었다
  switchcase() 이용해보는게 좋다

  -S3 Simple Storage Server의 약자로, aws에서 제공하는 파일서버 개념입니다.
 - 비밀번호 넣을 수 있도록
 - 개인 페이지는 개인이 구성하였다
 - 제목에 텍스트에 애니메이션 넣었다
 - 나한테만 보이는 getElementById를 사용하였다.
 - if(del == 0 &&'') 자기 이름만 나올 수 있도록 할 수 있는 코드?
 - keyframe을 이용해서 애니메이션
 - 글씨 잘 보이게 해줘야한다

 - put 이랑  patch 차이 뭐야?
- figma를 이용해서 페이지 틀을 
- foreach
- map
- filterslidetogle  

- 왜 이렇게 모르는 기능이 많누
- 협력사에서 들어왔을 떄는 시간 엄수가 중요하다
- 모바일에서도 이용할 수있도록 반응형으로 만들어주었다
- 노션을 이용해서 다 같이 편집 할 수 있는 와이어프레임

- 페이지 렌더링 하는 것 여러개를 한  app.py에 넣을 수 있다. 
- 움직이는 이미지 넣어보기
- 토글 버튼 넣어주었다 (카테고리 버튼)
- 작성할 떄 팝업창울 띄운다
- 주말에 나만의 소개창을 만들어볼거야

- 함수 이름도 잘 알아들을 수 있게 짓는다
- 키프레임이 뭔데
- 다크모드도 있다
- 저렇게 소개 할 때 구현한거 소개하니까 좋네
- 반응형 웹페이지란?
- 소개할 때 링크 보내줘서 바로 직접 볼 수 있도록 하면

- 힘들 때 얘기하자 이런 모토 좋다
- 글자 회전하도록 만들어었다.
- 카드 플립

 

내가 구현할 수 있는 기능인데 내가 생각하지 못했던 것들이 보였다

할 수 있는게 별로 없는게 아니라 내 실력으로 구현할 아이디어가 없었던 것이다.

다음 프로젝트에 이런것을 신경써서 실력발휘를 해보고 싶다.

프로젝트하면서 느낀점 

협업을 편하게 하려 git을 썼는데,
 처음 써봐서, 사용하는데 서툴었고, 문제가 생겼을 때는 해결 방법을 몰라 시간이 많이 걸렸다, 
 거의 목요일이 되서야 단순한 기능은 익숙해져서 git의 편리함을 느낄 수있었다.
  그러나 서로 다른 파일을 어떻게 합치는지 몰라서 어려웠었다.
 강민철 튜터님의 인프런 강의를 들어보면서, 그런 어려움들을 어떻게 해결해야하는 알아가는 중이다
 
소개 페이지의 html과 css는 잘하시는 팀원분이 거의 다했고,
방명록 javascript에서도 나는 삭제, 작성기능과 같이 단순한 기능만 구현하고 
수정, 변하지 않는 고유키 데이터에서 가져오기 등 어려운 부분은 잘하시는 팀원분이 거의 구현하셔서
내가 할 수 있는게 많이 없다는 생각을 했다. 
그래도 잘하시는 분들의 코드를 보면서 많이 배웠다. 자세히 보고 따라하기도 하면서 내것으로 만들고 싶다

 

생각보다 와이어프레임 그대로 가는게 많고 나중에 수정의견을 잘 안내었다
심지어 아무렇게나 쓴 조 설명 까지 그대로 가져갔다
와이어프레임을 많이 생각하고 쓰는게 좋을 것 같다.
근데 정말 처음이라서 그런것 같기도 하다

 

프로젝트 동안 만든 것

S.A starting assignment 

https://vgb30xk.tistory.com/12

 

 

코드 모아놓은  github 주소

https://github.com/hobak12/webpage1

GitHub - hobak12/webpage1

소개페이지 발표 ppt

https://docs.google.com/presentation/d/1JTse5-Rqnc8-keOLgwsGpH3NBXhA1syf/edit#slide=id.p1

いい조 소개 페이지 발표.pptx

소개페이지 영상 

스파르타 내일배움캠프 REACT A반 2조 프로젝트 - YouTube

튜터님의 프로젝트 피드백

결과 발표 자료 및 서면 피드백 모음 

[내일배움캠프] 4기 미니프로젝트 결과 제출(응답) - Google Sheets

 

잘한점
- Create(생성), Read(읽기), Update(갱신), Delete(삭제)

- CRUD 기능 4가지 다 잘 구현했다. 

- 추가로 검색기능가지 잘 구현되었다.

- github 잘 이용했다.
- 주석으로 설명해준것 잘했다.

 

아쉬운점
- 날씨 지역명 같이 해주기

 

나만의 KPT

A반 2조 いい조

 

1. Keep 

• 서로 모르는 코딩에 대해 찬찬히 설명해준 것
• 협업할 떄 git과 github 사용한 것
• 잘 안될 떄 서로 정보를 공유하며 해결하려고 노력한 점
• 코딩 할때 주석을 잘 달아준 것
• 캠을 계속 켜놓는 것

 

2. Problem

• 맨 처음 S.A를 쓰면서 기회기 할 때 구현할 기능과 와이어프레임에 대해 다양하게 논의하지 않은 것
• 초반에 간략하게 잡아놓은 기획에서 더 나아가지 못한 것 
• git을 잘 쓸 줄 몰라 방법을 알아가는데 시간을 많이 허비한 것
• 서로의 코딩에 대한 설명을 마지막 날에서야 한것
• 발표하는 당일날 발표준비를 한 것
• 서버 이해 부족으로 백엔트 코드 이해 어려움

 

3. Reason

• 소통 부족, 정보 수집 부족
• 경험 부족
• 과제마다의 기한을 정하지 않아서
• javascript 배경지식 부족

 

4. Try

• 기획 할 때 검색도 해가면서 아이디어를 얻고, 조원들끼리 많은 의견을 주고 받는다.
• 진행 상황에 대해 피드백을 정기적으로 한다
• git과 github에 대해 공부 더 하기
• 과제마다 기한을 정해서 시간 관리를 한다
• 다음 프로젝트를 위해 자바스크립트에 대한 공부를 하고, 하루에 하나씩이라도 제대로 이해하고 기록남기기.

 

주말에 연습할 것

- 날씨 장소넣기

- 날씨에 이미지 연동

- 좋아요 기능

- 글 수정 기능

- a href로 링크 연결하기와 위치옮겨주기

- css와 js 파일 static에 분리해주기

- 움직이는 이미지 배경으로 하기

 

강의

-깃강의
-얄코
-코딩앙마

 

오늘의 꿀팁

- 다른 사람과 비교 금지
- 나만의 강점을 찾아서 갈고닦자
- github 들어가서 코드를 훔쳐보자

- 튜터님한테 자주 찾아가서 물어보자

- 협력사 분들이 프로젝트 발표에 참여하면 시간에 엄수가 중요하니 유의할 것

 

우리 조 코드를 보면서 이해한 것