저는 현재 중3으로, 21학년도 한국디지털미디어고등학교 입시를 준비하고 있습니다.
6월 초에 모집요강이 나온다 했으니 약 2달 뒤 나오겠네요. 매우 기대하고 있습니다.
디미고라는 꿈을 가진 후부터 고등학생이 되면 디미고 기숙사에서 일어나 공부하는 걸 상상하는게
정말 즐겁습니다. 삶의 목표를 가지니 정말 행복하네요.
혹시나 삶이 힘드시다면 작은 목표를 가지고 점차 이뤄나가며 큰 목표까지 달성해 보세요.
개인적으로 힘들었던 공부도 어느정도 감당이 되더라고요.
백엔드 개발
저번주부터 배워오던 graphQL을 사용해 프로젝트를 만들기로 했습니다.
백엔드는 우선 graphQL Yoga 를 사용해 기본 서버 틀을 가져오고, 거기에 prisma db를 얹어
DB를 설계했습니다. 크게 보면
Post(글) <-> Comment(댓글) 같이 서로 의존하는 관계를 만들어보고자 노력했습니다.
그로써 유저, 포스트, 댓글 이 세가지가 의존하는 DB를 설계하고,
그에 대한 Resolver 함수들과 Mutation 등을 구현했습니다.
resolver 함수의 일부입니다. 다 짜고 나니 생각보다 복잡했네요.
저는 graphQL을 배우고 DB를 연결할 때 prisma database를 사용했습니다.
처음 보는 DB 설계 방식이었지만, 어렵지 않아 금방 적응했던 것 같습니다.
무엇보다 복잡하기 구성하지 않고 prisma client 쪽에서 schema를 입력하면
자동으로 CRUD 함수를 구현해 주는게 정말 맘에 들었습니다.
그렇게 모든 CRUD 기능, 로그인 회원가입 기능까지 구현 후 클라이언트로 넘어갔습니다.
클라이언트 개발
클라이언트는 Create-React-App 을 이용해 SPA React Application 으로 구성했습니다.
CRA를 통해 핫 리로딩 서버를 구성하고 React-Router-Dom 으로 라우팅을 구현했습니다.
어짜피 대나무숲 형태라, 크게 라우팅은 필요가 없었고 크게 홈('/'), 로그인('/login'), 회원가입('/register')
으로 구현했습니다.
API 서버와 통신하기 위해 react-apollo / apollo-boost 를 사용해
서버와 통신하는 기능을 구현했습니다.
클라이언트 코드의 일부입니다. react-apollo 의 Mutation 클래스를 사용했습니다.
react-hooks를 사용해 mutation을 보내기도 하지만 저는 배웠던 방법인 react-apollo의 mutation 클래스를 사용했습니다.
코드 첫째 줄에 보이는 LOGIN_MUTATION의 gql은 정리하자면 graphQL 언어입니다.
mutation LoginMutation(...) {
login(...){
// 쿼리가 들어가는 부분
}
}이렇게 간단한 방식으로 서버와 통신할 수 있다는 점이 굉장히 매력적이었습니다.
또한 디자인을 보완하기 위해 React UI 라이브러리인 Ant Design(ANTD)를 사용했습니다.
클라이언트의 로그인 페이지 입니다. 굉장히 깔끔하고 이쁩니다.
Material UI, Semantic UI, Ant Design 사이에서 굉장히 고민했는데
결국 사용량이 높고 사용하기 쉬운 Ant Design 을 선택했습니다.
후회하지는 않습니다. 굉장히 이쁘고 마음에 들었습니다.
로그인 중 에러가 발생하면 입력 폼이 빨갛게 바뀌는 등의 세련함이 장점이라고 생각합니다.
전체적인 홈페이지입니다. 새로운 글을 포스트 하는 부분, 포스팅을 보여주는 부분, 댓글 창,
댓글을 다는 창(이미지에는 짤렸습니다) 입니다. 간결하지만 그렇게 전문적이어 보이진 않네요...
포스트를 하는 부분의 Input, 버튼은 모두 Ant Design 의 기본값 입니다. 깔끔하고 보기 좋네요.
기본적인 기능은 로그인, 회원가입, 포스팅(로그인 시만 가능), 댓글달기(로그인 시만 가능), 댓글 수정, 삭제(댓글을 단 사람만 가능), 포스팅 삭제(포스팅을 한 사람만 가능) 등으로 간추릴 수 있겠네요.
개인적으로 잘 만들었다고 생각하는 프로젝트입니다. 이 프로젝트가 끝나면 Flutter 를 이용해
저희 학교 인프라앱(?) 을 구축해볼 예정입니다.
이상으로 글 마치겠습니다. 모두 코로나19 조심하시고 건강하세요!
