미리보기

기본 정보

이름

이희원

직업

프론트엔드 개발자

간단 소개

주어진 일에 책임을 가지고 최선을 다하며 회사의 성장에 기여하며 보람을 느끼는 이희원 입니다. 개발자를 준비하면서 매일 하루에 하나씩 기술 블로그를 작성하였습니다. 사용자 경험을 가장 중요하게 생각하고, 클린코드를 지향하고 테스트 코드 작성을 습관화하는 프론트 엔드 개발자로 성장하고자 합니다. 또한, 어떤 상황에서든 유연하게 대처 하고 능동적인 태도와 이해력, 빠른 판단력을 바탕으로 항상 최고의 결과를 추구합니다.

기술 스택

HTML/CSS, JavaScript, React, TypeScript, Next.js, Redux, redux-toolkit, react-query, tailwind-css, vercel, Git, GitHub

프로젝트

프로젝트명

what surv

소속/기관명

스파르타 내일배움캠프

프로젝트 기간

2024.01. ~ 2024.02.

프로젝트 내용

IT 업계 종사자들을 위한 설문조사 웹사이트 입니다.

참여인원 : 프론트 4명

사용 스킬

Next.js, TypeScript, Firebase, Tanstack Query, Tailwind css, Next Ui, Vercel, React-Icons, React-spinners, Canvas-confetti

구현한 부분
: 메인 페이지, 설문 참여 페이지, 이용 가이드 페이지, FAQ 페이지 / 전반적인 디자인

메인페이지

사용되지 않는 자바스크립트 제거

@next/bundle-analyzer 사용 unused JS 코드 86% → 40% 감소
성능 32점 → 91점 향상

img 확장자 변경으로 LCP 개선

메인에서 사용되는 참여해 surv 이미지 확장자 png, LCP 속도 저하의 원인
next.config.js에서 images format ['image/avif', 'image/webp']로 설정

First Load JS 축소

next/dynamic dynamic import 사용
First Load JS 크기 77% 축소 (365kb → 83kb)

IT 설문 페이지

next/dynamic dynamic import 사용
First Load JS 크기 77% 축소 (365kb → 83kb)

설문 참여 페이지

tanstack query 이용하여 post collection 불러오기
설문 조건 및 질문 출력

FAQ 페이지

사이트 방문자가 궁금증을 가질 수 있는 질문에 대한 답변을 제공하기 위해 Faq 페이지 구현

이용가이드 페이지

사이트 이용 방법이 어렵다는 13.8%의 유저 피드백
사용자의 입장에서 설문 참여와 설문 생성 절차를 단계별로 분류하여 구현

트러블 슈팅

중복 코드 리팩토링

설문조사 게시물 렌더링에 관련된 코드와 함수의 중복
중복 코드를 컴포넌트로 추출
중복 코드 내의 기능 코드 컴포넌트로 변환 → 코드 세분화

타입 관련 빌드 오류 해결

설문조사 마감 기한 출력을 위해 타입을 timestamp로 설정
yarn build 중에 timestamp에서 Minified React error #31 발생.
타입을 string으로 변경하여 해결

시간 타입 재설정

[ As-is ] 설문조사 deadline 타입 timestamp
[ Error ] Minified React error #31 발생
[ To-be ] deadline 타입을 timestamp → string 변경

기술적 의사결정

쾌적한 사용자 경험을 위한 페이지 이동

[ As-is ] 페이지 이동 없이 쿼리 스트링 활용 → URL만 변경되도록 구현
사용자 입장에서 스크롤을 내리지 않으면 페이지 변화를 느낄 수 없음
[ To-be ] UX 개선을 위해 Next.js의 Link 태그 활용하여 페이지 이동 구현

프로젝트명

모멘텀

소속/기관명

스파르타 내일배움캠프

프로젝트 기간

2023.12. ~ 2024.01.

프로젝트 내용

모멘텀(M5MENTUM)은 새해 목표관리 웹 어플리케이션 입니다.
사용자는 스스로 정한 새해 목표를 등록하고, D-day를 확인하며 달성도를 체크해 나갈 수 있습니다.
다른 사용자들이 등록한 목표도 살펴 보면서 동기부여가 될 수 있도록 만들었습니다.

참여인원 : 4명
2023.12.26 ~ 2024.01.02

사용 스킬

Next.js, TypeScript, Tailwind css , react-query, Recoil

사이트 구성
메인 페이지 / 커뮤니티 페이지 / About 페이지 / 로그인, 회원가입

