항해99 - 1주차 풀스택 미니 프로젝트

Charley1013·2022년 3월 14일
0

항해99

목록 보기
8/12
post-thumbnail

🐭 항해 들어가 보니 어때

잘 들어갔다

협업 경험을 했다는 게 너무 좋다 파이썬이나 자바로 서버 구축을 해 본 적은 학교에서 잠깐 해보고 없어서 프론트와 연결하는 기회가 없었는데 이번 첫 주차 프로젝트를 통해 클라이언트와 서버가 어떤 식으로 통신하고 프론트에서 어떻게 가져와서 활용하는지도 잘 알 수 있었던 일주일이었다

🐭 그래서 이번 주 프로젝트는 뭐 했어?

시원하게~!🏃

운동 관련 영상을 부위별로 모아 로그인을 통해 댓글과 좋아요를 활용해 유저들과 소통하고 좋아요한 채널은 따로 모아서 볼 수 있는 사이트를 제작했습니다 이번 프로젝트를 진행하면서 클라이언트 쪽에서 어떤 식의 구현했는지 사용자 경험에 어떤 부분을 신경 썼는지 하나씩 설명하도록 하겠습니다

로그인 & 회원가입

- ID Foucs

사용자가 로그인, 회원가입 시 마우스로 아이디를 foucs 하는 것이 아닌 첫 페이지 로딩 시 바로 ID 입력창에 focus가 올라가 키보드로 바로 입력할 수 있도록 했습니다

$(document).ready(() => {
  $("#input-username").focus();
});

- Login Enter

사용자의 편의성을 고려해 로그인은 키보드의 enter를 눌르면 유효성 검사를 통과하면 로그인을 성공시키고 main 페이지로 이동하도록 했습니다

onkeypress="javascript:if(event.keyCode==13){sign_in()}"

메인페이지

- 부위 지정 시 해당 위치 확인

main 페이지의 부위별 영상은 SPA로 보일 수 있게 부위별 함수 호출을 다르게 했으며 각 부위에 위치했으면 위 내비게이션의 border이 붉은색으로 보여 사용자가 어디에 있는지 확인할 수 있도록 만들었습니다

- 모달창으로 바로 확인


Detail 페이지를 따로 만들지 않고 한 페이지에서 모달창을 통해 해당 영상의 정보를 바로 확인할 수 있도록 만들었습니다 해당 모달창은 bootstrap을 사용했고 각 영상은 DBPOST해 비디오 키값을 검사하여 관련 내용을 모두 불러오는 식으로 만들었습니다

- 디테일 박스

각 페이지로 모두 이동이 가능한 디테일 박스를 만들었습니다

즐겨찾기 페이지

- 즐겨찾기 정보 가져오기

메인 페이지에서 좋아요를 누른 영화 리스트를 따로 만들고 DB에 저장된 영상 리스트와 검사해 일치하는 값이 존재하면 즐겨찾기 페이지에 보이도록 만들었습니다 좋아요를 삭제 시 즐겨찾기 페이지를 reload()시켜 페이지에 영상이 삭제되도록 했습니다

🐭 첫 웹 팀 프로젝트 어땠어?

기초를 탄탄하게

리액트만 쓰다 보니 html 문서에서 css 불러오는 코드도 까먹어서 당황했었다 그리고 서버 정보를 가져와 클라이언트에 보여줌으로써 웹 동작에 대한 개념을 다시 한번 복습하는 시간이었고 팀으로 무언가를 만들다 보니 속도도 확실히 빠르고 문제가 생기면 공유할 수 있는 팀원분들이 있어서 너무 좋았다 앞으로 진행하는 팀 과제도 기대가 크고 팀원분들에게 더 많은 도움을 줄 수 있도록 많이 공부해야겠다고 생각했습니다

시연영상

profile
프론트엔드 개발자 김찰리

0개의 댓글