프로젝트 인원 : 1명
프로젝트 기간 : 11월 23일 ~ 11월 29일 (7일)
프로그램은 HTML, CSS, JS, SpringBoot
프로젝트 목적
- 회원가입, 로그인, 댓글 작성 기능 구현
- 회원 가입 페이지, 로딩 페이지, 메인 홈페이지, 게시판 페이지, 댓글, 글 작성 페이지 구현
- 로딩 시에는 다른 화면이 나오지 않게 구현
- 로고, 햄버거 요소, 인스타와 깃허브 링크가 있는 a태그는 스크롤 해도 같은 위치 유지
홈페이지 설명
회원가입 후 로그인 창으로 가면 작성했던 아이디는 프로필 아래에 이미 적혀진 상태로 있고 비밀번호만 적으면 되는 걸로 구현했습니다. 이는 디자인을 구현할 때 구글 로그인과 같이 비밀번호만 적는 걸로 결정하고 디자인을 구성했기 때문입니다. 참고로 비밀번호가 틀리거나 작성하지 않았을 때의 JS 코드를 작성했습니다. 메인 홈페이지에서는 접속 시 동영상이 늦게 불러오는 현상이 있어 로딩창이 나온 후 메인 홈페이지 나오도록 설정했습니다. 이외에 로고, 햄버거 요소, 인스타, 깃허브 링크를 display: flex를 상태로 설정해 스크롤을 하더라도 바로 바로 클릭할 수 있게 했습니다. 게시판은 codepen에서 가져온 코드에서 transition의 속도 변경, flex-wrap: wrap 상태인 갯수를 조절하기 위해 width, height 조절, 폰트 크기 조절 등을 진행했습니다. 그리고 게시판에는 댓글도 구현했습니다. 마지막으로 게시판은 input, textarea로 간단히 구성했습니다.
미구현 기능
- 메인 홈페이지에서 로딩이 끝난 후 스크롤이 되는 기능
- 글 작성(댓글 작성X), 글 수정, 글 삭제 기능
- 메인 페이지 2, 3, 4, 5번째 화면
1번째 문제를 해결하기 위해 신경을 쓴 나머지 2, 3번 기능과 화면을 구현하지 못했습니다.
어려웠던 점
codepen에서 가져온 CSS를 합치는 과정이 너무나도 어려웠습니다. 우선 변수명을 고치는 것부터 시작해서 opacity, display: none, z-index를 수정하는 과정 등 홈페이지의 분위기에 맞게 수정하다 보니 고통스러웠습니다. 제일 하고 싶었던 로딩이 끝난 후 스크롤이 되는 기능은 구현하지 못했지만 CSS가 어떤 방식으로 돌아가는지 알게 됐습니다.
배운 점
JS 코드로 비밀번호 입력 시 공백이거나 틀렸을 시 비밀번호를 다시 입력하라는 p태그가 block으로 변경되는 코드를 작성하며 마냥 어려웠던 JS를 배우며 구현했습니다. 또한 codepen에서 가져온 CSS로 opacity, fadeIn, fadeOut, transition 등 배우지 못했던 지식들을 알게 됐습니다. 이외에도 JPA로 회원가입, 로그인, 댓글 적기 기능을 구현하며 백엔드의 기능을 배웠습니다.