프로젝트 정리
file upload의 확장자검사 및 썸네일노출
파일을 업로드 하기 전에 서버에서 모든 것을 체크하지 않고 클라이언트에서 체크하면 더 빠르게 유효성을 판단할 수 있다. 이미지 파일의 확장자가 올바른지, 썸네일 이미지를 화면에 노출하는 방법을 알아보자. 이미지 파일 확장자 유효성 검사 file의 확장자 검사는 HTML input 태그의 accept 속성으로 쉽게 필터링할 수 있습니다. accept속성의 브라우저 지원상황이 깔끔한 상태가 아니므로, 더 많은 브라우저에서 동작하는 코드를 알아보겠습니다. file을 업로드 하면, change 이벤트를 통해서 이를 감지할 수 있습니다. 그리고 나면 file객체를 얻을 수 있습니다. file 객체는 event 객체의 target으로부터 얻을 수 있습니다. const elImage = document.querySe..
file upload방법의 이해
form data를 통해 file upload를 할 수 있다. type : input tag에 들어갈 type 선언 name : server에서 인식 할 수 있게 name 선언 id : client에서 제어를 위해 id 선언 accept : 허용 가능한 file type 제한 일반적인 form 데이터 전송 시에 HTTP Header에는 기본적으로 Content-Type:application/x-www-form-urlencoded 라는 정보로 노출 됩니다. 그러나 file을 전송할 때는 좀 다릅니다. Form 태그의 속성으로, enctype를 multipart/form-data로 지정해야 합니다. Content-Type: multipart/form-data; boundary=----WebKitFormBou..
네이버 부스트 코스 풀스택 과정 리팩토링 시작
현재 E단계인 예약기능까지 기능을 완료한 상태이다. ** 프로젝트 링크 ** ** 프로젝트 Swagger API 문서화 링크 ** 개인적인 사정으로 프로젝트를 완성하지 못하여 이제 다시 시작하려고 한다. 댓글 기능재 E단계인 예약기능까지 기능을 완료한 상태이다. 코드가 아주 개판이다 개인적인 사정으로 프로젝트를 완성하지 못하여 이제 다시 시작하려고 한다. F 단계인 한줄 소감평 및 파일 업로드 기능을 완성하고 코드를 일단 다듬고 테스트 코드 작성후 -> version 0.1 ~ version 0.9 SpringBoot로 옮기고 -> version 1.0 JPA 및 ThymeLeaf PostgreDB를 사용하여 -> version 2.0 Versioning은 잘 안해 왔는데 이런식으로 버전을 잡아보겠다. ..
BE_PJT E-1. 예약관리 시스템: 예약하기
1. 프로젝트 개요 이번 파트에서는 예약하기와 나의 예약 내역확인 기능을 구현해보겠습니다. 상세정보 화면에서 예매하기를 누르면 상품정보, 티켓 수 선택, 예매자 정보입력폼, 약관이 보이게 됩니다. 사용자는 티켓을 선택하고 예매자 정보를 입력한 후, 약관에 동의하고 예약하기 버튼을 누르면 예약정보가 저장됩니다. 예약정보가 저장된 후 메인화면으로 리다이렉트(redirect)됩니다. 메인화면의 상단에서 예약확인 버튼을 누르면, 예약자 이메일을 입력할 수 있는 폼이 보여집니다. 예약자 이메일을 입력 후 내 예약 확인 버튼을 누르면 예매 내역이 보여집니다. 이번 파트에서는 백엔드의 경우 기존에 배운 내용을 토대로 구현을 이어나가시면 됩니다. 프론트엔드에서는 이번 파트에서 새롭게 배운 기술을 포함해서 추가로 구현해..
BE_PJT D-1. 예약관리 시스템: 상세페이지
1. 프로젝트 개요 이번 파트에서는 예약 서비스의 상세보기 페이지를 만들어보겠습니다. 상세보기 페이지는 메인화면에서 각 아이템을 선택한 경우 이동하는 페이지입니다. 해당 페이지에서는 각 아이템의 상세한 정보를 노출해야합니다. 이번 파트에서는 백엔드의 경우 기존에 배웠던 내용을 토대로 구현을 이어나가시면 됩니다. 프론트엔드에서는 이번 파트에서 새롭게 배운 기술을 포함해서 추가로 구현해야 합니다. 기획서 위 영상에도 나왔던 기획서는 아래 링크를 통해서 확인하실 수 있습니다. 이번 파트는 아래 기획서 중 8-13 페이지 부분만 개발합니다. docs.google.com/presentation/d/1i2IC1yIH5ACFCvCH4EMVv_3Zw2oltRvHK94amyNEKbs/edit#slide=id.p10 부코..
BE_PJT C-1. 예약: 메인페이지
1. 프로젝트 개요 이번 프로젝트에서는 인터넷 예약관리 시스템을 만들어보겠습니다. 실제 네이버에서 운영하는 예약 시스템과 유사한 서비스입니다. 전시, 연극, 뮤지컬 등의 콘텐츠가 보이고, 각 아이템을 예약할 수 있어야 합니다. 물론 네이버 예약 서비스는 이 순간에도 계속 변경되고 있습니다. 따라서 여러분들이 지금 만들 예정인 서비스와 실제 네이버 예약서비스와는 약간 차이가 있을 겁니다. ^^ 여러분들은 저희가 제공한 기획서 내용과, 데모 사이트를 살펴보시면서 개발하시면 됩니다. 이번 파트부터 마지막 파트까지는 총 4단계로 이어지는 규모가 큰 프로젝트입니다. 그만큼 완성도 있는 결과를 만들 수 있고, 더불어 개발의 복잡도가 올라갈 겁니다. 이번 파트에서는 전체 예약서비스 중에 '메인화면'을 구성합니다. 서..