[11월 3주차] 웹개발 미니 프로젝트 후기 (feat. 항해99 1주차)

드디어 항해 1주차 미니 프로젝트가 막을 내렸다. 1주차를 해보면서 정말 막막한 점도 많았고 그걸 극복하면서 성취감과 뿌듯함을 느낄 수 있었고 점점 개발자화되어가는 내 자신을 발견했다. 정말 하루하루가 마치 내 인간성을 개발자로 개조해나가는 기분이었다. 그만큼 힘들었지만 보람차기도 했다.

 

완성된 결과물의 유튜브 링크다.

우리조는 자취생을 위한 레시피를 올리는 게시판을 컨셉으로 했다. 간단한 요리를 올리는 게시판이다보니 5줄 이내로 올리도록 하는 "Five Line Recipe"라는 이름으로 하였다. 내가 초반에 맡은 부분은 로그인/회원가입 페이지를 구현하는 것이었는데 이에 필요한 쿠키와 토큰의 개념을 처음 접하다보니 생소한 점이 많았다. 로그인이 성공하면 쿠키라는 브라우저 임시저장소에 JWT토큰을 저장하여 해당 계정에 로그인했음을 증명하게 된다는 것이다. 그래서 토큰의 유효시간이 지나면 다시 로그인을 해야하는 것이다. 이는 게시물 삭제 버튼 구현에서 요긴하게 사용하였는데, 게시물 삭제버튼을 누르면 토큰에서 가져온 사용자의 닉네임과 게시물 작성자의 닉네임을 DB에서 가져와서 서로 if문으로 대조한 뒤에 일치하면 DB에서 해당 데이터를 삭제하고, 일치하지 않으면 "당신의 게시물이 아닙니다."라는 경고창이 뜨도록 하였다.

 

사실 로그인/회원가입 창보다 막혔던 부분은 레시피를 사용자가 포스팅했을 때, 그 데이터에 맞게 새로운 게시물을 만드는 것이었다. 지금까지는 놀랍게도 페이지를 단 하나(!)밖에 만들어보지 못해 개별적으로 새롭게 만들어지는 페이지를 어떻게 만들어야할지를 도통 몰랐다는 것이다. 또 사용자가 작성한 레시피 데이터에 번호를 부여하여 순서대로 메인페이지에 불러와야하는데 이조차도 막막했다. 그때가 제출 전날 밤 11시였다. 나를 포함한 모든 조원이 이를 어찌해야할지 몰라 손을 놓고있었다. 그러다가 이러다 큰일나겠다싶어 아는 다른 조원들에게 물어보기 시작했다. 몇몇 분들 역시 몰랐고, 어느 정도 실력이 있으신 분에게 울상으로 물어보니 알려주었다. 

function click() {
        const divEle = document.querySelectorAll('.card');
        console.log(divEle);
        for (let i = 0; i < divEle.length; i++) {
            const titleEle = document.querySelectorAll('.card-title');
            const text = titleEle[i].innerText;
            console.log(text);
            divEle[i].addEventListener('click', function () {
                console.log('클릭됐습니다!');
                window.location.href = '/showrecipe?title=' + text;
            });
        }
    }

위에 코드를 실행하면 놀랍게도 클릭을 하면 해당 레시피 메뉴의 이름을 도메인에 추가하여 새로운 페이지가 열리게된다. 그리고 해당 페이지의 html이 있는 파일인 showrecipe로 이동하게 되고 showrecipe에 와서도 역시 getID()함수를 통해 레시피 메뉴 이름을 가져와 API호출시 아래와 같이 데이터에 넣어준다.

data: {title_give: getId()}

그럼 해당하는 메뉴의 데이터를 html에 그대로 넣어 미리 설정한 css에 맞게 페이지가 구현되는 것이다! 해당 메뉴 이름을 도메인에 넣어줄때는 아래의 코드로 해당 메뉴의 이름을 가져와서

const text = titleEle[i].innerText;

다음과 같이 메뉴이름을 추가하여 도메인을 만들 수 있게된다. 또한 이렇게 도메인이 생기는 과정은 addEventListener를 활용하여 해당 메뉴가 클릭 이벤트가 발생할 때 생기도록 한 것이다.

window.location.href = '/showrecipe?title=' + text;

이때 이후로 그나마 감이 잡혀 새벽 4시반까지 같은 방법으로 레시피 게시물 페이지의 댓글기능을 구현할 수 있었고, 그 다음날 제출 전까지 삭제기능을 구현하여 완성할 수 있었다. 해당 내용이 웹개발 플러스 강의에 나오는 것 같은데 이번 기수에서는 그 강의를 나중에 라이브로 한다고 온라인으로 지급이 안되어 더 힘들었던 것 같다ㅠㅠ

 

한가지 느낀 점은 단순히 혼자서 독학하면서 이 내용을 터득했으면 편하긴 더 편했겠지만, 뭔가 실전에서 부딪혀보면서 그 기능의 필요성을 더욱 깨달은 것 같다. "여러개의 게시물들이 있는 메인페이지에서 특정 게시물을 클릭했을때 그 특정 게시물의 레시피 메뉴 이름에 해당하는 페이지를 어떻게 알고 나타낼까?"에 대한 고민을 많이 했기 때문이다. 마치 클릭을 했을 때 해당하는 메뉴의 이름을 해당 페이지에 전송하는 것 같은 기능이 있으면 좋겠다고 생각했는데 그 욕구에 대한 궁금증이 해소되면서 해당 개념이 더욱 각인된 것 같다.

function getId() {
    const urlParams = new URLSearchParams(location.search);
    console.log(urlParams.get('title'));
    return urlParams.get('title');
}

 

위의 getId()함수가 바로 해당 메뉴 페이지의 도메인에 부여된 메뉴 이름을 실행한 html 파일로 가져오는 함수이다. 그렇게 되면 해당 페이지에서 무슨 메뉴를 다뤄야할지 알기 때문에 그 메뉴에 해당하는 데이터를 DB에서 불러와서 그대로 보여주기만하면 된다.

 

요약하자면...

addEventListener로 메인페이지에서 특정 메뉴 클릭 시 그 메뉴이름을 덧붙이고 메뉴의 상세를 나타내는 html로 넘어가도록 하는 도메인이 생기도록 하기 -> 메인페이지에서 메뉴 클릭 -> 그 메뉴의 이름으로 페이지를 만든 뒤, 지정한 html로 넘어가기 -> 받아온 메뉴 이름을 getId()함수를 통해 불러와 API 호출 시 데이터를 넣어주어 DB에서 그 메뉴의 데이터를 가져오기 -> html 해당 데이터를 추가하고 지정한 css에 맞게 페이지에 나타내기

 

한편으로는 깃을 활용한 협업은 처음이다보니 매우 어색하고 어렵기도했다. 처음에 다른 사람들의 커밋을 풀한 뒤에 합치는 작업을 할 때 혼돈스러운 점이 많았는데 이번을 계기로 어느 정도 소스트리를 사용하여 깃을 사용하게 되어 뿌듯하다.

 

그리고 어찌저찌 우여곡절이 많았지만 결국 서버까지 완성도 있게 되면서 최종적인 결과물로 잘 마무리한 것 같아서 꽤나 성공적이었다고 생각한다. 앞으로 밤샐 일이 많을 것 같아 두렵기도 하지만, 즐기는 마인드로 실현해나가고 싶다.