국비지원부트캠프5 [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 2주차 - 두 번째 학습 정리 - 진행한 사항 개발한 기능 저번 시간에 로그인 페이지의 UI와 기능을 어느 정도 완성하였기에 이번 시간엔 회원가입 페이지를 구현하였습니다. 따로 와이어 프레임을 제작했었지만 생각보다 복잡한 구조였기에 디자인을 바꿔 진행하였습니다. 먼저 api 데이터 명세서에 따라 필요한 정보들을 입력할 input창과 중복확인 버튼을 구현하였습니다. 아이디와 비밀번호는 모두 required값이고 나머지는 option값으로 설정하였습니다. 중복확인은 api 호출을 통해 db에 있는 값들과 input값을 비교하여 확인하였습니다. 주소 입력창은 Daum 우편 주소 api를 사용하여 비교적 손쉽게 해결하였습니다. 회원가입 버튼을 누를 시 입력된 값들의 형식을 검사한 후 가입되도록 하였습니다. 회원 가입 후 로그인에 성공할 시 헤더.. 2023. 11. 15. [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 2주차 - 첫 번째 학습 정리 - 진행한 사항 개발한 기능 로그인 페이지의 UI와 기능을 구현하였습니다. 먼저 미리 제작된 와이어 프레임을 따라서 UI를 구현하였습니다. 기본적인 아이디와 비밀번호를 입력할 수 있는 input창과 로그인 버튼을 만들어 주었습니다. 이와 같이 UI를 구현하였고, 만약 미리 정해진 값이 제대로 입력되지 않았을 경우에 아이디와 비밀번호를 확인해달라는 메세지가 나오도록 설정하였습니다. 로그인에 성공할 시 localstorage에 api요청을 통해 받아온 jwt access-token을 저장하도록 한 후 메인 페이지로 이동하도록 구현하였습니다. html코드 Welcome to Everyday Party 아이디 또는 비밀번호를 확인해주세요 로그인 회원가입 | 아이디 찾기 | 비밀번호 찾기 EVERYDAY PARTY .. 2023. 11. 12. [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 1주차 - 세 번째 학습 정리 - 진행된 사항 개발한 기능 메인 배너 슬라이드 기능을 구현하였습니다. 직접 구현해보려 했지만, 시간상 여유롭지 못했기에 swiper라는 라이브러리를 찾아서 사용하게 되었습니다. CDN으로 swiper 라이브러리를 link=css와 script를 가져와서 사용하였습니다. 아래는 swiper를 설정하게 해주는 생성자로 안에 변수의 값을 바꿔주면 제가 원하는 방식으로 슬라이드 효과를 보여줄 수 있습니다. 이 외에 리뷰 슬라이드는 직접 JavaScript를 이용하여 구현하였습니다. // 리뷰 슬라이드 바 이벤트 const slideList = document.querySelector(".reviews-list"); const slides = document.querySelectorAll(".reviews-list.. 2023. 11. 12. [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 1주차 - 두 번째 학습 정리 - 진행된 사항 개발 전 이슈 작성 개발한 기능 저번 시간에 제작한 와이어 프레임을 토대로 기본적인 CSS와 HTML을 사용하여 메인 페이지를 만들었습니다. 먼저 메인 헤더와 카테고리 리스트를 구현하였고, 내부 요소들은 flex를 이용하여 배치 하였습니다. 그리고 바로 밑에 메인 배너로써 슬라이드 효과를 넣어주었어야 했지만, 구현이 쉽지가 않아 완성해놓지는 못했습니다. 베스트 상품 부분은 JavaSript를 사용하여 컴포넌트화 시켜 컨테이너 안에 innerHTML을 사용해 붙혀넣는 식으로 하였습니다. 이 부분은 gird 방식으로 배치하였습니다. 이벤트 보여주기 부분은 flex 방식으로 배치하였고, 마지막 리뷰 부분은 자동 슬라이드 효과를 주어 3초마다 효과가 나타나도록 설정하였습니다. 진행 중 겪었던 이슈 .. 2023. 11. 12. [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 1주차 - 첫 번째 학습 정리 - 기획 기본적으로 웹 서비스 프로젝트라는 틀이 주어진 팀프로젝트이다. 팀원분들과 첫 스크럼을 통해 포지션, 프로젝트 테마, 팀 규칙 등을 정하였다. 포지션 : 인원은 총 6명으로 프론트 4명, 백엔드 2명으로 진행하였다. 팀 규칙 : 1. 소통은 일 얘기는 디스코드로! 2. 10시부터 22시까지는 연락 빨리 잘 되도록 노력하기!!! 3. 매일 아침 10시부터 15분~30분씩 짧게 스크럼 => 전 날까지 진행 상황, 진행하면서 어려웠던 점/ 막혔던 점, 오늘 진행할 예정, 요구 사항 등등... 4. 주석 자세히 쓰기, 브랜치명 규칙대로 진행하기 5. 커밋 자주 하기 ( 커밋컨벤션 : 깃이모지를 통해 커밋 규칙을 정하였다.) 6. 협업 도구로는 git lab을 사용하기 7. 이슈와 마일스톤 규칙 정하기 프로젝.. 2023. 11. 5. 이전 1 다음
