개발_TIL | 2022-05-02(11)

▷ 인스타 클론 코딩 (3) 마무리!

    저번에 하지 못한 input 검색 박스에 돋보기 아이콘을 추가 하였다!

    fontawesome 사이트를 통해 돋보기 아이콘을 가져온후 css를 이용하여 위치를 조정해주었다!

<!--헤더바 부분-->
<header class="header-bar">
    <div class="tool-bar">
        <h1 class="logo">Instagram</h1>
        <div class="search-bar">
            <i class="fa-solid fa-magnifying-glass"></i>
            <input type="search" placeholder="  검색"/>
        </div>
        <div class="icons-img">
            <i class="fa-solid fa-house"></i>
            <i class="fa-solid fa-paper-plane"></i>
            <i class="fa-solid fa-square-plus"></i>
            <i class="fa-solid fa-compass"></i>
            <i class="fa-solid fa-heart"></i>
            <i class="fa-solid fa-circle-user"></i>
        </div>
    </div>
</header>

 

  저번 프로젝트때 HTML 과 CSS파일을 분리해서 정리를 하는 것을 보고 이번에 분리해서 사용하였다.

  상단 헤더 바를 만든 이후에 GitHub를 통해서 클론 코딩 코드를 긁어오고 내가 필요없는 부분을 없애가며 파악하는

  시간을 보냈다.

  carousel 을 이용해서 게시물 부분을 변경하고 댓글 더보기 버튼과 댓글 달기 부분을 UI상으로만 구현해놓았다.!

<!--#첫번째 피드 사진-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img class = pic src="static/image/pet1.jpg" alt="pet1">
        </div>

        <div class="item">
            <img class = pic src="static/image/pet2.jpg" alt="pet2">
        </div>

        <div class="item">
            <img class = pic src="static/image/pet3.jpg" alt="pet3">
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

 </div>
        <div>
            <a
                    class="reply_list"
                    href="#"
            >댓글 3개 모두 보기</a
            >
        </div>
        <span class="post__date-time">30분 전</span>
    </div>
</div>
<div class="comment_input_box">
    <input class="comment_input" type="text" placeholder="댓글 달기...">
    <button class="comment_enter">게시</button>
</div>

인스타클론 작동 영상

▷ 프로젝트후 KPT 회고

   1. 한 주의 흐름

      1)한 일

          -프로젝트 명 : 인스타 클론 코딩

          -필수 작업 : Github에 레포지토리를 생성 후 깃으로 관리하기!

                          사이트의 헤더에 왼쪽 상단 로고 / 검색창 /우측 상단 아이콘

                          사이트의 본문에 두개의 단으로 나누기

                          게시글 3개 이상! 사진을 carousel을 이용해 여러장 표시!

                          댓글 작성하는 칸과 post 버튼 추가!

 

          -추가 작업 : favicon 넣기!

                          댓글 더보기 UI 구현

                          본인 게시글 이름 클릭 시 Github로 이동하는 href 구현

 

      2)느낀 점

          - 이번 프로젝트를 진행하면서 어느 부분에 어떤 코드를 넣었을 때 어떤 효과가 나타나는 지 좀더 잘 알게되는

             계기가 되었다. 아직 레퍼런스(?)를 보고 이해를 못한 부분이 더 많았지만, 하나 하나 이해하면서 모두 이해

             할수 있게끔 노력해야 될 것 같다.

   2. KEEP

      1) 이해가 되도록 잘 모르는 코드 부분에 대해 좀더 잘 찾아보기!

      2) 조원의 도움 또는 튜터님들의 도움이 필요하면 질문하기!

      3) 자신감을 갖고 목표한 틀 완성하기!

   3. Problem

      1)문제

          - 하나의 레퍼런스를 찾고 거기에서만 이해하려고 함

          - 잘 모르는 부분에 대해 끈기를 가지지 않고 다른 모르는 부분 먼저 이해하려고 하기

      2)원인

          - 틀을 만들기 위해 다양한 방법이 있는데 그것을 인지하지 못하고 하나만 파고듬

          - 모르는 부분이 너무 많아 이해 되는 부분을 먼저 찾으려고함

   4. Try

      1) Git을 좀 더 배워 활용 해보기

      2) 프로젝트를 시작 할 때부터  하나 하나 기록하면서 정리 하기

      3) 질문에 망설이지 않기