구현한 부분

로그인, 회원가입

로그인 / 회원가입 기능 구현

정규표현식 유효성 검사
match 메서드 + 정규 표현식 사용 → 이메일, 비밀번호, 닉네임 검사
mui textfield 컴포넌트의 helperText 속성 사용 → 유효성 검사 문구 출력

트러블 슈팅

Supabse Auth 에러 핸들링

Supabase Auth 관련 에러 핸들링이 필요
빈 세션이 리턴됨을 발견
빈 세션을 조건으로 직접 new Error() 로 에러 생성
Error 인스턴스로 조건문을 작성하여 에러 핸들링 해결

기술적 의사 결정

firebase vs supabse

supabse의 경우, SQL을 활용하여 관련된 데이터를 효율적으로 처리함.
클라이언트 사이드 코드와 서버 사이드 코드가 동일 → Next.js의 강점 극대화
firebase 경험자가 많았지만 신 기술 사용 도전

프로젝트명

winter wonderland guide

소속/기관명

스파르타 내일배움캠프

프로젝트 기간

2023.12. ~ 2023.12.

프로젝트 내용

지도 api를 활용하며 전국에 개최 중(및 개최 예정)인 크리스마스 및 겨울 축제에 대한 정보를 안내하는 사이트 입니다.

참여 인원 : 4명
2023.12.05 ~ 2023.12.08

사용한 스킬

React, Redux, Redux tool kit, styled-components, 카카오맵 API, firebase

구현한 부분

Home - 인기 축제 카르셀
search - 검색 필터 창

메인 페이지

인기 축제 카르셀 기능 구현

React Carousel 라이브러리 사용하여 구현 → 클릭 시 축제 상세 정보 페이지로 이동

내 주변 축제 찾기 페이지

검색 기능 구현

React datepicker 라이브러리 사용
사용자가 원하는 시작 일과 종료 일을 설정할 수 있게 range 설정
지역을 시/도 , 군/구 로 분류하여 구현
사용자가 설정한 조건 = 데이터베이스의 데이터 주소 일 때만 화면 렌더링
필터링 초기화 버튼 구현

트러블 슈팅

Timestamp 값 오류 해결

firebase의 timestamp는 JavaScript의 Date 객체와 호환 X
데이터를 가져오는 과정에서 오류 발생
toDate() 메서드를 사용하여 timestamp를 date 객체로 변환하고 문자열로 변환

초기 값 설정 오류 해결

비동기 처리 로직이 완료되기 전에 null 값으로 접근하여 데이터가 없다는 오류 발생.
축제 데이터를 담는 변수의 초기 값이 null로 설정된 게 문제
빈 배열로 변수 초기화하여 해결

custom hook 사용 → 리팩토링

useState와 input 연결 시, onChange 함수 중복 발생
custom hook 사용 → 리팩토링

기술적 의사 결정

기술 스택에 맞는 API 고르기

JavaScript기반 Kakao Maps API 사용으로 SPA를 구현할 수 없었음.
React Kakao Maps API로 변경
적절한 기술 스택에 맞는 API를 사용해야만 원활한 개발이 가능하다는 점을 배움

프로젝트명

너 내 동료가 돼라

소속/기관명

스파르타 내일배움캠프

프로젝트 기간

2023.11. ~ 2023.11.

프로젝트 내용

이 프로젝트는 게임을 같이할 사람을 구하는 웹사이트를 개발하는 프로젝트입니다. 이 프로젝트를 통해 게임을 좋아하는 사람들이 서로 만나 함께 게임을 즐길 수 있도록 하는 것을 목표로 합니다.

참여 인원 : 4명
2023.11.21 ~ 2023.11.24

사용한 스킬

HTML5, CSS, Javascript, React, Redux, Firebase

구현한 부분

사용자 닉네임, 한줄 소개, 좋아하는 게임 재설정

프로필 수정 시, 새로운 유저 정보를 객체로 생성
그 객체를 firebase auth에 저장

사용자 추천 / 비추천 버튼

추천 또는 비추천 버튼을 클릭 시, 각 버튼 클릭에 따라 해당하는 카운트 증가 → 상태 변경

코멘트창 및 댓글 기능

트러블 슈팅

쿼리 스냅샷으로 유저 정보 실시간 업데이트

