0. 프로젝트전 나의 상태
개발자를 시작하기로 한 이후 처음 사람들과 프로젝트를 했다.
학과에서 간단하게 코드는 쳐봤지만 실질적인 프로젝트 및 협업은 처음이다. 심지어 온라인으로 진행하기에 매우 걱정이 되었다.
1. Gatsby 선택까지
다른 조는 중간에 아이디어가 있어서 변경되었지만 사이드 프로젝트에서 주어진 미션은 리액트로 블로그를 만들기였다.
FE(프론트엔드) 팀원끼리 블로그를 구현하려면 서버는 없어야 했고 초보자여서 이용이 많은 것을 이용하고 싶었다. 스터디 장이 먼저 Gatsby를 언급하였고 우리 팀 모두(3명 전부 비전공자) Gatsby를 사용하는 데 이견이 없었다.
2. 사이트 목표
최종목표는 Gatsby로 blog template을 우리끼리 만들어보는 것*이다. 왜냐하면 그냥 블로그를 하나 만들어서 올리는 것보다 나중에 각자 활용할 수 있게 확장성 고려를 했기 때문이다. 또한, 반응형까지 경험하기로 결정했다.
3. 내가 구현한 것들
3-1. 검색창 모달
기타 다른 블로그와 같이 검색창이 필요하다고 생각을 했다.
로직은 다음과 같이 작성했다.
검색 아이콘 클릭 ➡️ 모달 오픈 ➡️ 텍스트입력 ➡️ onSubmit시 local에 저장 ➡️ 결과 페이지 전환 ➡️ 모든 포스트의 이름 또는 내용에 텍스트가 포함된다면 렌더링
코드스테이츠에서 배운 모달을 그대로 적용하였고 구글에서 검색한 코드를 응용하여 사용했다.
모달 안에 검색을 입력받을 input태그로 작성한 뒤 onSubmit으로 검색이 되게 진행했다.
3-2. 글 작성 페이지
글 작성을 하려면 md를 code에서 작성하고 다시 build를 해야 한다.
우리는 이를 code에서 작성하는 것보다 velog처럼 admin유저가 글을 쉽게 브라우저에서 작성하고 export하여 쉽게 code에 집어 넣는 것이 편하다고 생각했다.
Markdown editor는 구글 검색했을 때 상단에 나오는 것 중 react-md-ediotr로 골랐다.
왜냐하면 다크모드와 라이트모드를 지원하며 간단하게 props로 원하는 값을 넣으면 자동적으로 렌더링을 해주기 때문이다.
이후 반응형도 고려했기에 화면이 줄어들면 velog와 같이 좌측화면만 나왔어야 하는데 이를 어떻게 구현할 지 생각을 많이 했다. 처음에는 화면 size를 감지하는 library를 생각했는데 팀원이 반응형 css로 해결이 가능하다고 했다.
같이 화면을 보면서 했는데 사용 library의 코드를 분석하여 태그를 확인하고 media query로 조절이 가능할 수 있었다.
4. 결론
첫 프로젝트를 정말 어렵게 끝냈다. 처음이다보니 아는 것도 없고 해결하는 방법도 많이 몰랐다.
그래도 이번 기회를 통해서 다음 경험을 얻었다.
- React와 친해졌다. 작성하는 방법도 어색했고 props에 대한 개념과 state의 활용법을 알 수 있었다.
- 반응형 작업방법을 프로젝트로 경험하고 확인할 수 있었다.
- User Flow를 작성하면서 사람들이 어떻게 경험하게 만들 지를 고민할 수 있었다.
- 개발분야에서 문제와 대면했을 때 해결하는 끈기와 해결방법을 찾는 경험을 얻을 수 있었다.
- Figma를 활용하여 디자인을 해볼 수 있었고 User Flow를 작성하여 사용자들의 경험을 유도하는 방법을 고민할 수 있었다
