미리보기
기본 정보
저는 최적화를 향해 나아가는 Front-End개발자 이유한입니다. 서비스 최적화를 이뤄내 사용자 경험을 끌어올릴 수 있는 개발자를 목표로 나아가고 있고 렌더링 성능 개선과 웹 접근성 향상에 대해 관심을 가지고 있습니다. 현재는 SSR에 관심을 갖고 Next.js를 학습하고 있습니다. ES6를 활용해 SPA 환경에서의 웹 프론트엔드 개발을 주로 하였고 반응형 디자인을 통한 웹앱 프로젝트 진행 경험이 있으며 타입 명시와 클린 코드를 준수하며 개발하려 탐구하고 있습니다. 2023년 SSAFY에서 알고리즘에 기반한 자바 웹개발 교육 과정을 수료하였으며 실무에 기반한 팀 프로젝트를 통해 Slack, Jira, Gitlab 등 협업 툴에 대한 경험이 있습니다. 팀 구성원들과의 커뮤니케이션을 중요시하며 모르는 것을 해결할 때, 새로운 것을 학습할 때 즐거움을 느끼는 개발자입니다.
기술 스택
React, JavaScript, TypeScript, Vue.js, Next.js, Redux, tailwind-css, Java, Spring Boot, Node.js, MySQL
프로젝트
GamePT
삼성 청년 SW 아카데미
2023.10. ~ 2023.11.
[프로젝트 소개]
생성형 AI를 이용한 TRPG 형식의 스토리 텔링 웹 게입 서비스
[기술 스택]
FE: React, Typescript, Jotai, TailwindCSS, Sock.js, Vite
[GIthub]
[팀구성]
BE 3명, FE 3명
[상세역할]
- FE 팀장 및 개발, 기여도 50%
- 프로젝트 구조 : 게임 특성 상 페이지가 많지 않고 공통된 컴포넌트가 많아 Atomic Design 패턴 도입해 프로젝트 구조화
- 웹소켓 연결 및 해제 로직 구현 : sockjs-client와 Stomp.js 라이브러리를 사용해 스프링 서버와의 웹 소켓 연결 로직 구현
- SSE 통신 연결 및 해제 로직 구현 : SSE 통신 연결해 ChatGPT와 같이 한글자씩 서버로부터 받아와 사용자에게 빠른 전달, 이에 따른 컴포넌트 간 상태 관리 로직 구현
- 게임 플레이 및 이벤트 처리, 엔딩 로직 구현 : 게임 플레이 로직 및 이벤트 처리 로직, 이벤트 발생 시 이를 감지 후 이벤트 별 맞는 로직으로의 분기, 각 이벤트 별 선택에 대한 적절한 로직으로의 분기 처리 및 로직, 게임 종료 시 엔딩 페이지로의 연결 및 엔딩 요청 처리 & 게임 나가기 시 로컬의 데이터 종료 후 엔딩 요청 구현
- 로컬 스토리지에 게임 데이터 저장 로직 : 프롬프트를 사용자 로컬의 IndexDB에 저장해 재접속 시 사용했던 기록 남아있도록 구현, 프롬프트가 길어져도 충분히 저장 가능하도록 IndexedDB 선택
[프로젝트 성과]
- 관련 레퍼런스가 없던 Sockjs와 Vite의 global 객체에 대한 충돌 문제를 해결하며 문제 해결 역량 성장
- IndexedDB를 활용해 재접속 시에도 게임 기록이 남아있도록 하여 사용자 경험 최적화를 고려
- 프롬프트의 잦은 상태 업데이트를 관리하며 Custom Hook을 사용해 최적화를 이룸
- 코드 리뷰를 통해 팀원 간 코드의 단점과 다른 관점에서의 코드를 경험 및 에러의 사전 예방을 경험하며 협업에 대한 역량 향상
- 확장성을 고려한 개발을 통해 도전정신 향상
- 일주일 동안 누적 사용자 수 146명 달성
dkslgg
삼성 청년 SW 아카데미
2023.08. ~ 2023.10.
[프로젝트 소개]
빅데이터 분석을 통한 리그오브레전드(League Of Legends) 전적 조회 및 플레이 성향 추천 서비스
[기술 스택]
React, Javascript, Jotai, styled-components, Vite
[Github]
[팀구성]
BE 4명, FE 1명, Data-Analyze 1명
[상세역할]
- FE 팀장 및 개발, 기여도 100%
- 전체적인 FE 개발
- 회원가입/로그인 : 정규표현식을 활용하여 유효성 검사 구현, JWT 인증 방식을 활용한 로그인 유지 및 관리 기능 구현
- UI 컴포넌트 구현 : Styled-Components를 사용해 전체적인 프론트 페이지 UI 개발 및 구현
- Atom 방식 상태 관리 : Jotai 라이브러리를 사용하여 전적 데이터 및 사용자 데이터를 서버에 요청하여 전역 상태로 저장해 프로젝트 전체에서 사용. 요청 메서드 및 에러 처리 구문을 Jotai 메서드로 만들어 상태 호출 시 자동으로 조회 및 업데이트 되도록 구현
- 렌더링 최적화 : React.memo 및 훅들을 사용해 전적 조회 요청 시 렌더링을 최소화 시켜 트래픽 제한이 있는 외부 API 호출을 최소화하도록 구현. Suspense 및 로딩 컴포넌트를 활용해 비동기 처리 시 사용자에게 보여지는 화면을 제공해 UX 최적화
[프로젝트 성과]
- 전역 상태 초기화, 인증 요청 시 JWT 토큰에 대한 검사 및 인증 요청 로직으로 유효기간 만료 및 토큰 유실을 예방
- 토큰의 스토리지 관리를 경험하며 새로 고침 시 초기화되는 전역 상태에 관한 문제 해결
- 비동기 요청 시 로딩 컴포넌트 처리를 하여 사용자의 UX 최적화를 고려
- 메모이제이션을 통해 API 호출 횟수를 줄이고 렌더링을 최소화시켜 LIghtHouse 성능 수치 95점 달성
- 중복되는 스타일에 대해 styled-components를 통해 스타일 컴포넌트를 구현하여 개발 생산성 증대
- 수백개가 넘는 게임 아이템 및 스킬, 캐릭터의 이미지를 외부 이미지 사용으로 서버의 부하를 줄이고자 노력
스타게이트 (Stargate)
삼성 청년 SW 아카데미
2023.07. ~ 2023.08.
[프로젝트 소개]
WebRTC를 이용한 화상통화 서비스를 제공하여 비대면 팬사인회를 진행하는 서비스
[기술 스택]
React, Typescript, Recoil, React-Query, WebSocket, TailwindCSS, Vite
[Github]
[팀구성]
BE 3명, FE 3명
[상세역할]
- FE 개발, 기여도 40%
- 회원 관리 파트 FE 개발 및 FE 배포
- 회원가입/로그인 : 정규표현식을 활용하여 유효성 검사 구현, JWT 인증 방식을 활용한 로그인 유지 및 관리 기능 구현
- 미팅 작성/수정/삭제 : 작성 컴포넌트 재사용으로 수정 컴포넌트의 기능도 같이 할 수 있도록 구현, 요청한 데이터 관리 등 구현
[프로젝트 성과]
- 삼성 청년 SW 아카데미 9기 공통프로젝트 서울 권역 프로젝트 우수상 수상
- 코드 리뷰와 컨벤션 규정을 통한 프로젝트의 품질 향상과 코드 작성에서의 안정성 경험 및 팀원 간 서로의 역량 성장을 경험
- JWT 토큰 인증 방식을 적용해보며 인증 인가 속에서의 보안에 대해 경험
- Recoil, TailwindCSS, Vite 등 여러 신기술을 접해보며 신기술 적용에 대한 역량 및 개발 생산성 증대
- Atomic Design 패턴을 도입해 프로젝트의 구조화 경험 및 개발 생산성 증대
범인은(Bum-In-Eun)
백석대학교 캡스톤 경진대회
2022.04. ~ 2022.10.
[프로젝트 소개]
SNS 커뮤니티 사이트에서의 은어 사용에 대한 분석 웹 서비스
[기술 스택]
React, Typescript, Redux, redux-saga, Sass, Chart.js, Node.js, Express.js, Sequelize.js, MSSQL
[GIthub]
[팀구성]
Full 1명, 데이터 1명
[상세역할]
- 풀스택 웹 개발, 기여도 80%
- React, TS를 이용한 프론트 서버 개발 후 배포, Express를 활용한 Node.js 기반의 API 서버 개발 후 배포, MSSQL을 이용한 데이터베이스 스키마 제작
- Typescript 도입 : TS 도입을 통해 데이터 타입에 대한 명확한 처리 및 관리
- REST API : Node.js 환경에서의 API 서버 구축, 데이터 베이스와 프론트로의 데이터 전송 및 가공 관리
- 크롤링 데이터 서칭 : 원하는 데이터를 데이터베이스에서 가져올 수 있도록 API 서버에서 서칭 쿼리를 짜는 로직과 받아온 데이터 중 필요한 것만 골라갈 수 있도록 구현
- 모바일 기반 반응형 웹앱 구현 : 각종 디바이스에 맞는 반응형 레이아웃 구현
- 라이브러리 활용한 UI/UX : Chart.js , Swiper.js 등 라이브러리를 위해 데이터를 사용자에게 효과적으로 시각화
[프로젝트 성과]
- 캡스톤 경진대회 전공 성적 A+ 달성
- 풀스택 개발을 진행하며 API 서버와 클라이언트 간의 CORS 정책 위반에 대해 경험
- API 서버는 Heroku, 클라이언트 서버는 Netlify에 배포해보며 서비스에 대한 배포 경험
- 비동기 처리 및 변수와 함수 선언, 배열 처리 등 ES6 문법을 활용해보며 Javascript 역량 성장
- 전역 상태 관리 라이브러리를 사용해보며 복잡한 컴포넌트 간의 상태 관리에 대한 역량 성장
- 타입스크립트를 처음 도입해보며 엄밀한 데이터 명시를 통해 타입 에러를 없애 개발 생산성 증대
- 스타일 라이브러리 (SCSS)를 사용해보며 스타일 정의 시 개발 생산성 및 편의성 증대
- 다양한 디바이스의 규격을 맞춰보는 반응형 디자인을 구현하며 UI/UX 최적화에 대해 경험
- 팀원이 이탈하게 된 상황 속에서 책임감을 갖고 프로젝트를 끝마치며 개발에 대한 역량 성장 및 책임감과 성취감에 대해 경험
포트폴리오
교육
백석대학교
대학교(학사) | 컴퓨터공학
2017.03. ~ 2023.02. | 졸업
대외활동
삼성 청년 SW 아카데미 9기 자바 전공자반
멀티캠퍼스(주관: 삼성전자)
- 상반기동안 9 To 6의 교육 시간으로 총 800시간의 학습을 진행하며 Vue.js를 이용한 Front-end, SpringBoot를 이용한 Back-end 학습으로 웹 개발에 대한 심화적인 역량 성장
- 알고리즘에 기반한 코딩 교육을 통해 구조적이고 효율적인 코드 작성 역량 강화, 모의 삼성 SW 역량 테스트에서 A+ (Advanced +)등급 취득
- Gitlab 및 Jira 등을 활용하는 자기주도적인 팀프로젝트 경험을 통해 여러 기술을 프로젝트에 적용할 수 있는 역량과 기술 스택 선정에 대한 폭 및 팀원들과의 소통, 컨벤션 규정 등 협업 역량 성장
삼성 청년 SW 아카데미 9기 공통프로젝트
삼성 청년 SW 아카데미 (멀티캠퍼스, 서울)
비대면 팬사인회 플랫폼 프로젝트 "스타게이트 (Stargate)"로 삼성 청년 SW 아카데미 9기 공통프로젝트(웹기술 트랙) 우수상 수상
2020 STARTUP INVENTION CONTEST 공모전
(사)한국인터넷방송통신학
아두이노와 초음파센서를 활용한 모니터와 사용자 간 거리측정 프로젝트로 공모전 단체상 수상
마이스타일 트렌드페어 2017 대학생 STARTUP 공모전
마이스타일 트렌드페어 조직위원회
기상청 날씨 API를 활용한 날씨 출력 디스플레이 프로젝트로 장려상 수상
자기소개
직무 역량
[새로운 기술에 대한 열정과 문제 해결 역량]
제 직무 강점은 새로운 기술에 관심이 많고 문제 해결 역량이 뛰어나다는 점입니다. 최근 삼성 청년 SW 아카데미에서 진행한 프로젝트 "gamePT"에서 ChatGPT를 활용한 TRPG 게임 서비스를 진행한 경험이 있습니다. 기억에 남던 경험은 Vite 번들러와 웹소켓을 위한 Sockjs 사이의 충돌 문제였습니다. 새로운 기술을 적용해 보자는 마음과 빠른 빌드의 장점을 적용하고 싶어 Vite 번들러를 도입한 프로젝트였습니다. 순조롭게 프로젝트를 진행하던 중 예상치 못한 부분에서 충돌이 일어났습니다. 아무런 에러 출력도 없이 연결이 안 되는 상황이었습니다. 참고 자료가 거의 없다시피 한 상황이어서 며칠 밤을 지새우며 연결에 매진한 결과 Vite 번들러는 global 객체를 정의하지 않는다는 문서를 발견해 Sockjs 라이브러리를 살펴보니 global 객체를 사용하는 부분이 있었습니다. 그래서 global 객체를 정의해 주는 설정을 추가하니 에러가 해결되었습니다. 이를 통해 참고 자료 없이 자력으로 문제해결을 할 수 있다는 자신감과 역량이 성장한 경험이었습니다.
[협업 역량]
저는 Gitlab, Jira, Notion 등 형상 관리, 일정 관리 협업 툴에 대한 사용을 한 경험이 있습니다. 저삼성 청년 SW 아카데미에서 여러 번의 팀 프로젝트를 진행하며 Gitlab을 활용한 코드 리뷰와 깃 컨벤션 규정에 맞춘 branch 관리, 커밋 관리 등 팀 프로젝트에서 형상 관리 툴을 사용한 경험이 있으며 Jira를 활용해 프로젝트의 일정을 일주일 단위로 스프린트를 작성해 관리했던 경험이 있습니다.
형상 관리를 통해 코드 리뷰를 해주기도, 받기도 하며 프로젝트 진행 시 개인의 성장만이 아닌 팀 구성원들과 함께 성장해가며 프로젝트를 진행할 수 있었고 컨벤션 규정에 따른 개발을 통해 단일화된 코드가 추후 유지보수 및 문제 해결에 있어서 중요하단 것을 경험해보았습니다.
Jira를 활용하며 애자일 방식의 개발을 일주일 단위의 스프린트로 나누어 진행하는 경험도 해보았습니다. 이 과정에서 잦은 스크럼으로 팀 내의 다른 분야의 개발 속도도 알 수 있고 전체 프로젝트의 방향성을 잃지 않도록 잘 조율하고 맞추어나가는 경험 또한 해보았습니다.
웹 개발자가 되기 위한 노력
[학부시절부터 키워온 새로운 기술에 대한 탐구심]
학부생 시절 졸업 작품으로 SNS 상에서의 은어 데이터를 수집해 사용자에게 보여주는 프로젝트를 팀장을 맡아 진행한 적이 있습니다. 프로젝트는 3인으로 구성된 팀프로젝트였습니다. 그렇게 1학기에는 프로젝트 기획을 진행하며 React와 Typescript에 대해 학습하고 있었습니다. 하지만 여름방학이 시작되고서 저 이외의 나머지 팀원들이 모두 취업을 하게 되어 팀이 와해가 될 위기에 쳐해졌습니다. 교수님께서는 다른 팀으로 편입을 권유하셨지만 팀장으로써 기획 단계가 끝난 프로젝트를 버리기에는 아쉬웠고 더 노력해 백엔드 학습을 진행한다면 할 수 있지 않을까 하고 진행했던 경험이 있습니다.
이때 API 서버 개발을 위해 처음으로 Node 환경에서의 Express 학습과 데이터베이스와의 연결을 위한 Sequelize 학습을 병행하며 프론트엔드 뿐 아닌 백엔드 개발도 전부 다 진행해 보며 웹 서비스의 구조 및 데이터의 흐름을 더욱 잘 파악할 수 있었습니다. 또한 프론트엔드에서도 처음 접해보는 Redux나 SCSS 등 새로운 기술 스택을 학습해 적용해 보면서 사용했을 때의 이점들을 알 수 있었고 기술 스택 선정의 폭이 넓어지는 경험을 했습니다.
마무리하지 못할 것 같았던 프로젝트를 밤을 지새우며 혼자서라도 해내고 나서의 성취감은 벌써 1년이 지난 일이지만 잊히지 않습니다. 새로운 것을 배운다는 즐거움과 애정을 갖고 진행했던 프로젝트이기에 더욱 힘내서 할 수 있던 경험이었습니다. 이때의 경험으로 저는 새로운 기술에 대해 두려움보단 오히려 호기심을 갖고 학습해볼 수 있던 경험이 되었습니다.
["dkslgg" 프로젝트에서의 최적화에 대한 탐구]
저는 서비스의 최적화를 최우선으로 삼으며 탐구하고 고민합니다. 얼마 전 삼성 청년 SW 아카데미에서 진행했던 "dkslgg" 팀 프로젝트를 진행할 때 성능 최적화에 대한 고민을 많이 해볼 수 있었습니다. 제가 개발한 부분 중 게임의 전체 플레이어의 순위를 출력하는 부분이 있었습니다. 단순히 API를 패칭해와서 출력해 주면 되었기에 처음엔 간단한 작업으로 생각하고 개발했습니다. 하지만 개발하고 난 후 문제점을 발견하게 되었습니다. API를 호출해 상태로 관리하는 과정에서 API 호출이 3번 일어나게 되는 현상을 확인하게 됐습니다. 저는 이를 해결하기 위해 useEffect 훅의 의존성을 빈 배열로 두어 최초 렌더 시에만 API가 호출될 수 있도록 구현했습니다. 이와 비슷하게 전적 검색에서는 검색한 플레이어의 프로필, 전적, 서비스 내의 플레이어 소속에 대한 정보와 아이템 이미지 등 외부 API를 호출하는 URL이 서로 다르기도 하여, useEffect의 의존성 수정으로만은 해결할 수 없다고 생각했습니다. 그래서 메모이제이션을 이용해 불러온 데이터를 검색어의 변경이 없는 한 갱신되지 않도록 해둬 다시 렌더링 되지 않도록 구현했습니다. React.memo와 useCallback 등의 훅을 사용해 구현했으며 한 번의 검색 요청 시 최소 3번 호출되던 API를 한 번만 호출되도록 해 검색 요청 시간을 최소 10초에서 3초로 줄일 수 있었고 프로젝트에서 베스트 멤버로 뽑히기도 했습니다.