미리보기

기본 정보

이름

이의찬

직업

프론트엔드 개발자

간단 소개

<가치를 만드는 FE 개발자 이의찬입니다> 저는 가치있는 프로덕트를 만들기 위해 이런 부분을 고려해서 개발하고 있습니다. 1. 개발로 문제를 해결하기 위해 책상 앞에서 문제를 상상하는 대신 유저의 입장에서 생각합니다. 도메인의 특성을 파악하고, 어떤 기능이 필요할지 고민합니다. 2. 클린하고 일관적인 코드만을 남기기 위해 재사용성이 뛰어난 컴포넌트를 만들어 유지보수성을 높이고자 합니다. 구현, 수정사항 등 Pull Request을 상세하게 작성하고, 능동적으로 의견을 주고받습니다. 병합에 책임감을 가지고 리뷰를 진행하며, 의문이 있다면 적극적으로 코멘트를 남깁니다.

기술 스택

JavaScript, TypeScript, React, Next.js, React Native

프로젝트

프로젝트명

스타게이트

소속/기관명

삼성청년SW아카데미

프로젝트 기간

2023.07. ~ 2023.08.

프로젝트 내용

화상통화를 이용한 비대면 팬사인회 서비스입니다. 현직 개발자의 심사를 통해 삼성청년SW아카데미 우수 프로젝트로 선정되었습니다.
📺관리자 시연 영상
📺팬 시연 영상
구성 : Frontend 3인, Backend 3인
역할 : Frontend / 팀장

사용 기술

React
TypeScript
Tailwind CSS
Recoil

문제 해결.

팬사인회 입장 대기시간을 1000ms마다 1초가 줄어들도록 구현했으나, 탭 비활성화 시 최대 60000ms까지 시간이 증가하였습니다.
Page Visibility API를 활용해 사용자가 해당 탭으로 돌아올 때, 다시 데이터를 가져오도록 하여 해결하였습니다.
하지만 서버 리소스와 UX측면에서 약간의 손해를 감수한 방안이였습니다. 추가적인 개선을 위해 Web Worker를 도입, 백그라운드에서도 타이머가 동작하도록 했습니다.
또한 setInterval이 Firefox에서 정상적으로 작동하지 않는 이슈가 있어 userAgent를 사용, 유저에게 경고문을 보여주도록 하였습니다.

Other Contribution.

메인 대시보드 구현 및 loading 상태에 따른 스켈레톤 UI 처리
연예인 그룹/멤버 관리, 팬사인회 진행 일부 구현
이후 리팩토링을 통해 중복된 JSX문 제거
Package Manager선택을 위해 학습한 후 팀원과 공유
유저를 고려한 문제점 파악 / 해결책 제안을 위해 구글 폼 설문과 비대면 팬사인회 경험자 인터뷰 진행

프로젝트명

모익

소속/기관명

삼성청년SW아카데미

프로젝트 기간

2023.08. ~ 2023.10.

프로젝트 내용

잊기 쉬운 카드 혜택, 기프티콘을 지도를 이용해서 보여주는 핀테크 서비스입니다.
📺시연 영상
구성 : Frontend 3인, Backend 3인
역할 : Frontend

사용 기술

Next.js
TypeScript
Tailwind CSS

문제 해결.

타이머가 정확하게 동작하지 않는 이슈가 있었습니다.
setInterval과 setTimeout이 런타임에 따라 동작이 어떻게 달라지는지 학습하여 해결하였습니다.
로그인 여부에 따른 접근제한 처리가 필요했습니다.
우선 토큰 여부에 따라 이동시키는 Hook을 구현, 로그인 관련 페이지와 Navbar에 넣어 해결하고, 이후 쿠키에 담긴 Refresh Token의 여부를 확인하고 곧바로 리다이렉트 하도록 개선하였습니다.

Other Contribution.

로그인/회원가입과 아이디/비밀번호 찾기 등 회원관리 기능
JWT 관리, 로그인 여부에 따른 리다이렉트 처리 등 프론트엔드 보안
유저 인증 상태 관리를 위해 세션/토큰 기반 인증을 학습하고 JWT와 OAuth를 사용해 구현
재사용성과 유지보수성을 위해 Atomic 패턴을 사용해서 회원관리 구현
모바일 사용을 우선으로 하는 프로덕트임을 고려해 PWA 설정

