[TIL] 05/10 항해99 2일 차 - 미니프로젝트

 

들어가며

항해99 2일차의 날이 밝았다.

1일차에는 미니프로젝트 기획을 하고, figma로 와이어프레임을 짰는데 팀원 모두 처음하는 팀프로젝트여서 체계를 만드는 데에 어려움이 많았다. 서로 소통하고 맞춰가면서 점점 체계가 잡혀가는 모습을 보며 협업 감각을 익혀나가는 방법을 서서히 배워나가고 있다.

혼자 프로젝트를 할 때에는 모르는 부분을 파워 구글링으로 삽질했는데 팀원과 함께하니 혼자보다 확실히 수월하게 해결하게 된다. 

 

오늘의 TIL은 트러블 슈팅와 깃허브를 이용해 체계를 잡아가는 과정을 적어보고자 한다!

---

트러블 슈팅

문제 1.  Ajax 400 bad request에러

function category(tech_give) {
        alert(tech_give)
       $.ajax({
            type: "GET",
            url: "/category",
            data: {tech_give: tech_give},
            success: function(response) {
                var rows = response["cards"]
                console.log(rows)
            }
        });
    }

 

각 카테고리의 버튼을 클릭했을 때, ajax통신을 이용하여 데이터를 넘겨주고 가져오는 방식을 구현하기 위해 위와 같은 코드를 짰으나 400 bad request에러가 나타났다.

 

그동안 자주 썼던 코드라서 ajax 코드에는 문제가 없다고 생각했는데 어디서 에러가 나타난지 모르겠다.

 

해결

백엔드 프레임워크로 Flask를 사용하고 있는데, 문법을 잘 몰라서 생긴 에러였다.

Flask에서 클라이언트가 보내준 데이터를 가져올 때, GET방식과 POST방식을 다르게 가져와야 한다.

//GET 방식
request.args['tech_give']

//POST 방식
request.form['tech_give']

ajax에서 GET 방식을 이용해서 데이터를 보내주고 있었는데 서버에서는 request.form을 사용하고 있어서 나타났던 에러였다.

 

 

문제 2. a 태그에 href="#" 속성을 이용했을 때, 페이지가 상단으로 올라가는 문제

a태그에 href="#"을 이용하면 페이지가 상단으로 올라가는 건 알고 있었지만, e.preventDefault()를 사용하면 해당 기능을 막을 수 있다고 알고 있었는데 적용이 안됐다. 

 

해결

<a href="javascript.void(0);">여기에 이름을 써주세요</a>

구글링을 해본 결과, a태그의 href속성에 javascript.void(0);를 붙여주면 해결된다!

 

 

Git-Flow

우린 Git-flow를 사용하고 있어요

우린 Git-flow를 사용하고 있어요 | 우아한형제들 기술블로그

 

나 포함 모든 팀원이 깃허브를 이용한 협업을 해보는건 처음이라 제대로 된 깃허브 협업방식을 모르고 각자 브랜치를 만들어서 사용하고 있었다. 그러다보니 각자의 프로젝트 세팅이나 구조가 달라서 파일을 합치기 어려워 서로의 코드를 깃허브 사이트에 들어가서 일일히 긁어와야해서 불편함이 많았다.

 

프로젝트 구현 중반쯤이 되어서야 깃허브의 브랜치 전략을 제대로 짜는게 중요하다는 생각에 팀원들과 얘기해서 위의 우아한 형제들의 글을 바탕으로 브랜치 전략을 짜기로 했다.

 

완벽하게 전략을 짠건 아니지만 초보 개발자가 할 수 있는 최선을 다해 브랜치 전략을 다음과 같이 짰다.

 

master - 최종적으로 제출하기 위한 코드가 담기는 브랜치

develop - 개별적으로 작업하던 코드가 끝나면 merge해서 팀원들에게 공유하는 브랜치. 직접 push하지 말고 꼭 feature에서 merge하기

feature/이름 - 본인이 맡은 부분을 개발하는 브랜치. develop에 merge가 완료되어도 삭제하지 않고 계속 작업함

 

이렇게 브랜치 전략을 짜두었음에도 불구하고 충돌이 일어나는건 깃허브에 익숙치 않아서 생기는 문제라고 생각하기 때문에 앞으로 고쳐나가면 되는 부분이라고 생각한다. 다행히 내가 깃허브에서 수많은 에러를 내고 해결해본 경험이 있어서 충돌을 어렵지 않게 해결할 수 있었다! 역시 개발은 많은 에러를 마주하면서 실력이 는다...

---

마치며

브랜치 전략을 짜면서 협업은 사전에 체계를 제대로 잡고 시작해야한다는 걸 깨달았다!! 

그리고 서로 개발파트를 나눌 때, 이슈를 작성하지 않고 구두로 나누다보니까 헷갈리고 merge할 때 충돌하는 경우도 잦아서 이슈관리의 중요성을 다시금 깨달았다.. 이번 프로젝트가 꽤 많이 진행되어서 지금부터 이슈관리를 하기엔 늦은감이 없잖아 있지만 내일 한번 의견을 내봐야겠다.