항해99 👩‍💻2일차 TIL

🎉오늘의 한 일🎉

- 오늘은 본격적으로 내가 맡은 리뷰작성 기능을 구현하는 데 중점적으로 시간을 많이 사용하였다.

- 우선 html폼을 만들고, 사용자가 입력한 값들을 mongoDB에 저장하는 기능을 구현하였다.

 

리뷰작성 페이지

- 각각의 요소들은 부트스트랩으로 구성하였다(input, textarea, dropdown, fileupload등을 사용).

- 디자인은 기능 구현 후 마지막에 정하기로 하여서 우선은 기능 구현에 초점을 맞추어 제작하였다.

- 마이페이지에서 삭제 기능을 넣을 것을 고려하여 각 리뷰마다 구별할 수 있게 num을 count하여 넣어주었다. 

- 원래 와이어프레임에서는 지역을 시/도/군으로 세가지 드롭박스로 나누어 구현하려고 했는데, 실제 만들다

  보니 세부주소까지 드롭박스로 구현하기엔 의미없이 노동력과 시간을 들이는 것 같아 시까지만 드롭박스로

  구현하고 나머지 세부주소는 input박스 안에 넣어서 db에 저장해주기로 변경해주었다. 

- 팀으로 깃허브를 연동하여 합치는 부분이 어려웠는데, 다행히 조원분 중에 깃으로 협력 경험이 있으신 분이

  계셔서 큰 도움을 주셨다. 나도 더 분발해서 깃을 더 효율적으로 잘 사용할 수 있도록 공부해야겠다 !!!

 

🐣 Today I Learned 🐣

- 이미지파일을 업로드하여 db에 저장하는 과정에서 약간 애를 먹었는데, 구글링도 해보고 관련된 강의도

찾아보면서 아래와 같이 form_data를 사용하여 다른 값들과 함께 이미지파일을 서버로 넘겨주는 방법을 알게되었다.

- ajax에서 cache, contentType, processData를 false로 지정해주면 이미지파일을 안정적으로 업로드 시킬 수 있다. 

 

# 이해하기 편하도록 수정한 코드입니다.
<script>
        function save_review() {
            let store = $('#store').val();

            let file = $('#file')[0].files[0]
            let form_data = new FormData()

            form_data.append("file_give", file)
            form_data.append("store_give", store)
           
            $.ajax({
                type: "POST",
                url: "/api/writing",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }
    </script>

 

 

📌Trouble Shooting 📌

- 리뷰값을 받아서 서버로 넘기는 script 부분에서 값이 안넘어가져서 약간 당황했는데, 서버의 url이 수정된 이후 ajax의 url을 똑같이 변경해주지 않아서 생긴 문제였다. ajax의 url 를 변경해주어 간단히 해결하였다. 

 

🍧느낀점🍧

- 오늘도 정말 너무 빠르게 하루가 흘러갔다. 오전 9시부터 시작했는데 GIT인강을 듣고 자면 새벽 1시쯤 잘 것 같다.

- 팀프로젝트 특성상, 혼자 독학할 때보다 훨씬 더 집중력있게 하루의 대부분의 시간을 코딩할 수 있어서 좋다.

- 내가 맡은 기능을 구현하고 나서 시간이 된다면 다른분이 구현하신 코드도 보면서 어떤 방식으로 동작되는지 파악해야겠다.