마이 페이지에서 사용자 정보를 수정 후, 바로 반영되지 않는 문제 발생
Firestore의 쿼리 스냅샷을 사용하여 사용자 정보가 저장된 문서를 확인
해당 문서의 작성자 이메일이 사용자의 이메일과 일치하는지 확인
사용자의 정보를 업데이트하고 새로운 데이터를 생성하여 업데이트할 문서의 참조를 생성
Promise 배열을 사용하여 업데이트 작업을 비동기적으로 처리
사용자 정보가 포함된 모든 곳에 적용

포트폴리오

URL

link

포트폴리오

교육

소속/기관명

제주대학교

종류 | 전공

대학교(학사) | 정치외교학과

재학 기간 | 재학 상태

2021.03. ~ 2021.08. | 중퇴

소속/기관명

스파르타 내일배움캠프

종류 | 전공

사설 교육 | KDT 프론트엔드 개발자 양성과정

재학 기간 | 재학 상태

2023.10. ~ 2024.02. | 졸업

자격증

자격증명

JLPT

점수 | 발급기관

N1 | 일본국제교육지원협회

취득연월

2021.07.

자기소개

개발자가 되기로 한 계기

프론트엔드 개발자로서의 꿈을 키우게 된 계기를 간단히 소개하고자 합니다. 예전에 카페에서 일하면서 제게는 작지만 의미 있는 경험이 있었습니다. 카페에서 키오스크로 주문을 하는 형식이였는데, 이를 통해 개발에 대한 더 큰 흥미를 갖게 되었습니다.

손님들이 키오스크를 사용하는 것을 관찰하면서, 메뉴가 복잡하고 사용이 어려운 경우가 있음을 알게 되었습니다. 특히 연세가 많으신 분들은 키오스크 사용에 어려움을 겪는 경우가 많았습니다. 더불어, 디저트류와 같은 주문에는 조리 시간이 필요하다는 점을 사전에 알려주는 안내가 없어서 손님들이 대기하는 동안 불편함을 느끼는 경우도 있었습니다.

그런 경험을 통해 사용자 경험(UX)의 중요성을 깨달았습니다. 사용자가 원활하게 서비스를 이용할 수 있도록 하는 것이 개발의 핵심이라고 느꼈습니다. 또한, 사용자와 직접적으로 가까이에서 일하며 사용자의 니즈를 이해하고 반영할 수 있는 프론트 엔드 개발자가 되기로 마음먹었습니다.

이러한 경험을 통해 UX를 중시하는 개발자로서의 역량을 갖추고, 사용자와 가장 가까운 곳에서 개발에 참여하고 싶습니다. 제가 가진 열정과 경험을 토대로 좋은 사용자 경험을 제공하는 프론트를 개발하는 데 기여하고자 합니다.

그동안 본인의 역량을 키우기 위해 기울인 노력

[1일1글 기술 블로그 작성하기]

저는 글 쓰는 것을 좋아합니다. 부트캠프를 진행하면서 날마다 배우거나 느꼈던 점을 기술 블로그에 기록하였습니다. 하루에 한개씩 작성하면서 꾸준함을 키울 수 있었습니다.

[새로운 기술 적응력 및 학습 열정]

팀 프로젝트에서 DB 기술적 결정에 있어서 새로운 기술 도입을 위해 공식 문서 및 관련 정보를 찾아보고 팀원들에게 공유하며, 신 기술에 대한 학습 의지를 나타냈습니다. 원래 성격도 새로운 도전을 좋아하고 새로운 무언가를 배울 때 기쁨을 느끼는 성향이라 어려움 없이 즐길 수 있었습니다.

[백엔드 학습하기]

백엔드 쪽 지식이 빈약하여 지금도 꾸준히 학습하고 있습니다. 기술 블로그나 개발 커뮤니티를 찾아보며 지식을 쌓고, 조그만한 프로젝트라도 만들어보며 부족한 부분을 채워나가고자 노력하고 있습니다.

성격의 강점과 단점

‘나만의 규칙으로 업무 효율 높이기’

저는 '규칙과 체계'를 좋아하는 성격입니다. 이러한 성향은 제가 업무를 보다 체계적으로 관리하고 효율적으로 수행할 수 있게 해주었습니다. 편의점 아르바이트를 할 때, 인수인계 과정에서도 나만의 규칙을 만들어 문서화함으로써 업무의 흐름을 원활하게 유지할 수 있었습니다. 이러한 접근 방식은 업무 효율성을 높이고 실수를 줄여주었습니다.

