Portfolio

💡

논문컨설팅을 위한 클라이언트와 컨설턴트매칭 서비스 플랫폼입니다. FE-1명, BE-1명으로 진행했고 모든 디자인과 페이지, 기능을 담당하였습니다.

📝 회고

💡

공동 창업을 하며 어려웠던 점과 배운 점을 위주로 작성했습니다.

어려웠던 점

얕은 지식으로 맨 땅에 헤딩 하듯 개발했던 것 자체가 가장 어려웠던 것 같습니다. 학교에서 배웠던 정말 기초적인 리액트 지식과 독학으로 인터넷 강의를 보며 따라했던 수준에서 시작하려하니 정말 모르는 것 투성이였습니다. 이때 기술 서적과 공식문서를 많이 찾아보면서 한 기술을 배울 때 기본기가 중요한 것을 알게 되었습니다.

대표 1명, BE 1명, FE 1명 총 3명으로 창업을 진행했었는데, 대표님이 직장을 다니시면서 스텔스창업을 하신거라 커뮤니케이션에서 많은 어려움을 겪었습니다. 제대로 된 기획서나 디자인 없이 필요할 기능들만 말씀해주셨고, 개발자 둘이 알아서 판단하여 개발을 했었습니다. 그러다 보니 서로가 다르게 생각한 부분들이 빈번하게 있었고 그 때마다 기능과 디자인을 수정해야하는 번거로움을 겪었습니다. 이런 과정들을 거치면서 하나의 프로젝트를 할 때 기획과 디자인, 기능 명세서 같은 문서화의 중요성과 커뮤니케이션의 중요성을 느낄 수 있었습니다.

좋았던 점 및 배운 점

한 회사의 프로젝트 초기 세팅부터 사용자가 유입 되기까지의 과정을 모두 경험한 것이 좋았습니다. 프론트엔드 개발자로서 “우리 서비스를 사용하는 사용자가 어떻게 느낄까?”라는 의문을 그때부터 항상 생각하게 되었습니다. 그리고 지인들의 피드백을 많이 받으면서 개발자의 시선과 사용자의 시선이 많이 다르다는 것을 배웠고 그 과정에서 사용자 피드백이 더 나은 서비스를 만드는데 꼭 필요한 과정이라는 것을 배울 수 있었습니다.

프론트엔드 아키텍처의 중요성을 배웠습니다. 페이퍼리 개발을 했을 당시에는 기술을 습득하고 빨리 구현하기에 급급했고, 재사용성 부분에 대해 생각을 못하면서 개발을 진행했었습니다. 그렇게 프로젝트의 규모가 점점 커지면서 디버깅이 너무 힘들어지고 성능도 안좋아지는걸 느낄 수 있었습니다. 비즈니스 로직과 View 로직을 분리하는 것에 초점을 두고 리팩터링을 진행할 계획입니다.

🛠️ 사용한 기술 스택

JavaScript React

Axios Recoil Sass(SCSS) Material-UI

ESLint Prettier

🚀 구현

React-Hook-Form으로 불필요한 리렌더링 방지 및 유효성 검사 컴포넌트 설계

서비스 특성 상 많은 Form이 필요했고, Form에 입력을 할 때마다 리렌더링을 막기 위해 React-Hook-Form을 도입

yup 라이브러리와 정규표현식으로 Form의 유효성 검사를 비교적 간편하게 구현

스키마 코드


import * as yup from 'yup';

import { FORM_ERROR_MESSAGES } from './constants/messages';

const regex_email =
	/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])+@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])+\.[a-z]{2,3}$/;
const regex_password = /^(?=.*[a-zA-Z])(?=.*[!@#$%^&*+=-])(?=.*[0-9]).{4,25}$/;

export const joinSchema = yup.object().shape({
	nickname: yup
		.string()
		.required(FORM_ERROR_MESSAGES.NICKNAME_REQUIRED)
		.min(2, FORM_ERROR_MESSAGES.MIN(2))
		.max(16, FORM_ERROR_MESSAGES.MAX(16)),
	email: yup
		.string()
		.required(FORM_ERROR_MESSAGES.EMAIL_REQUIRED)
		.matches(regex_email, FORM_ERROR_MESSAGES.EMAIL_PATTERN)
		.email(FORM_ERROR_MESSAGES.EMAIL_PATTERN),
	password: yup
		.string()
		.required(FORM_ERROR_MESSAGES.PASSWORD_REQUIRED)
		.matches(regex_password, FORM_ERROR_MESSAGES.PASSWORD_PATTERN)
		.min(4, FORM_ERROR_MESSAGES.MIN(4))
		.max(20, FORM_ERROR_MESSAGES.MAX(20)),
	passwordConfirm: yup
		.string()
		.required(FORM_ERROR_MESSAGES.CONFIRM_PASSWORD_REQUIRED)
		.oneOf([yup.ref('password')], FORM_ERROR_MESSAGES.CONFIRM_PASSWORD),
});