📍 원티드 프리온보딩 과정에 참여하여 솔라커넥트 기업과제를 받아 구현해보았습니다.
🛫 Project Overview
숫자를 정렬하는 소팅 머신
작업기간
2021.8.16 ~ 2021.8.17
기술스택
- React
- styled-components
주요 구현사항
제가 개발에 참여한 기능은 ✅로 표시했습니다.
- 타이머
- ✅ toLocaleDateString(), toLocaleTimeString() 내장 함수를 사용한 한국/미국 날짜, 시간 표기
- 숫자 입력
- ✅ 입력 데이터는 정수로 가정하고 쉼표(,) 및 모든 문자열로 숫자를 구분
- ✅ 숫자는 두 개 이상 입력하도록 검증
- 정렬 시작
- Sort 버튼 클릭 시 2개의 Sort 함수가 호출
- 버블정렬을 이용하여 오름차순/내림차순 정렬 기능
- 정렬 결과
- 오름차순/내림차순 결과 렌더링
- ✅ 3초 delay 후 내림차순 렌더링
결과 화면
🚥 Project Review
칭찬하고 싶은 점
Locale 날짜와 시간
자바스크립트 내장함수인 toLocaleDateString(), toLocaleTimeString()를 적절하게 활용했다. 그 전에 원 단위 콤마(,) 표기를 구현한 적이 있어 toLocaleString() 함수를 알고 있었기 때문에 이번 한국/미국 시간 표기를 하려고 할 때 바로 떠올릴 수 있었다.
현재 날짜와 시간의 포맷은 js 코드가 실행되는 시스템에 의존한다. 따라서 한국 외에도 글로벌하게 서비스될 경우 정확한 지역 시간을 표기하는 것이 중요하다.
ISO 8601은 날짜 및 시간 관련 데이터의 교환을 다루는 국제표준인데 '2021-08-21T02:35:45.468Z'과 같은 형태로 표현된다. 백엔드와 날짜를 주고받을 때는 이처럼 국제 표준시(UTC)를 따르는 형태로 주고받고 프론트엔드에서 한국시간으로 바꿔 사용하는 것이 좋다고 한다.
개선하고 싶은 점
-8, 1.5 등 입력값 고려
너무 문제에서 주어진 예시(1, 2, 3, ...)만 생각하고 입력값으로 정수 외에 다른 값은 고려하지 않아도 될 거라고 생각했다. 음수는 미처 생각하지 못했고 실수를 고려해야 하는지 팀원들과 얘기해봤으나 최종적으로 문제 정의에서 나온 정수만 처리하기로 했다.
실제 서비스를 하다 보면 사용자가 예상치 못하게 입력할 수 있는 값이 무수히 많을 텐데 프론트엔드 개발자로서 기본적인 부분을 소홀히 한 것 같아 많이 아쉬웠다. 향후 이어질 기업과제에서는 문제에서 주어진 조건만 고려하는 것이 아니라 항상 사용할 서비스를 개발한다고 생각하며 다양한 상황을 고려해야겠다.
팀 프로젝트 후기
처음 과제를 보고 역할을 나눌 때 정렬에서 오름차순/내림차순 하나씩, 날짜에서 한국/미국 하나씩 나누려고 했으나 막상 구현하려고 보니 오버 커뮤니케이션이 필요할 것 같았다.
정렬과 날짜 표기는 서로 완전히 독립된 기능이고 구현할 기능도 작기 때문에 그냥 깔끔하게 날짜 1명, 정렬 1명으로 나누고 컴포넌트도 타이머, 입력 필드, 결과 필드 3개로 나누어 빨리 끝낸 사람이 1개 더 구현했다.
간단한 과제였기 때문에 각자 개발 후 다른 사람 코드를 보며 이해하는 시간을 가지고 마무리했다.
Thanks to
hurima90-kim님 고생하셨습니다!
