🖼 3차 프로젝트 : 인스타그램 UI클론 제작

20220502(MON)_KPT(Keep Problem Try)회고
이 내용은 9일차 TIL과 연관됩니다. (바로가기)
이 내용은 10일차 TIL과 연관됩니다. (바로가기)

WIL : 하나의 개인 프로젝트 완성 후 KPT 방식으로 쌓아나아간 내용입니다.

:: 🖼 배경 ::

인스타그램 클론코딩

인스타그램 UI를 클로닝해보면서 프론트앤드 개발실력을 늘이는 것에 초점을 두었습니다.

:: 🖼 진행 ::

🖼 DAY_1.

1) 미디어쿼리 및 색 작업
2) 고정된 내비게이션바(로고, 검색창, 아이콘) 추가
3) 사이드바 제작 및 메세지 모양 아이콘 (+)모양으로 변경 -> 여백 수정
4) 사이트 이름 수정, 메인화면 카드제작, 미디어쿼리 작동하게 수정(반응형),
기타 여백 및 아이콘위치 수정
5) 깃허브 커밋메세지 작성 연습
상세한 기능시연이 궁금하시면 여기로 와주세요!

🖼 DAY_2.

1) 아이콘 수정, 카드 레이아웃 수정, 더보기기능(접기,펴기) 추가
2) Comment(댓글부분) 레이아웃 수정, 캐러셀추가(613, 766, 샘플 이미지 추가
3) 카드 여러개 추가, 모달 추가
상세한 기능시연이 궁금하시면 여기로 와주세요!

✏️ 기능면에서 : 다음 해결해야할 목표

• 게시글 배치 후 게시글 간 여백 설정
• 사이드바와 카드 두 개의 물체가 붙어있게 하기
• 페이지별 디테일 작업 (여백, 글씨, 상단 아이콘바에 프로필 추가, 게시물, - 저장됨, 태그됨 리스트 버튼 기능, 댓글쓰기에 인풋박스 추가 등)
• 상세페이지 모달기능
• 파비콘 추가

🎦 시연영상

아래 이미지 클릭시 시연영상으로 이동합니다 😁

✏️ KPT 회고

[ Keep ]

• 정리하는 습관
• 스스로를 돌아보며 피드백하는 습관

[ Problem ]

1) 문제

• 1) CSS 속성을 부여하는 방법이 클래스만 있는 줄 알았었고, 클래스 명을 규칙적으로 작성해야 한다는 사실을 몰랐다.
• 2) 여러 속성을 적용하면서 코드가 지저분해졌다.
• 3) 깃허브 리포지토리명이 모호해 어떤 프로젝트가 어디에 위치하고 있는지 한눈에 알아보기 어렵다.
• 4) 코드 중 기억에 남는 코드를 벨로그에서 찾아보기 어렵다.

2) 원인

• 1) CSS 관련 기본 개념이 부족했다.
• 2) 코드 리팩토링을 하지 않았다.
• 3) 깃허브 리포지토리명을 프로젝트 명으로 작성해야 좋은지를 몰랐다.
• 4) 벨로그에 코드를 어떤식으로 첨부하면 좋을지 몰랐다.

[ Try ]

• 1) CSS 작성시 클래스 명을 조금 더 규칙적으로 지정해볼것
• 2) 추후 코드 리팩토링을 해볼것 (코드를 효율적으로 작성하는 부분을 연구해볼 것)
• 3) 깃허브 리포지토리 이름을 프로젝트 명으로 변경할 것
• 4) 내가 작업한 코드 중 기억하고 싶은 코드나 오류가 나서 해결했던 코드를 따로 벨로그에 첨부해볼 것

[ 그 외 노력해야 할 점 ]

• 조금 더 빠르고 깊게 서치해보는 습관을 들여볼것
• 영어로 된 기술문서를 빠르게 익힐 수 있는 방법을 찾아볼 것
• 튜터님께서 추천해주신 책 읽어볼것

[ FEEL ]

• 개인 프로젝트를 2번째 진행해오면서 빠르게 작성된 코드는 꼭 리팩토링이 필요하다는 것을 알게 되었고, 변수명과 클래스명또한 굉장히 중요한 사항이라는 것을 인지하게 되었다.

✏️ 코드 공유

작업한 자세한 코드는 여기에 게시해 두었습니다 💩
감사합니다. 😄