TIL 2022.05.02 인스타그램 클론 코딩 - 3 (KPT 회고, 미디어쿼리)

금요일과 주말간에 완료해뒀던 필수사항 부분들에 대해서 CSS 코드들을 정리해서 css 파일로 코드를 최대한 옮기는 리팩토링을 진행했으며 추가 구현 사항으로 미디어 쿼리를 이용하여 반응형 웹을 만드는 것과 게시글 내용이 일정 글자 수를 초과하게 되면 생략되고 더보기 버튼을 만드는 기능을 추가했다.

 

추가 구현 부분을 더 하고 싶었지만 반응형 웹을 만들기 위한 미디어쿼리를 이해하는데 꽤나 시간이 들었고 기존에 만들어 져있던 섹션들이 position : fixed 하게 되면서 바뀌는 모양들을 다시금 바로 잡고 조정하느라 꽤나 골치를 앓았다.

 

검색을 통해서 다양한 코드들을 시험해보는 것은 좋은 것 같지만 확실하게 분석하고 이해를 한다는 가정하에 집어넣어서 사용할 수 있게 되는 것 같다. 그래서 하나씩 넣어보면서 모양을 다시금 잡아가서 반응형 웹을 구현하는데 시간이 꽤 걸린 것같다.

 

더보기 버튼의 경우는 아무래도 자바스크립트를 이용해야되는 부분이다보니 비슷한 예제를 그대로 적용해서 사용하는 방법으로 진행을 했다. 원래라면 서버와 연결을 하거나 변수를 써서 반복문을 통해서 id 값을 게시글마다 다르게 지정해줘서 모든 게시물에 더보기 버튼을 사용할 수 있도록 할 수 있었으면 좋았을텐데 시간이 너무 부족해서 우선 일단은 첫번째 게시글만 적용될 수 있도록 구현을 해보았다.

 

이번에 인스타그램 UI클론코딩을 하면서 다른 것보다 이것저것 검색을 통해서 찾은 레퍼런스들을 이해하고 내 코드에 녹여내는 그런 연습을 많이 한 것 같다. 프론트엔드 부분을 한번 더 연습하는 좋은 계기가 되었고 앞으로 템플릿을 통해서 작업을 할때 템플릿을 해석하는데 보다 빨리 이해를 할 수 있지 않을까 하는 생각이 든다.

 

branch에서 main으로 push하려고할때 발생되는 non-fast-forward 오류

작업 중간중간 git에다가 commit을 하면서 큰문제없이 push를하면서 작업 진행을 해왔었으나 나중에 확인해보니 main에다가 작업이 계속 덧씌워지고 있었던 것이 아니고 다른 branch에 commit push가 되고 있었다. 이후에 branch에 있는 작업들을 main으로 다시 push 하려고하니 non-fast-forward 오류가 나서 확인을 해보니 워낙 여러가지가 나와서 어떤거에 해당하는지 알기엔 시간이 너무 없어서

 

어차피 main에 내용은 하나도 없었기때문에 force 설정을하여 push를 하는 방법으로 main을 업데이트하고 그 뒤에 README도 추가해서 git에도 저장을 완료해두었다. 이후 재차 오류가 발생했을 때 우선 main을 먼저 pull로 받아온다음 push를 하니 정상적으로 push가 잘되었다.

 

다음부터는 force 기능은 최대한 유사시에 사용하고 한가지씩 방법을 사용해서 해결을 해야하겠다.

사이트의 헤더

UI를 따라 만드는 것이기 때문에 버튼과 검색은 동작 하지 않음

1. 검색어를 입력할 수 있는 검색창
2. 오른쪽 상단의 아이콘들
   1. 옵션 : Font Awesome 에서 아이콘을 갖고 올 수 있습니다!

사이트의 본문

1. 두개의 단으로 나누어야 합니다.
   1. 왼쪽 단에는 게시글들이 나열됩니다.
   2. 오른쪽 단에는 프로필사진/이름/설명과 Follow 버튼이 있는 네임카드 리스트가 있습니다.
