떠나보조) 추천여행지 글쓰기 기능 만들기

안녕하세요! 

지난 시간에 떠나보조 프로젝트에 대한 소개와 전체 레이아웃에 대해서 후기를 말씀드렸어요!

 

오늘은 떠나보조 프로젝트에서 추천 여행지 글쓰기 기능을 어떻게 구현했는지에 대해서 말씀드릴게요!

계획

• 사진 파일 입력받는 기능 + 사진을 카드에 넣기
• 글쓰기 기능(정보 입력 받고, 카드에 넣기)
• 페이징 기능
• mongoDB 사용
• 백엔드 작업

어려움 및 해결하지 못한 부분

• 입력받은 사진 파일을 카드에 넣는 것  ---> 이모티콘을 넣는 것으로 변경
• 페이징 기능 ---> 스크롤 기능으로 변경

추천여행지 공유 서비스를 만들면서 처음 계획한 기능 중 해결하지 못한 부분이 생겼어요.

파일 입력받은 것을 카드에 넣는 것과, 페이징을 구현하는 것에서 문제가 생겼습니다.

 

해결을 위한 시도.. But.. 잘 안됨..;;

파일입력기능을 위해 서칭 끝에 ajax를 이용해서 업로드할 수 있다는 걸 알았어요. 유튜브로 ajax 관련 강의를 보면서.. 파일 입력까지는.. 어떻게 어떻게.. 해결했는데, 완전히 이해하질 못해서인지 파일을 카드에 넣는 것이 안되더라구요. 좀 더 시도해볼려다가 시간이 얼마 없는 관계로 계획을 바꿔서 이모티콘 입력으로 바꿔서 진행했습니다. 파일 입력 기능은 앞으로 좀 더 공부해서 완성해봐야겠습니다. 페이징도.. 자바스크립트로 하면 될 것 같은데..! 완성하지 못했어요ㅠㅠ 초반에 전체 레이아웃과 Css에 시간을 많이 써서 백엔드 기능 구현을 완성할 시간이 얼마 없었고, 더 고민을 못하고 다른 방향으로 대체하여 진행한 점에서 아쉬움이 많이 남습니다ㅠㅠ 

 

알게된 부분

• let 과 var의 특성을 이해할 수 있었다.
• 스크롤링 기능 + 스크롤바를 없애는 방법

1. let과 var의 특성 이해!

 

이모티콘 정보를 저장하고 가져올 때 if문을 썼는데,

이때 let을 썼다가 기능 구현이 안 되어서 그 이유를 찾는 과정에서 let과 var의 특성을 확실히 이해할 수 있었어요.

function listing() {
            fetch('/trip').then((res) => res.json()).then((data) => {
                let rows = data['result']
                $('#cards-box').empty()

                rows.reverse().forEach((a) => {
                    let comment = a['comment']
                    let name = a['name']
                    let place = a['place']
                    let icon = String(['icon'])
                    let star = a['star']

                    let star_repeat = '⭐'.repeat(star)
                    if (icon == "1") {
                        var icon_repeat = '😍';
                    } else if (icon == "2") {
                        var icon_repeat = '😎';
                    } else if (icon == "3") {
                        var icon_repeat = '😀';
                    } else if (icon == "4") {
                        var icon_repeat = '🤭';
                    } else if (icon == "5") {
                        var icon_repeat = '👻';
                    } else if (icon == "6") {
                        var icon_repeat = '👹';
                    } else if (icon == "7") {
                        var icon_repeat = '🤖';
                    } else { var icon_repeat = '🐲'; }

                    let temp_html = `<div class="card">
                                        <div class="col">
                                            <div class="card-body">
                                                <ul class="list-group list-group-flush">
                                                    <li class="icon">${icon_repeat}</li> 
                                                    <li class="nickname">${name}</li>
                                                    <li class="icon">${icon_repeat}</li> 
                                                </ul>
                                                <div class="card-list">
                                                    <li class="place">${place}</li>
                                                    <p>${star_repeat}</p>
                                                    <p class="yourcomment">${comment}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`
                    $('#cards-box').append(temp_html)
                })
            })
        }

이모티콘을 입력받으면, 이것을 숫자 값으로 db에 저장했어요.

숫자 데이터를 다시 이모티콘으로 바꿔서 append하기 위해서 if문을 썼습니다!

이 과정에서 알게 된 점은, let을 쓸 경우, if 문 안에서만 변수가 지정이 된다는 것이었어요.

즉, if문 안에서만 icon_repeat값에 이모티콘 데이터가 지정되기 때문에, if문을 나오면 icon_repeat 변수에 데이터가 없는 것이죠. 그래서 var를 사용하여 문제를 해결할 수 있었습니다! 

 

2. 스크롤 기능 + 스크롤바 없애기

 

페이징에 어려움을 느끼고 있을 때, 팀원분들께 제 어려움을 공유드리면서 한 분의 제안으로 페이징 대신 스크롤링 기능으로 변경하여 진행하기로 했어요.

overflow-x:hidden; /*세로스크롤바*/
overflow-y:scroll;
-ms-overflow-style: none; /*스크롤바 없애기*/
scrollbar-width: none;

페이징을 완성하지 못한 점이 아쉽지만, 그래도 나름대로 만족스러운 결과가 나와서 다행이었어요..

 

결과물

 

후기

• 앞으로 더 공부해야겠다는 생각을 했어요.
• 파일 입력 기능이나 페이징(자바스크립트) 기능에 대해서 더 공부를 해서 다음 번에는 꼭 구현해보자고 다짐하는 시간이었습니다.
• 그리고.. 다음부터는 우선순위를 백엔드 기능을 먼저 구현하고 나서 꾸미기는 나중으로 해야겠음을 느꼈습니다.
• 처음 계획을 세울 때.. 백엔드 기능에 대해서 제대로 계획을 하지 않고 시작한 점이 반성이 되었고, 다음 번에는 좀 더 백엔드에 치중하여 프로젝트를 진행해야겠음을 느꼈습니다.
• 아쉬움이 크지만, 그래도 다른 방향으로 대체하면서, 스크롤 기능이나 let과 var 사용할 때 주의점 등을 배울 수 있어서 좋았습니다.
• 이유없이 기능 구현이 안되는 것 같을 때나 코드의 어떤 부분에서 문제인지 모를 때, 검사의 console을 확인하여 찾을 수 있다는 것을 배웠습니다.
• 어려움이 생길 때, 혼자 고민하지 말고, 팀원분들과 공유함으로써 함께 대안책이나 해결책을 모색할 수 있다는 점을 느꼈습니다.