떠나보조) 추천여행지 글쓰기 기능 만들기
안녕하세요!
지난 시간에 떠나보조 프로젝트에 대한 소개와 전체 레이아웃에 대해서 후기를 말씀드렸어요!
오늘은 떠나보조 프로젝트에서 추천 여행지 글쓰기 기능을 어떻게 구현했는지에 대해서 말씀드릴게요!
계획
- 사진 파일 입력받는 기능 + 사진을 카드에 넣기
- 글쓰기 기능(정보 입력 받고, 카드에 넣기)
- 페이징 기능
- 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을 확인하여 찾을 수 있다는 것을 배웠습니다.
- 어려움이 생길 때, 혼자 고민하지 말고, 팀원분들과 공유함으로써 함께 대안책이나 해결책을 모색할 수 있다는 점을 느꼈습니다.