프로젝트명

관리하당

소속/기관명

삼성청년SW아카데미

프로젝트 기간

2023.10. ~ 2023.11.

프로젝트 내용

가족과 함께하는 당뇨 관리 App입니다.
구성 : Frontend 2인, Backend 4인
역할 : Frontend

사용 기술

React Native
TypeScript
styled-component
Redux
React-query

문제 해결.

같은 데이터를 상단에는 그래프로, 하단에는 날짜별 카드 형식으로 보여줘야하는 화면이 있었습니다.
무한 스크롤을 도입해, 카드를 가져올때마다 그래프를 업데이트 하도록 했습니다.
검색 과정에서 지나치게 많은 api 호출이 일어나 Debounce를 사용해 api 호출을 지연시켰습니다.

Other Contribution.

혈당 등록 및 관리 기능
식단 검색, 등록 및 관리 기능
클린하고 일관적인 프로덕트를 위해 상세한 PR 작성 및 적극적인 리뷰
상황에 알맞은 폴더구조 사용

포트폴리오

URL

link

웹 이력서

link

블로그

link

Github

교육

소속/기관명

삼성청년SW아카데미

종류 | 전공

사설 교육 | Web(Java / JavaScript)

재학 기간 | 재학 상태

2023.01. ~ 2023.12. | 졸업

소속/기관명

영남대학교

종류 | 전공

대학교(학사) | 철학, 컴퓨터공학/인문, IT

재학 기간 | 재학 상태

2016.03. ~ 2023.02. | 졸업

대외활동

활동명

삼성청년SW아카데미 9기 Web(Java / JavaScript)

소속/기관명

삼성청년SW아카데미

연도

내용

삼성전자에서 주관하는 삼성청년SW아카데미에 9기 교육생으로 선발되어 교육을 수료했습니다.

첫 6개월간은, Frontend와 Backend, DB를 학습하며 Web 개발의 기본을 익혔습니다.
또한 자료구조와 알고리즘에 대한 지식을 익혀 모의 삼성SW역량테스트에서 A형(Advanced 등급)을 취득하였습니다.
이후 6개월 간 3차례의 프로젝트를 프론트엔드 개발자로 진행하였습니다. 현직 개발자 심사를 통해 우수 팀으로 선정되기도 했습니다. 상세한 내역은 프로젝트 항목을 참조 부탁드립니다.

활동명

새싹톤 1회

소속/기관명

기타

연도

내용

서울시와 카카오, 구름에서 주최한 “새싹톤”에 5.3 : 1의 경쟁률을 뚫고 본선에 참여하였습니다.

휠체어 사용자를 위한 지하철 서비스, <모두의 지하철>을 제작하여 출품하였습니다.
이 과정에서 실제 휠체어 사용자들과 인터뷰를 진행하며 유저의 입장에서 문제를 바라보고, 역무원과의 인터뷰를 통해 도메인 환경을 파악하였습니다.
현업 기획자, 디자이너와 함께 작업을 하며 개발의 프로세스에 대한 경험을 쌓을 수 있었습니다. 좀 더 자세한 사항은 블로그를 참조 부탁드립니다.

활동명

멋쟁이 사자처럼 대학 10기

소속/기관명

멋쟁이 사자처럼

연도

내용

연합 개발 동아리 멋쟁이 사자처럼 대학 10기에 Frontend로 참여하였습니다.

JavaScript와 React를 사용하는 Frontend 교육을 수료한 후, 아이디어톤 1회와 해커톤 2회 등 여러 공모전에 참여하였습니다.
이를 통해 기술로 문제를 해결하는 경험을 하며 개발자로의 진로를 결정하게 되었습니다.

자기소개

안녕하세요. 가치를 만드는 신입 프론트엔드 개발자 이의찬입니다. 저의 두 가지 강점을 소개드리고 싶습니다.

<1. 기술로 문제를 해결하기>

비즈니스의 문제 상황을 기술적으로 잘 풀어내는 것은 개발자로서 가장 중요한 부분이라고 생각합니다. 아래는 제가 "비대면 팬사인회 서비스, 스타게이트"의 문제를 해결하려 했던 경험입니다.

