😂 인스타그램 클론코딩 제출

😭 z-index 관련 수정

Erwinousy님의 블로그

• 금일 새벽까지 잘 되었던 모달에 에러가 나 금일 오전에 전혀 화면에 출력이 되지 않았다. 이를 수정하고자 튜터님께 질문을 드리고 구글링을 하던 도중 위의 블로그에서 opacity 값으로 인해 z-index가 동작하지 않을 수 있음을 알게 되었다.
• 나의 문제를 해결하고자 위의 블로그를 참조하여 나의 코드를 한 번 더 읽어 보았다. 아니나 다를까 opacity 값이 모달과 관련된 css에 다 들어가 있었다. 그래서 해당 값들을 주석 처리 하였고, 조금의 margin 값 수정을 통해 예전과 같이 모달창을 꺼낼 수 있게 되었다.

😭 구현 코드

- Modal

<!--피드 우상단 점 세 개를 누르면 나오는 모달 부분-->
    <div class="modal-wrapper" id="modal-wrapper" style="z-index: 1">
        <div class="modal">
            <div class="content">
                <div class="good-job">
                    <p style="color: red">신고</p>
                    <hr>
                    <p style="color: red">팔로우 취소</p>
                    <hr>
                    <p>게시물로 이동</p>
                    <hr>
                    <p>태그된 계정</p>
                    <hr>
                    <p>공유 대상</p>
                    <hr>
                    <p>링크 복사</p>
                    <hr>
                    <button class="but_close" id="close" style="border: none; outline: none; background-color: transparent; font-weight: bold;">취소</button>
                </div>
            </div>
        </div>
    </div>

• 몇 시간 가량의 구글링과 이전 팀 프로젝트에서 사용했던 코드를 사용해 작성하였다. <hr> 태그를 이용해 가로줄을 그어 인스타그램의 모달과 같은 느낌을 내었다. 마지막 취소는 버튼을 사용하였고, 버튼에 들어가는 모든 꾸밈을 없애 같은 모달의 다른 칸 요소들과 같은 느낌을 주었다.
• 아쉬운 점으로는 구현에 시간이 너무 많이 들었고, 해당 모달을 응용해 다른 모달들도 만들어 보려했는데 거기까지는 구현하지 못했다.
• 팀원들과 소통하며 알게 된 부분인데, 나는 모달의 모션 구현에 toggleClass를 활용했다. 그런데 구현하다 보니 인스타그램과 다르게 한 번 모달을 띄우고 끄면 새로고침을 하지 않는 한 더 이상 모달을 킬 수 없었다. 그래서 나는 아예 모달을 끄면 화면 자체가 새로고침되도록 하였었는데, 이 부분은 toggleClass이기 때문에 한 번만 사용할 수 있었던 것이었다.
• 그리고 모달을 실행했을 때 모달 뒤의 배경에 스크롤이 적용될 수 없도록 하였다.

$(document).ready(function () {
    /*######################################모달 부분*/
    $('.trigger').on('click', function () {
        $('.modal-wrapper').toggleClass('open');
        $('.page-wrapper').toggleClass('blur-it');
        console.log("modal")
         // body 스크롤 방지
        document.body.classList.add("stop-scroll");
        return false;
    });
    $(function () {
        $("#close").on("click", function () {
            $("#modal-wrapper").hide();
            // 스크롤 방지 해제
            document.body.classList.remove("stop-scroll");
            location.reload();
        })
    });
});

- javascript의 classList.remov와 add

function seeMore() {
    const plus = document.getElementById("seeMore");
    const btn =  document.getElementById("plus_btn");
    plus.classList.remove("hidden");
    btn.classList.add("hidden");

• 해당 함수를 짜 이번 프로젝트에서 두 군데서 사용하였다. 원리는 해당 아이디를 갖지고 있는 요소를 찾아 해당 요소의 클래스값을 추가 혹은 삭제해주며 해당 클래스값에 부여된 css 요소를 조절하는 것이다.

- position: sticky

• 인스타그램의 헤드 부분과 오른쪽 메인 바디 부분의 고정을 위해 사용했다. position: sticky 속성을 부여하면서 동시에 위에 있는 헤드에는 top: 0;을 부여하였고, 오른쪽에 있는 메인 바디에는 right: 0;과 margin-right 값을 부여해 위치를 조정해 주었다.

.insta-head { /*맨 위의 상단 바*/
    background-color: white;
    border-bottom: 1px solid #dddddd; /*상단 바 하단에 선을 그어줌*/
    margin-bottom: 20px; /*아래의 메인 바디 부분과의 거리를 둠*/
    width: 100%;

    align-items: center;
    justify-content: space-between;

    /*헤드 부분을 화면 상단에 고정시켜 스크롤 시 내려가지 않도록 조치*/
    position: sticky;
    top: 0;
}
.right { /*본문의 오른쪽으로 조그만 프로필과 추천 항목이 들어갈 부분*/
    width: 325px;
    height: auto;
    padding: 20px;

    margin-bottom: 20px;
    float: right;
    background-color: transparent;

    /*오른쪽 본문을 해당 위치에 고정시키기 위해 조치*/
    margin-right: 300px;
    position: fixed;
    right: 0;
}

- hover 기능

• 폰트어썸에서 가져온 아이콘에 hover 기능을 첨부해 테두리 색을 마우스가 올라가면 바뀌도록 설정하였다.
• 해당 호버 기능을 통해 아이콘 내부의 색도 변경하고 싶었지만, 해당 부분에 대한 구현은 하지 못했다.
• 추가적으로 원래 인스타그램과는 조금 다르지만 인스타그램의 피드 부분의 사진에 마우스를 가져가면 사진이 팝업되면서 댓글창이 같이 나오는 기능을 구현해 보고 싶었는데 지금의 나에겐 너무 큰 꿈이었다. 이전 프로젝트에서 썼던 마우스를 가져가면 사진이 조금 커지는 기능을 좀 더 연구해 연결시켜 구현하도록 할 것이다.

- flask 연결

• 사실 이 부분은 정말 하고 싶었다. 이미 생각해 놓고 코드까지 다 짜놨는데 서버 연결했더니 내 html이 그냥 박살이 나 있었다.
• 다음 프로젝트부터 이 부분을 많이 하게 될 것 같은데 이 부분은 꼭 조언을 얻고 고치고 넘어갈 것이다.

😭 시연 영상 첨부

]https://youtu.be/lbFwYirj7x4

