전통주(Stupping)

목차

1. 프로젝트 소개

• 프로젝트 구현날짜
  • 2022-10-24 ~ 2022-11-5
• 프로젝트 설명
  • 사용자의 취향을 파악해 사용자에게 맞는 맞춤형 전통 술을 추천해주고, 전국 전통주점의 위치와, 다양한 술의 정보까지 한 눈에 알아볼 수 있습니다.
• 프로젝트 동기
  • 술을 좋아하지는 않고 잘 마시지 않는 저같은 사람에게도 어울릴만한 술이 있는지 알고싶었고, 이왕이면 흔한 술이 아닌 전통주에 접근해서 조금 더 깊게 알고싶었습니다.

2. 기술 스택

JAVASCRIPT	NODE.JS

3. 구현 기능

• REST API

  • index

    • 메인페이지(GET /index)(
    • 술 취향test(GET /drinks-test/index)
    • 전통주점(GET /drinks-shop/index)
    • 전통주설명(GET /drinks-ex/index)
    • 로그인페이지(GET /auth/local/index) => 수정필요
    • 회원가입페이지(GET /auth/new/index) => 수정필요
    • 술 정렬(GET /drinks ? sort = "food") => 음식으로 정렬

  • auth

    • 로그인(POST /api/auth/local-process)
    • 회원가입(POST /api/auth/new-process)

  • drink

    • 술 전체조회(GET /drinks)
    • 술 등록(POST /drinks)
    • 술 하나조회(GET /drinks/:id)
    • 술 하나수정(PUT /drinks/:id)
    • 술 하나삭제(delete /drinks/:id)

  • users

    • 유져 전체조회(GET /users)
    • 유져 생성(POST /users)
    • 유져 수정(PUT /users/:id)
    • 유져 삭제(DELETE /users/:id)

4. 배운 점, 아쉬운 점

• 프로젝트 전체
  • 풀스텍을 다뤄보면서 웹 전반적인 흐름을 이해할 수 있었습니다
  • client에서 요청(클릭, 값 요청) <=> 서버 db에서 값 추출or페이지 선택후 response객체에 담아서 전달
• FRONT-END
  • 아쉬운 점
    • CSS이미지 크기 100%로 깔끔하게 맞추기(object-fit속성)
    • fetch함수 ajax구현
      • ajax방법(xmlHttpRequest객체, fetch, axios, jquery)
    • select박스 클릭 시 이벤트
    • JAVASCRIPT 실력의 부족!!!!!!!!!!!!!!
  • 배운 점
    • map, filter라는 배열함수를 이용해 그 내부의 객체를 다뤘습니다.
    • 객체 프로퍼티에 접근할 때 .말고도 [""]라는 방식도 자주 사용됩니다.
    • 백에서 다 가져와서 filter로 걸러주는 방식
    • CSS JAVASCRIPT 기능별, 영역별 모듈화
    • mongoDB는 noSql이라서 field의 속성이 document마다 다를 수 있다는 점을 알게 되었다.
• BACK-END - findOne함수로 가장 위의 document를 반환했는데 첫 번째 document를 제외한 다른 모든 document의 field들이 같아서 첫 번째도 같을 줄 알고 에러를 쉽게 찾을 수 없었다.
  • 어려웠던 점
    • 수 많은 mongoose라이브러리 db 쿼리문
    • 다양한 res,req객체
    • nodejs passport모듈 방식에 대한 이해 난해
    • multer를 이용하여 파일을 넘기는 방식 못 함
    • mongoose.Schema객체에서 이미지 스키마 형식
  • 배웠던 점
    • 다양한 쿼리문 사용법을 익힘
    • MVC패턴을 이용한 개발

5. 향후 보완점

• 이번 사이트에는 반복되는 HTML박스들이 너무나 많습니다.

  • REACT를 사용하여 컴포넌트를 잘 만들어서 똑같은 사이트를 만들어보고 싶습니다.
  • NODEJS, EJS는 너무 SCR성향이 강했는데 리엑트를 사용해서 CSR을 구현해보고 싶습니다.

• MULTER, mongoose이미지 날짜 스키마, 날짜별 정렬기능 넣어보고 싶습니다.

• 디자인을 좀 더 정교하게 만져보고 싶습니다.

6. 최종 결론

• 자바스크립트를 잘 하자!!!!!

• 프레임워크를 사용하는 이유를 깨닫는 것이 중요하다.

• 노트북에다가 clone함