2. 게시글 : 최소 세개의 게시글이 표시
   1. 상단에 네임카드가 배치,
      1. 옵션 : ... 버튼을 오른쪽에 배치하고 클릭시 모달이 등장하게 할 수 있습니다
   2. 본문에는 사진이 한장또는 여러장을 carousel을 이용해 표시
   3. 좋아요/댓글/메시지송신 아이콘이 사진 아래 배치
   4. 아이콘들 아래에 사진에 대한 설명이 추가
      1. 옵션 : 글자수가 일정수준 이상이 되면 더보기 버튼을 추가하고 길이를 줄일 수 있습니다. 
      2.          (첫번째 게시글 한정으로 하드코딩)
   5. 설명 아래에 댓글 리스트가 표시
   6. 댓글 작성하는 칸과 게시버튼이 추가

사이트의 Footer

1. Footer
   
   1. 오른쪽 단 Footer를 만들어서 본인의 이름을 기입완료

추가 구현

1. 반응형 웹
2. 모달로 상세페이지는 열리나 아직 상세페이지 내용 구현 X

- cloneInstargram git 주소

https://github.com/Aeius/cloneInstargram.git

GitHub - Aeius/cloneInstargram: 인스타그램 클론코딩

 

반응형 웹을 만들면서 쓴 미디어 쿼리

mystyle.css

