kimcheolhui/ex-finder

Ex-Finder - 피실험자 모집 서비스 개발 프로젝트

| 프로젝트 기획 의도

현재 GIST에서 Google Docs로 접수되는 피실험자 모집 글을 한 곳으로 모으고, 모집자의 관리 편의성, 피실험자의 명확한 신청 과정으로 참여도 증진을 위한 플랫폼을 개발하고자 했다.

| About Code

해당 레퍼지토리는 Ex-Finder 프로젝트에서 사용된 프론트엔드 코드를 담고있다.

• React 라이브러리를 사용했다.
• 언어로는 변수들의 타입 관리에 이점을 가지는 Typescript를 선택했다.
• 전역 상태 관리로 Context API를 사용했다.
• CSS는 CSS-in-JS 라이브러리 중 하나인 Styled Components를 사용했다.
• 중복되거나 다소 복잡한 구조를 가지는 components를 리팩토링하여 재사용성과 가독성, 유지보수에 편리한 방향으로 코드를 작성하고자 했다.

| 서비스 기능

1. 메인 페이지

피실험자 모집글 목록 페이지, 마이페이지, 로그인 페이지, 피실험자 모집글 작성 페이지로 갈 수 있다.

2. 피실험자 모집글 목록 페이지

현재 등록되어 있는 피실험자 모집글 목록을 볼 수 있으며, 피실험자 모집글을 작성할 수 있다.

3. 피실험자 모집글 작성 페이지

피실험자 모집글 작성에 필요한 정보들을 기입할 수 있다. 실험제목, 실험분야, 실험위치, 실험기간, 실험보상, 피실험자 성별과 나이, 실험 세부 내용, 그리고 실험 가능 시간 테이블을 입력할 수 있다.

4. 로그인 페이지

웹사이트에 로그인을 할 수 있다.

5. 마이페이지

사용자의 기본 정보, 참여한 실험 목록, 작성한 실험글 목록을 볼 수 있다.

6. 개발하지 못한 기능

• 회원가입 페이지, 피실험자 모집글 상세 페이지
• 제대로된 로그인 관련 기능(로그인, 아이디 찾기, 비밀번호 찾기, 회원가입하기)

| 배우고 느낀 점

이전에 참여했던 프로젝트에서는 중복되는 코드들도 많았고 한 눈에 파악하기 어려운 구조를 가진 코드로 구성되어 있었다. 이번 프로젝트를 통해 코드의 모듈화에 대해서 배울 수 있었고, 이에 따른 이점을 느낄 수 있었다. Ex-Finder 프로젝트에 참여하기 전까지는 단순히 리액트 js 강의 하나를 들은 정도였고, 당연히 스스로 결과물을 만들어 본 적도 없었다. Ex-Finder 프로젝트를 통해서 누군가의 코드를 따라치는 것이 아닌 내 코드를 만들어본 경험을 할 수 있었고, 앞으로 어떤 프로젝트에 참여하든지 할 수 있을 것 같은 자신감이 생겼다.

| 아쉬운 점

백엔드 담당 멤버가 서버를 이미 만들어놨음에도 프론트 부분이 완성되지 않아서 서버 연결을 해볼 수 없었던 점이 아쉽다. 리액트를 통해서 코드를 짜고 화면을 구성하는 방법에 대해서는 충분히 배울 수 있었으나, 서버로부터 데이터를 전송 받고 전송하는 과정을 겪어보지 못했다. 이후 다른 프로젝트에 참여하게 된다면, 서버와 데이터를 주고 받을 수 있는 경험을 해보고 싶다.