KPT 회고

KEEP(유지하고 싶은 부분)

• 내일배움캠프를 시작하기 전에도 구글링은 키보드에서 불이 나게 많이 했다. 그러다가 안되면 포기했다. 그런데 지금은 내가 해결하지 않으면 안되는 개인 프로젝트이기도 하고 팀원들과 지식을 공유하는 그 과정이 너무 좋아 뭐라도 더 찾아보려 하고, 팀원에게 더 맞는 지식인 것 같으면 서로 공유하는 그런 우리 팀 문화도 좋다.
• 이번 개인 프로젝트도 서로의 것을 화면 공유해 시연하면서 보여주는 것을 많이 했다. (우리 팀은 그냥 내가 작은거라도 하나 하면 보여주고 자랑하고 피드백을 받는다.) 각자의 구현 아이디어도 다르고 하나를 구현하더라도 접근 방식이 다 달랐다. 이 부분이 너무 좋았다. 배울 점이 많은 것 같다.

PROBLEM(문제점 및 해결방안)

• 와이어프레임 제작

  • 나는 와이어프레임은 꼭 제작하고 프로젝트를 진행한다. 그런데 항상 아이패드로 그리게 된다. 일부러 유도하는 것은 아닌데 나에게 제일 편한 방법이라 그런 것 같다. 다음에는 피그마 같은 좋은 도구를 한 번 활용해 보고 싶다.

    

• 부트스트랩 사용

  • 나는 부트스트랩 사용이 나쁘다고 절대 생각하지 않는다. 내가 구현하지 못하는 부분에 대해서만 사용하면 시간도 아끼고 내가 생각하는 기능도 직접 코딩하는 것보다 잘 구현할 수 있고, 이쁘기도 한 것 같기 때문이다. 하지만 결국 초반 프로젝트는 내가 기본기를 얼마나 낼 수 있느냐는 것도 기반에 껴져 있는데 뭐라도 어려운거 하고 싶어서 너무 설친 것 같다는 생각도 든다. 나의 레벨에 맞는 것을 화려하지 않더라도 오류하나 없이 깔끔하게 만드는 것이 현재의 나에게는 가장 중요하지 않나 싶다. 다른 사람들의 것을 보고 불안해 하지도 말고 안주하지도 말아야 된다. 그들과 나의 삶은 다르고 보고 느낀 것도 다르니까 일단 내가 할 수 있는거에 최선을 다하자. 미니멀리즘

• flask 관련 오류

  • 해당 부분은 꼭 짚고 넘어가야 할 부분 같다. 이제 해당 오류가 난 부분이 모든 프로젝트의 주축이 될 부분인데 첫 단추를 잘못 꿰면 망할 것 같다. 원인을 알아내 디버그하고 코드를 수정할 것이다.

TRY(다음을 위한 노력)

• flask 코드 수정
• 반응형 웹에 대해 어느정도 구현하였지만 창이 줄어들면서 요소들에 가해지는 변화가 너무 딱딱했다. 부드러워질 수 있도록 수정해야 겠다는 생각이 들었다.
• 내가 가진 코드들을 한 번 싸악 훑고 정리할 수 있는 시간을 가져야 겠다는 생각을 했다. 코드가 더 늘어나기 전에.
• 주석을 다는 거는 저번보다 아주 좋아졌다. 이거보다 더 많이 신경써서 비전공자인 내 친구들이 보고 아 이렇게 흘러가는거야? 라는 반응을 보일 수 있을 때까지 노력할 것이다.

FEEL(느낀점)

• html이랑 css는 해도해도 어렵다. 근데 신기한 게 하다보면 나도 모르게 치고 있다. 아는 것을 다 토해내가면서 수정하고 있는 내가 나도 신기하긴 하다. 물론 이거보다 훨씬 잘해야 하지만 그래도 이전보다는 많이 나아진 것 같다. 혼자 고민하고 찾아보고 수정하는게 재미있다. 새벽 4시까지 혼잣말하면서 코딩하는게 가끔 보면 미친놈 같기도 하지만 재미있다. 공부가 재밌다고 느껴진게 진짜 오랜만이라 요즘 힘들면서도 행복하다.