/* 미디어의 넓이가 1200px 이하면 검색창과 오른쪽 프로필 섹션 사라집니다.*/ 
@media ( max-width: 1200px) {
    /* 메인 피드 부분 크기 조절 */
    .main_section {
        width: 100%;
        height: 100%;
        position: relative;
        left: 2%;
        right: 12%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* 검색창 없어짐 */
    .search_box {
        display: none;
    }
    /* 오른쪽 프로필 부분 없어짐 */
    .right_section {
        display: none;
    }
    /* 네비바 조절 */
    .container-fluid {
        max-width: 480px;
    }

}

프로필이 출력되는 오른쪽 섹션으로 고정했을때 메인 섹션과 겹치는 현상이 발생되어 메인섹션에도 position: realative를 추고 right 값을 퍼센티지로 줘서 반응형웹에 맞춰서 크기가 변경되도록 해서 해결을 함

.right_section {
    width: 400px;
    height: 100%;
    position: fixed;
    left: 62%;
    margin-top: 80px;
}

/* 섹션 구분 */
.main_section {
    max-width: 600px;
    width: 95%;
    height: 100%;
    position: relative;
    margin-top: 80px;
    right: 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

 

 

더보기 버튼 구현을 위한 자바스크립트

<!-- 더보기 버튼 활성화 및 닫기 자바스크립트 -->
function showplay() {

        var SynopsisDiv = $('.content_box');
        var flagValue = $("#synopMore").text();
        if (flagValue == "더보기") {
                //보이지 않는 영역을 다 보일수있도록 heigh와 width를 auto로 지정
                SynopsisDiv.css("width", "auto");
                SynopsisDiv.css("height", "auto");
                $("#synopMore").text("닫기");
        }
        else {
            //다시 css를 원래대로 보일수 있도록 변경*/
            SynopsisDiv.css("width", "210px");
            SynopsisDiv.css("height", "20px");
            $("#synopMore").text("더보기");
        }
    }

<!-- 닉네임, 작성 글 내용-->
<div class="profile_box">
    <div>
        <div>
            <a href="index.html"><b>mokoko</b></a>
        </div>
        <div class="content_box">
            <span class="content">
                무시무시한 궁당장들 어렵지만 재밌다!<br>😊🤣👊💪
            </span>
        </div>
        <a href="javascript:showplay();" class="btn_more" id="synopMore">더보기</a>
    </div>
</div>

.content_box {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 210px;
    height: 20px;
}

코드 자체는 인터넷에 있는 레퍼런스를 가져와서 그대로 적용시키기 위해선 어느정도의 코드를 이해하고 가져와서 적절하게 붙여넣어서 내 코드에 맞게 class값과 css에 적용해야 될 값 width값과 height을 수정해서 작동할 수 있도록 구현을 했다.

 

id 값을 이용하다보니 게시물 하나에 밖에 적용안되는 점을 현재 상태에서도 하나의 함수로 여러 게시글에 적용할 수 있는지는 모르겠다. 물론 하드코딩으로 showPlay()함수 안에 synopMore1 , synopMore2 ... 해서 만들면 가능하긴 할텐데 그런 방식보단 역시 한방에 하는 방법을 나중에 좀 찾아서 적용을 시켜봐야겠다. 변수를 어떻게 잘 조작하게 되면은 해당 변수에 synpMore1, 2... 한번에 집어넣어서 반복문 돌려서 그거에 따른 결과물 변경되도록 하면 될 것 같은데 우선은 여기까지 마무리를 지었다.

 

Keep

- 레퍼런스를 그냥 복사 붙여넣기 하기 보다는 확실히 이해를 하고 사용하는 부분

- 여러가지 방법으로 검색을 해보고 나에게 적절한 자료를 찾아서 사용

- 태그 정보들을 찾아본 후 원하는 구현을 위해 직접 일일히 입력해보고 테스트 해보는 것

 

Problem

- git (non-fast-forward) 오류

main을 pull해오지않아 발생한 오류로 처음에는 force를 통해서 강제로 push하였었지만 추후에도 계속 오류 발생되어 재차 검색을 통해서 확인하여 이후로는 정상적으로 push되도록 해결했다.

 

- 더보기 버튼 구현할때에 생각나지 않는 자바스크립트 함수들...

검색을 통해서 함수를 찾을지 아예 구현 레퍼런스를 찾을지 고민하다 결국 레퍼런스를 찾은 것

머릿속엔 어떤 식으로 코드를 짤지 대충 각은 보이지만 시간에 쫓기다보니 함수를 찾기보단 레퍼런스를 많이 찾았던 것 같다... 하지만 레퍼런스를 본다고해서 나쁜 건 아닌게 어쨌든 해당 레퍼런스를 보고 완벽히 이해는 하고 넘어 갔기 때문에 추후에 필요한 함수를 더하거나 빼거나 하는 식으로도 충분히 공부는 된다. 또 앞으로 어떤 식으로 코드를 짤지에 대해서도 여러 레퍼런스를 눈에 익혀야 더욱 쉽게 떠오르지 않을까 하는 생각이 든다.

 

- 기획서가 없는 부분

이번에는 개인프로젝트이다보니 더욱 기획서 작성 자체를 생각 못한점이 크다. 사실 큰틀도 과제에 구현 사항들            로 정리 되어있다보니 기획서 작성을 하지않았다.

앞으로 팀프로젝트가 진행될텐데 기획서 작성이 기한설정, 역할 분담, 기능테스트 등 정할 수 있고 또 포트폴리오로도 유용하게 사용할 수 있는 점이 있으니 중요하게 여겨야한다.

 

Try

- 머릿속에 들어있는 코드나 태그가 어렴풋이 기억나서 사용 때 마다 계속해서 검색을 해봐야하는데

  검색을 할때 뭔가 애매하게 기억이 나다보니 원하는 태그를 찾기 위해서라도 정리나 정의를 잘해줘야겠다.

  자주 쓰는 태그나 코드는 기억해두는 편이 좋을 것 같다.

 

- 자바스크립트 사용이 필수적이기 때문에 실제로 써보면서 복습이 반드시 필요할 것 같다.

 

- 팀프로젝트에서는 기획서, 목업등 시작할 때 정하는 것들이 굉장히 중요하기 때문에 작성법 등을 익히자.