📕 [WIL] 2022.05.02_11일차 # WIL KPT회고

[2022-05-02 (월) 이번주 KPT회고]

[ Today KPT ]

• 인스타그램 UI클론 발표 완료
  : 이번 프로젝트는 개인프로젝트 완성후 작성한것입니다.

📆 지난 일주일동안 있었던 일, 내가 한일

• git을 활용한 커밋과 인스타그램 UI클론
• 주요 핵심기능
  1) 버튼 클릭시 모달등장
  2) carousel을 이용해 사진 여러장 표시
  3) 미디어쿼리 적용하여 모바일화면시 화면크기조정
  4) 상단 navbar와 우측 네임카드리스트 및 footer 고정하여 스크롤시 움직이지 않게 설정

😋 나의 느낌

이번 프로젝트는 사실 인스타그램을 그대로 구현하는것이 아니라 내가 꾸미고 싶은대로 독창적으로 기능을 구현하고 싶었으나, 최대한 인스타그램과 똑같이 구현하여 기초적인 실력을 탄탄히 하자는 마음으로 만들었다.

✏️ 내가 배운것, 얻은것

이번 프로젝트를 만들면서 제일 많이 쓴 기능은 'flex' 기능이다. 이제 절대 잊지않을 것 같다.

❓ flex 란 ?

하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성

🧩 적용 예시

아래 main-body안의 left-body와 right-body를 좌측 우측 나누어 정렬해야하는 상황

<div class="main-body">
<!--좌측 피드영역-->
    <div class="left-body"...>
<!--우측 피드영역-->
    <div class="right-body"...>
</div>

아래의 main-body를 flex 속성을 이용해 정렬했다.
참고: justify-content: space-between; 을 이용하면 각 아이템들의 균일한 간격을 만들 수 있다.

/*좌측피드 오른쪽피드 정렬*/
    .main-body {
        display: flex;
        justify-content: center;
        padding-top: 60px;
        margin-right: 290px;
    }

📌 배운 것을 미래에는 어떻게 적용할 지

사실 프론트엔드쪽을 하면서 가장 어려웠던게 아이템들을 내가 원하는대로 정렬하는게 항상 가장 어려웠던 것 같다. 여러가지 정렬방법을 사용하기 보다는 지금처럼 하나씩 하나씩 확실하게 써먹어야 기억에 오래남는다는것을 알게됐다. 이번 프로젝트에서 flex 속성을 정말 많이 써서 절대 잊지않을 수 있을 것같다.

🔥 KPT(유지했으면하는부분, 문제점, 필요한 노력)

[ Keep ]

• 해결할때까지 끈기 있게 찾아내는 노력
• 구글링, 블로그, 유튜브 등 다양한 서치
• 실패하더라도 여러가지를 적용해보는 습관

[ Problem ]
(문제)

• 많은 기능을 욕심내다보니 코드가 정리되지않는다.
• 한가지 기능에 대해 깊게 파고들기가 쉽지않다.

(원인)

• 시간이 정해진 프로젝트(시간 제한)
• 프로젝트이다보니 과정이 아니라 결과에 집착

[ Try ]

• 시간을 배분해서 서치를 하되, 정 모르겠으면 튜터님께 도움 구하기
• 주석을 달면서 리마인드하기
• 자신감 가지고 코드 짜나가기

🎁 자세한 코드는 Moonmoo 에 게시했습니다