☀️ [TIL]_22.05.02_(월) 10일차 - 인스타그램 클론 코딩 - KPT 회고

🌈[Today Project]

개인 프로젝트 인스타그램 클론 코딩 3일차

📗[TO LEARN]

1) branch 활용 추가개발
2) carousel 을 위한 카드섹션 변경
3) 모달 기능 추가
4) 게시글 더보기 버튼 추가 및 활성화

🖥️[Development situation]

• carousel
  

• modal
  

인스타그램 개발 영상보기

🛠️[추가해야 할 작업]

• 미디어 쿼리 (반응형 작업) - 일부 추가

@media screen and (max-width: 1100px) {
        .side_box {
            display: none;
        }

• 상단 네비게이션 바 이미지 맨 앞 고정 - z-index: 1; 적용을 통해 해결
• 캐러셀 이미지 오토 리사이징

🔥인스타그램 클론코딩 KPT 회고

Keep

• 구글링 / 유튜브 / github / 벨로그 등 다양한 경로로 서치 및 적용
• 어떻게든 시작해서 결과물을 만들어낸 것

Problem

문제)

• 해결하지 못한 문제에 대한 집착 (시간 분배)
• 체계적인 코드 짜지 못한 점 (CSS, 적절한 div, class)
• 적용한 것에 대한 확실한 이해

원인)

• 무엇을 모르는지 모르는 상태에서의 출발
• 목업을 준비하지 않은채 코딩
• 하나 하나 주석 달고, 배운것을 기록하며 나아가야 하는데 시간에 쫓겨 그러지 못함

Try

• 튜터님께 적극 질문하기
• 코딩 시작 전 큰 그림 및 세부적인 목업을 짠 후 코딩 시작해보기
• 코드 한줄 적용할때마다 주석 달기
• 무슨 문제를 어떻게 해결했는지 벨로그에 자주 기록하여 리마인드 하기
• 팀원과의 협업을 위한 GIT 강의 더 듣기

💡[느낀점]

이번 인스타그램 클론코딩 프로젝트를 진행하면서
CSS를 효율적으로 하기 위해선,
처음부터 그리드나 플렉스를 잘 활용하여 화면구성을 잘 배치해놓는것이 가장 중요하다는 생각이 들었다
grid와 flex의 개념을 주말새에도 공부를 많이 했지만
아직도 이해가 가지 않는 부분이 너무 많다

그중에 가장 어렵고 궁금한것은
아래와 같은 두가지이다

1) 전체 배경화면 사이즈의 디폴트값? (이런건 없는거같은데...)
2) 가로 세로를 섞어서 gird, flex를 배치하는 방법

금번 인스타그램은 좌우로 나누어서 진행하는 부분이여서
어찌 저찌 따라할 수 있었으나
다소 복잡한 구조의 배치를 진행하게 된다면 어떻게 해야할지 아직 머리에 감이 오지 않는다

이 부분을 해결하지 못한다면
앞으로 나아가긴 어렵다는 생각이 들어
금일 추가로 공부해서 반드시 기초를 쌓고 넘어가야겠다는 생각을 했고,

미디어 쿼리도 부분적으로 적용을 해보며 개념을 살짝이나마 익혔고,
미디어 쿼리를 위해선 체계적으로 class를 잘 분리하여 css를 구성해야만
후에 더 효율적인 운영을 할 수 있겠다는 결론을 냈다

금번 프로젝트에는 git을 활용하여 진행했고
추가 기능을 구현할땐 추후 협업을 대비하여 branch를 활용해서 기능을 추가를 해보았다
merge도 진행을 해보았지만 아직도 merge관련해서는 협업할시에 어떻게 동작하게 될지 사뭇 궁금하다

아직은 부족한게 너무 많지만
분명한건 어제보다 오늘의 나는 조금 더 낫다는점!

하루 하루 더 꿈을 향해 정진하자!
가자!🚀

🤪코드 보러가기 ➡️ 인스타그램 Code 보러가기 (Git hub)