[TIL] 2022.05.10 (인스타 UI 클론 코딩 - 팀 프로젝트4)

: 지난 TIL :

https://sdrtst.tistory.com/34

[TIL] 2022.05.09 (인스타 UI 클론 코딩 - 팀 프로젝트3)

 

오늘은 어제에 이어 Feed 부분을 수정하고자 했다.

 

해당 No 부분을 Ok 부분으로 내려보내기 위해..

 

해당 사진처럼 picture_boxes의 공간을 뚫고 이미지가 No의 위치로 계속해서 넘어갔기에 빠른 수정이 필요했다.

처음에는 반복문(for문)을 써야 할지 조건문(if문)을 써야 할지 고민을 계속했고, 이것저것 시도를 해보며 오류와 싸워냈다.

 

그런데..

 

하나의 picture_boxes에만 img 박스가 들어가는 모습

if (i % 3 == 0) {
    let feeds_add_html = `<div class="picture_boxes" id="feed-box"></div>`
    $('#feeds-box').append(feeds_add_html)
}

// 해당 a 부분에 로그인 시 사용된 user_id값으로 바꿔줄 것
if (user_id == 'a') {
    let feed_add_html2 = `<div class="picture_box">
                            <img src=${img} alt="">
                         </div>`
    $('#feed-box').append(feed_add_html2)
}

 

해당 부분에서 계속 무한반복이 되었다.

 

3의 배수마다 생성되는 picture_boxes에 3개씩 이미지가 들어갔으면 좋았으나, 코드를 잘못 만들어둔 탓인지 계속해서 하나의 picture_boxes에 맴도는 모습을 볼 수 있었다.

 

그래서 결국 주변의 도움을 받아 해결책을 강구했다.

 

그렇게 머리를 쥐어짜던 도중 let feeds_add_html에 들어가는 id 요소가 계속해서 중복되는 것을 찾아냈고, 고유한 값을 가지는 id를 picture_boxes가 생성될 때마다 다른 id 값을 가지게끔 설정해주기로 했다.

 

let cnt = 0;
let i_idv = "feed-box";
let f_idv = "";

 

해당 코드를 수정해주기 전에 다음과 같은 변수들을 먼저 선언해주었다.

let cnt는 picture_boxes에 들어가는 id 뒤에 숫자를 붙여주도록 만들어주는 변수이다.

let i_idv를 통해 feed-box라는 id 문자를 만들어주었고, let f_idv에는 초기값으로 공백을 주고 추후에 cnt와 i_idv가 합쳐진 값이 들어가도록 설정해줄 것이다.

 

이렇게 해서 완성된 코드는 다음과 같다.

 

if (i % 3 == 0) {
    f_idv = i_idv + cnt;
    let feeds_add_html = `<div class="picture_boxes" id=${f_idv}></div>`
    $('#feeds-box').append(feeds_add_html)
    cnt+=1;
}

if (user_id == 'a') {
    let feed_add_html2 = `<div class="picture_box">
                            <img src=${img} alt="">
                         </div>`
    $('#'+f_idv).append(feed_add_html2)
}

 

원래 사용하던 코드와 달라진 점이 있다면 if (i%3==0)의 조건문에서 f_idv 변수에 i_idv와 dnt 값을 더해주었고, 해당 조건문이 실행될 때마다 cnt가 1씩 증가하도록 설정해주었다.

이후 let feeds_add_html에서 id='feed-box'로 이루어진 부분을 생성될 때마다 계속해서 변경되도록 id=${f_idv}로 바꿔주었다.

 

그리고 하나의 picture_boxes 안에 다수의 picture_box가 계속 생성되는 것을 막아주기 위해 $('#feed-box)를 $('#'+f_idv)로 바꿔주었고, 바뀐 feed-box(n) id가 속한 div 구역 안에 해당 이미지가 생성되도록 변경해주었다.

 

이미지가 3개씩 하나의 구역에 들어가는 모습

 

해당 모습과 같이 id값이 feed-box0, feed-box1처럼 증가되는 모습을 볼 수 있었고, 해당 id 구역에 맞는 사진들이 들어가는 모습을 볼 수 있었다.

 

이번 계기를 통해 이런 식으로도 쓸 수 있구나..라는 경험을 얻어 좋은 계기가 되었다고 생각한다.

 

-

 

이후에는 각 팀원들이 맡은 역할들을 최종적으로 합쳐보려고 시도해보았다.

처음에는 git을 이용하여 github에 코드를 올리고 사용하려고 했지만, 아직은 git 사용이 미숙했던지라 단순 commit과 push를 하며 코드를 올리는 용도로 사용하였다.

 

그래도 코드들이 원격 저장소인 github에 올라가긴 해서 올라간 코드들을 보며 모두의 코드를 합치면서 프로젝트를 진행하였다.

 

하지만..

 

이후 일어날 일들을 겪어보니 순탄하게 진행되면 그것은 코드가 아니었다..라고 생각된다.

잦은 오류가 발생하고 기능들이 정상 작동하지 않는 부분들이 여럿 일어나서 모든 코드들을 병합하는데 많은 시간을 소요했다. (~ing 아직도 현재 진행형..)

 

오늘 내로 끝내야 할 텐데...

 

:T