TIL 18) 2022.05.11 (수) | 인스타 클론 코딩 회고록

[팀 프로젝트 내용]

What I Did?

"인스타그램 클론 코딩" - Team project

 

프로젝트 요약

2022.05.12 - [Final Product/Team Projects] - [팀 프로젝트 01] 인스타 클론 코딩

• 프로젝트 개요 및 역할분담
• 기능구현 진행도
• 구현시 어려웠던 점

 

우리 프로젝트에서 수정/추가했으면 좋겠는 점

 

[기능구현 부분]

• 댓글 카운트기능
• 피드 불러오는 방식이 바뀌면서 미작동하는 (피드 desc 가 길면 ... 더보기로 바꿔주는) 함수  수정
• 팔로워 모달창에서 팔로우를 중복되는 점
• 마이프로필 페이지에서 피드 사진에 마우스 올리면 좋아요, 댓글 카운트 표시 되게 하는 것
• 상세페이지 추가

[기타]

• 기능을 추가로 구현할 때마다 복잡해진 함수 리팩토링
• 코드리뷰를 프로젝트 기간 안에 하지 못한 점

 

[프로젝트 결과물]

(팀 깃허브) minkkky/instagram_flask (github.com)

---

[우리팀이 받은 피드백]

 

[매니저님]

• 노션을 잘 사용해서 해야할 일과 한 일을 잘 구별해 놓은 점
• 충실한 필수 기능 구현

 

[A 튜터님]

• 추천 회원 랜덤으로 보여주는 기능이 좋았다.
• 피드 수정 기능이 잘 구현돼서 인상 깊다.
• 팔로워-팔로잉 구현을 충실히 한 것 같다.
• 반응형 웹으로 구현한게 좋았다.
• 팀원들의 역할 설명이 기능별로 자세히 해둬서 이해하기 좋았다.
• 성공적인 클론 프로젝트!

[B 튜터님]

• 레이아웃이 깔끔하다.
• 프론트 쪽에 신경 많이 쓴게 느껴진다.
• 팔로워-팔로잉 관리가 잘 돼서 좋다.
• 모달창에 팔로워, 팔로잉 목록 보여주고 그 안에서 삭제 및 추가하는 기능이 인스타그램 클론에 충실한 것 같다.
• 피드에 위치 추가하는 기능을 넣은 디테일이 좋다.

---

KEEP

• Git merge 할 때 화면 공유 하고 다같이 보면서 하는 것
• 식사 30분 전에 함께 진행상황 공유하는 것
• figma, 구글 시트 등으로 자료 정리하고 문서 작성한 것

 

PROBLEM

 

[팀 프로젝트]

• merge의 단위가 너무 컸던 것
• 하나의 파일을 수정할 때 순서를 정하지 않고 임의로 작성한 것
• 코드 컨벤션 잘 지켜지지 않은 것
• 깃허브 기능 적극적으로 사용하지 못한 것 (위키, 리드미, 이슈 등)
• 테스트 데이터 베이스를 따로 생성하지 않은 것

[개인적으로 어려웠던 점]

• 어떤 데이터가 어떻게 필요한지 몰라서 로직을 짜지 못하는 점
• python의 flask 부분과 javascript의 ajax 부분을 매끄럽게 연결지어 생각하지 못하는 점
• 코드 한줄한줄을 다 이해하지 못해서 다른 사람의 코드를 보고 '왜 이 코드를 썼을까?' 생각하지 못하는 점

 

TRY

• 하루 일과가 끝날 때마다 merge 수행하기
• 그라운드 룰을 자세하게 정해두고 지키기
• 다음 프로젝트에서는 깃허브의 기능들에 대해 더 알아보고 사용
• 원본 데이터 베이스와 프로젝트를 테스트 할 때 쓸 데이터 베이스를 분리

 

REMINDER

 

[프로젝트에 들어간 코드 내걸로 만들기]

 

좋아요 기능을 구현하는 함수

let temp_like_html = ``

if (post["heart_by_me"] == true) {
    temp_like_html = `<div class="like click" onclick="updateLike(this)"></div>`
} else {
   temp_like_html = `<div class="unlike click" onclick="updateLike(this)"></div>`
}

// ... 좋아요
function updateLike(obj) {
    let post_id = $(obj).closest('.card').attr('id')

    if ($(obj).hasClass('unlike')) {
        $.ajax({
            type: "POST",
            url: "/api/like",
            data: {post_id_give: post_id, action_give: 'like'},
            success: function (response) {
                console.log("like")
                console.log(response["count"])
                $(obj).addClass('like').removeClass('unlike')
                $(obj).closest('.post_icon').next().find('span#like_cnt').text(response["count"])
            }
        })
    } else {
        $.ajax({
            type: "POST",
            url: "/api/like",
            data: {post_id_give: post_id, action_give: 'unlike'},
            success: function (response) {
                console.log("unlike")
                $(obj).addClass('unlike').removeClass('like')
                $(obj).closest('.post_icon').next().find('span#like_cnt').text(response["count"])
            }
        })
    }
}

1. 포스트카드 전체를 감싸는 card 클래스에 id값을 (<div class="card" id="${post['_id']}"> ) 이렇게 준 이유

- 유니크한 id값 부여를 위해서

- db에 저장되는 post_id를 붙여줌으로써 다른 함수에서 이용하도록 하기 위해서

 

2. 코드를 상대경로로 쓴 이유

- 피드를 getFeed() 함수에서 temp_html을 통해서 append로 반복해서 붙여주기 때문에 좋아요를 누른 포스트를 찾을 수 없어서

- onclick 이벤트가 발생한 div 태그를 이용해서 id로 붙여준 post_id를 찾기 위해서