문제

팬사인회까지 남은 시간을 보여줘야 했기에 setInterval을 사용해 1000ms마다 1초가 줄어들도록 구현하였으나, 시간이 정상적으로 줄어들지 않았습니다. 비대면 팬사인회는 연예인 1명 당 60~120초로 진행되기에, 만약 오차가 누적되어 30초 정도가 지연된 상태로 입장한다면 사용자는 대단히 불쾌한 경험을 하게 될 것입니다.

접근 방법

우선 문제가 "언제", "어떻게" 발생하는지 파악하고자 했습니다. 코드를 작성해 setInterval의 동작 시간을 측정하자, 탭이 비활성화 될 때 CPU와 메모리가 정리되며 1초당 최대 60000ms까지 오차가 발생하고 있었습니다.

고려한 해결 방안

1초마다 서버에서 시간을 가져오기

정확한 시간을 출력할 수 있지만, 많은 유저가 접속할 경우 서버에 부담이 생길 수 있습니다.

탭이 활성화 될 때, 서버에서 시간을 가져오기

서버의 리소스를 1번보다 적게 사용하지만, 변경 이전 시간이 잠깐 보여 사용자 경험에 좋지 않을 수 있습니다.

가짜 audio로 강제로 탭의 비활성화 막기

서버의 리소스를 사용하지 않지만, 모바일 환경의 경우 오디오 점유 등의 문제가 발생할 수 있습니다.
저는 UX와 서버를 모두 고려해 2번 방법을 선택, Page Visibility API를 사용해 구현하였습니다.

추후 개선

하지만 고려했던 세 가지 방법이 모두 서버 리소스를 사용하거나 혹은 UX에 악영향을 미칠 수 있다는 점에서 아쉬움이 있었습니다. 이에 좀 더 나은 해결책을 찾다가 메인 스레드 대신 백그라운드 스레드를 사용하는 Web Worker에 대해서 알게 되었습니다. 이를 사용해 탭이 비활성화되더라도 계속해서 타이머가 동작하도록 해 UX와 서버 리소스를 모두 개선했습니다.

문제를 해결하기 위해 Web Worker와 같은 새로운 기술을 탐구했고 문제 해결에 적용했습니다. 이를 통해 기술로 새로운 가치를 창출하고 풀 수 없어 보이던 문제를 창의적으로 해결해나가는 경험을 했습니다.

<2. 문제를 정확하게 인식하고, 가치에 공감하기>

개발자로서 가치를 창출하기 위해 기술로 문제를 해결하는 것을 좋아합니다. 하지만 문제를 해결하기 전, 제대로 문제를 정의하고 이해하지 못한다면 문제를 잘못 해결하거나 엉뚱한 해답이 나올 수 있습니다. 문제를 해결하기 전에 먼저 도메인을 이해하고 가치에 공감해야 한다고 생각합니다.

저는 지금까지 제 주위에 있는 문제점들을 발견하고 이 문제점을 해결해나가기 위해 노력했습니다.

비대면 팬사인회의 불편함을 개선하기 위한 <스타게이트>, 휠체어 사용자들의 지하철에서의 불편함을 해결하기 위한 <모두의 지하철>, 당뇨환자와 가족을 위한 <관리하당> 등 다양한 프로덕트를 개발하였습니다(웹 이력서를 참조해 주시면 감사드리겠습니다). 위의 프로덕트를 개발하는 동안 단순히 사이드 프로젝트를 위한 기획을 하는 것이 아니라 유저에게 어떤 가치를 주어야 할지, 어떤 불편함을 해결해야 할지 항상 고민해왔습니다.

이를 위해 책상 앞에서 유저의 문제점을 상상하는 대신 유저들에게 먼저 다가가 인터뷰를 가지고, 설문조사를 진행하며 서비스를 기획했으며, 도메인 지식을 파악하기 위해 현장에서 일하는 사람들과 인터뷰를 진행하기도 했습니다.

이런 경험을 통해 저는 해결해야 할 문제를 인식하고 가치를 공감하는 부분에 있어서 강점을 지니고 있고, 이 능력을 기반으로 비즈니스 문제 해결을 더 잘해 나갈 수 있는 능력이 있다고 믿습니다.