졸업작품 회고록

1️⃣꾸준히 달려온 1년.. 3학년 2학기 때부터 달려온 졸업작품이라 거의 1년이 다되어 간다.. 처음에는 막막했지만 팀원들과 소통도 하고 교수님께 피드벡을 받으면서 부족한 점을 채워나갔다. 기획을 하고 제안서를 쓰는데 거의 처음 한 학기를 다 썼을 때는 "이거 쓰는데 한 학기가 다 지나갔는데 제작을 완성 시킬 수 있을까?" 했던 초반의 불안감이 있었다. 아무래도 팀 구성도 학과의 에이스들로 이루어진 것도 아니고 항상 중위권에 있던 친구들끼리 이루어진 것이라 어영부영 되는게 아닌지 걱정도 되었다. 그렇기 때문에 더 열심히 하려고 했던게 있었는지도 모른다. 우리팀은 작년 겨울방학을 하기전 교수님을 찾아가 "졸업작품을 임하는 자세"에 대해 알려달라고 했다. 교수님께서는 "내년 1학기 동안 졸업작품을 다 만들..

• format_list_bulleted 졸업작품
• · 2023. 6. 19.
• textsms

[작품] - FormData로 서버에 데이터와 이미지 같이 보내기

1. 개요 음식점을 먹고 난 후 그 식당에 대한 리뷰를 쓰는 기능이 필요했다. 리뷰 기능에는 별점, 음식 사진, 후기 등의 데이터가 있었고 이 모든것을 한번에 서버에 보내 달라는 백엔드의 요청이 있었다. 지금까지는 문자나 숫자 형식의 데이터만 보냈기 때문에 파일 형식을 어떻게 보낼 지에 대해 많은 생각을 했다. 2. 해결 방법 구글링을 통해 fetch의 헤더를 "multipart/form-data" 형식으로 바꾸는 방식이 있었는데 막상 시도를 하니 클라이언트에서는 잘 보내졌지만 서버에서 못받는 오류가 생겼다. ✅그래서 새로운 방법인 FormData를 이용해 from 생성 후 fetch를 하기로 했다. 1️⃣HTML 수정하기 리뷰 등록 작성자: × 별점을 선택해주세요 ★ ★ ★ ★ ★ 사진을 올려주세요 보..

• format_list_bulleted 졸업작품
• · 2023. 5. 31.
• textsms

[작품] - 메뉴 별로 가게 리스트 띄우기

1. 개요 저번에는 지역 선택별로 가게 리스트를 띄웠다면 이제는 메뉴별로 가게를 띄우게 할 예정이다. 사이트 구조상 지역을 선택하고 메뉴 선택을 할 수 있게 만들었기 때문에 지역 필터가 적용된 가운데 메뉴필터도 적용이 되어야 했다. 물론 아무 지역을 선택하지 않아도 메뉴 필터는 적용이 되어야 한다는 점도 적용해야 했다. 구현한 영상 잘 작동하는 모습을 볼 수 있다. ㅎㅎ 2. 구현하기(지역 필터 안했을 때) 2-1 각각의 메뉴들을 클릭했을 때의 이벤트 주기 const sortedMenu = document.querySelectorAll("#sortedMenu"); sortedMenu.forEach((el) => { el.addEventListener("click", function () { )}; )};..

• format_list_bulleted 졸업작품
• · 2023. 5. 17.
• textsms

[작품] - 지역 선택 Select Box만들기(2)

1. 개요 저번에 만든 지역선택 Box는 모형만 만든 것이라면 이번에는 실제 지역을 선택하면 선택한 지역만 나오게 만들 것이다. 예를 들어 서울을 선택하면 서울지역 식당만 나오게 하고 서울,수원등 여러군데를 선택하게 되면 선택된 모든 식당들이 나오게 할 예정이다. 위 사진은 강남구, 수원시를 선택한 모습이다. 이렇게 한개 이상의 지역을 선택했을 경우는 처음 선택한 곳+ 외 ~~ 곳 이렇게 만들었다. 지역을 선택하고 조회버튼을 누르면 해당 지역이 나온다. + 초기화 버튼을 누르면 선택된 모든 체크가 해제되고 그 상태에서 조회를 누르면 초기에 나온 모든 식당들이 나온다. 2. 구현하기 2-1 체크된 box들은 배열에 넣기 const checkbox = document.getElementsByName("reg..

• format_list_bulleted 졸업작품
• · 2023. 5. 14.
• textsms

[작품] - 지역 선택 Select Box만들기

1. 개요 오랜만에 쓰는 개발일지다. 최근 시험기간과 여기저기 캠프에 지원할려고 지원서를 쓰는 시간이 겹쳐서 블로그 쓰는데 소홀했던 것 같다. 딴 얘기는 그만하고 본론부터 말하자면 졸업작품을 만드는데 가게 지역 선택 필터 부분이 존재한다. 저 부분을 눌러서 해당 지역을 고르고 조회를 누르면 해당 지역에만 존재하는 가게들만 나오게 할 예정이라서 지역들을 나오게 해야 했다. 저 해당 부분을 누르면 서울시, 경기도, 인천, 강원도.. 등등 이렇게 나오게 하고 싶었다. + 각각을 누르면 거기에 맞는 행정 구역만 나오게 하기 내가 원하는 모습.. 2. 구현하기 먼저 HTML로 틀을 만들어 준다. 2-1. "도" 만들기

• format_list_bulleted 졸업작품
• · 2023. 4. 30.
• textsms

[자바스크립트] - 페이지 리렌더링 하기

1. 개요 졸업작품을 하던 중 버튼을 누르면 페이지가 이동하지 않고 원하는 요소만 바뀌도록 구현하고 싶었다. 페이지 이동을 하면 번거롭고 시간도 오래 걸릴거 같아서 이 참에 리렌더링하는 방법을 배워보자 라고 생각했다.ㅎㅎ 아마 대부분 리액트에서 많이 쓰지만 나는 졸업작품을 VanillaJS로 하고 있기 때문에 자바스크립트로 구현을 해볼 것이다. 2. 리렌더링이란? 초기에 한번 렌더링을 진행하고, 그 이후에 특정 조건이 발생하면 다시 렌더링을 진행하는 경우를 말한다. 3. 리렌더링 과정 1) 버튼 요소를 불러와서 클릭했을 때 이벤트를 걸어준다. const find = document.querySelector(".find");// 버튼요소 find.addEventListener("click",function..

• format_list_bulleted 졸업작품
• · 2023. 4. 9.
• textsms