그래서 ‘나만의 근무 규칙’을 만들었습니다. 예를 들어, 입고된 물류의 수량을 기록하는 방법이나 신상 물품의 배치 방법, 시간 내에 해야할 일 등을 규칙으로 만들어 문서화했습니다. 이를 통해 업무 환경 내에서 일관된 업무 방식을 유지할 수 있었고, 인수인계 과정에서도 실수를 줄일 수 있었습니다.

예를 들어, 입고된 물류의 수량을 기록하는 방법이나 신상 물품의 배치 방법, 시간 내에 해야할 일 등을 규칙으로 만들어 문서화했습니다. 이를 통해 업무 환경 내에서 일관된 업무 방식을 유지할 수 있었고, 인수인계 과정에서도 실수를 줄일 수 있었습니다.

또한, ‘규칙 준수’라는 강점은 팀 프로젝트에서는 정한 코드 컨벤션과 깃 전략을 엄격히 준수하여 개발을 진행했습니다. 문제가 발생했을 때는 규칙을 심하게 벗어나지 않는 선에서 유연하게 해결하고자 했습니다. 이는 팀원 간의 협업을 원활하게 하고 프로젝트의 안정성과 효율성을 높일 수 있었습니다.

‘모르는 건 잘못이 아니다’

저의 단점은 ‘자신의 부족함을 인정하지 않고 질문하기를 꺼리는 소극적인 태도’입니다. 이러한 태도는 학창 시절부터 시작되었고, 부트캠프에서의 프로젝트 진행 중에도 계속되었습니다. 자신의 부족함을 인정하지 못하고 겁내어 질문하거나 도움을 요청하는 것을 꺼렸습니다. 이렇게 소극적으로 행동하면서 자신의 성장을 막았고, 자존감이 떨어지는 일도 있었습니다.

하지만 최종 프로젝트에서는 이러한 소극적인 태도를 극복하고자 했습니다. 당당하게 모르는 부분을 인정하고, 적극적으로 맡고 싶은 기능을 제안하고 구현하는 과정에서 인터넷을 검색하고 팀원들에게 질문을 했습니다. 생각보다 극복하는 게 어렵지 않았고, 결과적으로 프로젝트에 긍정적인 영향을 미쳤습니다.

팀워크를 발휘해 공동의 목표를 달성한 경험

‘위기를 기회로!’

최종 프로젝트 진행 중에 발생한 몇 가지 문제점을 위해 적극적으로 대처하고 주도적으로 행동했습니다.

첫 번째로, 디자이너의 하차로 인해 삭제된 디자인 시안을 보완하기 위해 적극적으로 행동했습니다. 기존에 완성된 메인 페이지를 기준으로 남은 페이지의 디자인 시안을 직접 작업하여 팀의 개발 진행에 도움을 주었습니다. 이를 통해 팀이 프로젝트를 원활하게 이어 나갈 수 있도록 지원했습니다. 이 과정에서 창의성과 문제 해결 능력이 발휘되었습니다.

두 번째로, 프로젝트의 기획을 새로운 방향으로 조정하여 팀의 목표에 더욱 부합하도록 했습니다. 프로젝트의 주제는 it 업계에 종사하고 있는 사람들을 위한 설문조사 웹 사이트 입니다. 기존에 설문조사 웹사이트로 기획한 프로젝트는 외부 설문의 URL만 가져와 게시물로 올리는 형식이었습니다. 프로젝트 피드백 당시, 그런 의도라면 설문조사 보단 커뮤니티의 목적이 강하다는 피드백을 받게 되었습니다. 그래서 직접 사용자가 설문을 제작할 수 있도록 만들자는 해결 방안을 제시했고, input과 같은 form 태그를 사용해 설문 항목을 만들고 firebase의 database를 사용하여 설문에 필요한 정보들을 저장하도록 설계했습니다.

마지막으로, 사용자 경험을 개선하기 위해 사이트 디자인에 특별한 주의를 기울였습니다. 사용자들이 다른 설문조사 사이트보다 덜 딱딱한 느낌을 받고, 누구나 쉽게 이용할 수 있는 서비스로 인식할 수 있도록 사이트 디자인을 신경 쓰는 등 사용자 중심의 접근 방식을 채택했습니다.

이렇듯 저는 팀의 목표 달성을 위해 적극적으로 대처하고, 문제 해결을 위한 새로운 아이디어를 제시하며, 팀원들과의 협력을 통해 프로젝트를 성공적으로 이끌었습니다.