SPRING/SPRING 프로젝트14 SPRING 팀 플젝 : 네이버 아이디로 로그인 하기(네아로) 1. 내용 : Spring 팀프로젝트에서는 네이버를 활용하여 회원가입과 로그인을 하기로 했다. 물론 일반 로그인도 그대로 남겨두었다. 2. 과정 중 특이점 : 네이버로 로그인 시 메일 주소를 가지고 회원가입 여부를 확인한 후 로그인 또는 회원가입 페이지로 넘어가기 때문에 가입 시 이메일 주소는 중복이 안 되게 해두었다. 다음에 플젝을 한다면 소셜 로그인을 추가하고 메일 주소를 아이디로 사용할 것 같다. 회원가입 시 네이버에서 제공하는 정보 외에 주소, 키, 몸무게, 체형 등 필요한 정보들이 더 있어서 바로 DB로 연동하지 않고 회원가입 페이지로 정보를 담아 이동하게 했다. 3. 화면 및 코드 0) 네이버 개발자 센터에 정보 등록하기 네이버 개발자 센터( https://developers.naver.com.. 2023. 1. 7. SPRING 팀 플젝 남성 전용 쇼핑몰 '초코룩' 개요 1. 교육처 : 넥스트아이티교육센터(대전) 2. 프로젝트 기간 : 2022년 9월 5일 ~ 10월 21일 3. 개발환경 : Spring, 오라클DB, Python 4. 부트스트랩 템플릿 출처 : https://bootswatch.com/ 5. 사이트 주제 및 선정 이유 - 주제 : 남자들을 위한 남성 의류 쇼핑몰 & 커뮤니티로 "초보 코디러를 위한 룩북"의 줄임말이다. - 선정 이유 : 취향 추천이나 체형 추천, 코디북 만들기를 지원하는 여성 의류 사이트는 많이 있지만 남성 의류 사이트는 이러한 부분이 대부분 미흡하여 남성의 코디를 도와주는 사이트를 제작하게 되었다. 6. 상세 설명(최종 발표 PPT 참조) 1) WBS 2) ERD 3) UML 다이어그램 4) 각 화면 및 요구사항 화면은 이것보다 더 많.. 2022. 11. 7. SPRING 프로젝트 - 펀딩 사이트(7) : 페이지네이션 없이 무한스크롤 구현 1. 내용 : 내가 찜한 펀딩을 확인할 수 있는 페이지이다. 찜을 하면 DB에 있는 mem_like에 회원 아이디와 펀딩 번호가 저장되는데 나의 펀딩 페이지에서는 이 mem_like와 funding 테이블을 join해서 데이터를 가져온다. 페이지가 켜지면 바로 ajax를 이용해서 모든 정보를 List로 가지고 오는데 스크롤을 내릴 때마다 12개씩 뜨도록 무한스크롤을 사용하였다. 2. 과정 중 특이점 : 페이지네이션을 사용하면 쉽게 할 수 있지만 데이터를 모두 가져온 다음 필요한만큼 잘라서 무한스크롤을 하고 싶어서 이런 식으로 만들었는데 순서 부분 때문에 좀 헷갈렸다. 선생님의 도움과 구글링으로 해결할 수 있었다. 3. 화면 및 코드 1) 나의 펀딩 화면 펀딩리스트와 똑같은 모양이다. 아래 영상을 보면 화.. 2022. 9. 8. SPRING 프로젝트 - 펀딩 사이트 (6) : 회원가입 1. 내용 : 회원가입을 하는 페이지이다. 주소는 API를 사용하여 우편번호와 기본 주소를 자동으로 넣게 하였다. 2. 과정 중 특이점 : 우편번호 찾기를 간단하게 구현하게 해주는 API를 찾아서 쉽게 넣을 수 있었다. 아이디 중복 체크는 이전 화면구현 때도 해봤었기 때문에 이번에도 그대로 적용하였다. 다음 번엔 validation을 적용해야겠다. 3. 화면 및 코드 1) 회원가입 화면 회원가입 화면에서는 아이디, 비밀번호, 닉네임, 성별, 생일, 휴대전화, 이메일, 주소를 받는다. 각각의 정보는 모두 required라서 입력하지 않고 회원가입 번호를 누르면 '이 입력란을 작성하세요.'라고 안내가 뜬다. 그리고 이메일같은 경우 형식을 맞추지 않았을 시에 형식을 맞추라고 안내가 뜬다. 2) JSP (전체 .. 2022. 9. 6. SPRING 프로젝트 - 펀딩 사이트 (5) : 찜하기와 공유하기 1. 내용 : 펀딩 리스트에서 사진이나 제목을 클릭하면 그 펀딩의 내용에 대해서 간단하게 알려주는 페이지이다. 찜과 공유하기, 더 알아보기를 할 수 있다. 2. 과정 중 특이점 : 수업시간에는 찜하기를 배우지 않았기 때문에 스스로 어떤 식으로 짜야할지 하나씩 생각하면서 만드는게 어렵지만 재미있었다. 찜을 하는 순간 하트 색깔과 찜한 갯수가 바뀔 때 새로고침하게 만들었는데 그냥 요소가 바뀌게 했어도 좋았을 것 같다. 3. 화면 및 코드 1) 펀딩 세부 화면 펀딩 세부 화면에서는 펀딩의 카테고리, 제목, 사진, 달성현황과 퍼센트, 남은 시간, 창작자, 키워드를 정보로 보여준다. 더 알아보기를 클릭하면 크롤링해온 기존 펀딩 사이트가 새 탭으로 뜬다. (키워드는 이후에 진행된 파이썬 프로젝트의 결과물이라 현재 .. 2022. 9. 6. 이전 1 2 3 다음
