원하는 서비스를 구독하거나, 취미 생활을 위한 인원이 필요할 때 사람을 바로 구할 수 있도록 도와주는 서비스
Github
기간
인원
사용기술
https://github.com/JJongsKim/FCFS-front
2023.05 - 2023.06 (1개월)
FE 1명, BE 2명
로그인, 회원가입
정규식 조건을 모두 통과하는 정보만이 authentication API에 접근할 수 있도록 했습니다.
만약 API 상 오류가 있다면, 오류 토스트창을 통해 유저에게 알려주기도 합니다.
CRUD 기능을 이용하기 위해선 로그인 후 서버에서 보내주는 토큰이 필요하며 이는 헤더 컴포넌트가 관리합니다.
CRUD
[CREATE]
글 추가 모달창은 Portal로 만들어 dom 구조에 종속되지 않도록 했습니다.
카테고리, 인원수, 제목, 내용은 글 조회에 있어 필수적인 부분이었기 때문에 하나라도 입력하지 않을 시 글 작성이 되지 않도록 막아두었습니다.
[READ]
글 제목 클릭 시 각 글이 가지고 있는 id를 Link to url에 붙여 조회가 가능하도록 했습니다.
[UPDATE/DELETE]
글 작성자가 본인의 글을 조회했을 때는 아래 버튼이 ‘참여하기’가 아닌 ‘수정하기’와 ‘삭제하기’로 이루어집니다. 이때 수정하기를 누르면 ReadOnly만 가능했던 부분들이 input이나 드롭다운으로 변경되어 글을 수정할 수 있도록 합니다.
삭제같은 예민한 동작의 경우 삭제하기 버튼을 눌렀을 때 안내를 해주는 모달창이 하나 더 뜨며, 삭제를 할 것인지에 대한 동작을 재확인합니다.
웹 개발의 경험이 없는 팀원들을 위해, 수업 시간에 배우고 있었던 javascript를 사용하며 빠르게 학습과 응용이 가능한 express 프레임워크를 선택해 백엔드를 구현했습니다.
전체적인 백엔드 코드는 express를 사용하였고, 서버는 EC2 인스턴스와 RDS 서비스를 함께 이용하여 배포했습니다.
첫 번째, 웹앱을 위한 스타일링
데스크탑에서도 모바일 뷰 크기로 보이기 때문에 자연스럽게 모바일에서도 알맞은 크기로 볼 수 있습니다.
반응형 크기로 제작을 하고 싶었으나 빠르게 UI 퍼블리싱을 끝내고, 기능에 집중하기 위해 데스크탑에서도 모바일 뷰 크기로 보일 수 있도록 고정 px 값을 이용해 디자인을 했습니다. 약간의 아쉬움이 느껴졌지만 다음 기회에는 반응형과 기능 모두 잡을 수 있도록 할 예정입니다.
두 번째, Express 지식 쌓기
백엔드 서버를 express로 제작하기로 결정하였습니다. 저를 포함한 모든 팀원이 백엔드 서버를 제작해 보는 것에는 처음이었기에 모두 개인적으로 공부하는 시간이 필요했습니다. 저는 프론트 UI 제작을 빠르게 끝내고 express에 대한 공부를 하는 시간을 가졌습니다. 프론트엔드 분야에만 치우치지 않고 백엔드 코드를 읽을 줄 아는 능력도 중요하다고 생각합니다. 코드를 쉽게 읽기 위해선 직접 서버를 만들어봐야 이해도를 더 높일 수 있다고 생각했기에 좋은 기회라고 느꼈습니다.
세 번째, AWS 경험 쌓기
이번 프로젝트에서 클라이언트 파트와, 서버 배포를 맡게 되었습니다.
AWS 사에서 제공하는 서비스들을 경험하기 위해 저희 팀만의 데이터베이스를 구축하는 RDS와 EC2 서버 배포를 선택하여 배포했습니다. 이번 경험을 통해 서버 배포와 AWS 사의 서비스에 대한 이해도를 높일 수 있는 값진 기회였다고 생각합니다.
로그인 후 이용
로그인
회원가입
회원가입 비밀번호 유효검사
회원가입 빈칸 유효검사
게시글 작성
게시글 수정
게시글 삭제