프론트엔드 개발자

이재인

안녕하세요 함께 일하고 싶은 개발자, 이재인입니다.
단 한명의 사용자라도 꾸준히 사용하는 서비스를 만들기 위해 교육과정 , IT동아리 등 꾸준히 노력하고 있습니다.

‘함께 성장’을 추구합니다. 팀원을 배려하고, 팀원간 시너지를 통해 더욱 성장합니다.
최근에는 재사용성이 좋고 변화에 유연하게 대처할 수 있는 코드에 대해 고민해보고 있습니다.
사용자가 무엇을 원하는지 항상 고민하고 서비스 개선을 하기 위해 노력하고 있습니다.

성실함

책임감

목표 지향적

고객 중심

긍정적

<ul><li>디프만은 디자이너와 개발자가 기획부터 릴리즈, 이후 개선까지 모든 과정을 함께 경험하는 성장 중심의 커뮤니티입니다.</li><li>현재 '디지털 명함 제작 및 공유 서비스'라는 주제로 프로젝트를 진행중입니다.</li><li>직장인 , 취준생 , 학생들이 네트워킹 시 자신을 효과적으로 소개할 수 있는 서비스 입니다.</li><li>프로젝트 : took</li></ul>

DEPROMEET 16TH

<ul><li>신한투자증권 프로 디지털 아카데미를 수료했습니다.</li><li>JavaScript , TypeScript , React , Java , AWS의 개념을 학습했습니다.</li><li>프론트엔드 담당 프로젝트 2회 진행- Java , Spring boot 미니 프로젝트 1회 진행</li></ul>

프로 디지털 아카데미 4기

<ul><li>복잡도, 데이터 / 계산 / 액션, SRP</li><li>도메인, 비즈니스 로직, FSD</li><li>추상화 벽, 모듈화, SOLID, 응집도 / 결합도</li><li>의존성 주입, 인터페이스 설계, 전략 패턴</li></ul>

원티드 프리온보딩 FE 챌린지

정보처리기사

SQLD

ENGLISH

포트폴리오 주소입니다

블로그 주소입니다

Github 주소입니다

주제<ul><li>디지털 명함 공유 아카이빙 서비스</li><li>네트워킹 자리에서 손쉽게 디지털 명함을 주고 받을 수 있는 서비스</li></ul>기획<ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.notion.so/depromeet/2-Took-1b045b4338b38123a58bc9cb6e175efc">https://www.notion.so/depromeet/2-Took-1b045b4338b38123a58bc9cb6e175efc</a></li></ul>기술스택<ul><li>Next.js ,TypeScript , Tailwind CSS , Zustand</li></ul>팀 인원<ul><li>웹 디자이너 3명</li><li>프론트엔드 4명</li><li>백엔드 3명</li></ul>주요기능<ul><li>직군별 명함(디자이너 , 개발자) 명함 생성과 공유<ul><li>QR코드로 손쉽게 공유</li><li>직군별 명함 아카이빙 기능(SNS , 작성한 글 , 대표 프로젝트 등)</li></ul></li><li>주변 사람과 명함 공유 → 개발 진행중</li></ul>주요 성과 및 배운점<ul><li>디자인 토큰과 협업 경험</li><li>공통 컴포넌트 제작 방법 , JSDoc</li><li>FSD 아키텍처 적용 경험 및 느낀 점</li><li>Config 기반 코드 작성으로 유지보수성 향상</li><li>React-Query에서 Error Boundary에 대한 고민</li></ul>프로젝트 페이지 노션 링크<a target="_blank" rel="noopener noreferrer nofollow" href="https://button-acapella-065.notion.site/1c5dcf5e3075810b9223dd590614d1a8">https://button-acapella-065.notion.site/1c5dcf5e3075810b9223dd590614d1a8</a>

took

주제<ul><li>스터디 그룹 관리 서비스</li></ul>기획<ul><li>최근 알고리즘 스터디를 진행하면서, 참여자들이 개별적으로 GitHub에 작업을 올리고 벌금 제도를 운영하는 방식으로 진행하고 있습니다. 그러나 이 방식은 스터디원의 참여도를 효과적으로 추적하기 어렵고, 관련 자료를 한곳에서 관리하기 어려운 한계가 있습니다. 이에 따라, 스터디 활동을 보다 집중적으로 관리할 수 있는 플랫폼의 필요성을 느껴 본 프로젝트를 기획하게 되었습니다.</li></ul>기술스택<ul><li>Next.js ,TypeScript , Tailwind CSS , Zustand</li></ul>팀 인원<ul><li>프론트엔드 1명</li><li>백엔드 1명</li></ul>주요기능주요기능<ul><li>스터디 그룹 생성 및 관리</li><li>동기부여 및 강제성 부여</li><li>실시간 커뮤니케이션 및 자료 공유</li></ul>주요 성과 및 배운점<ul><li>react-query 활용법 숙지 (useQuery , useMutation)<ul><li>refetch vs invalidateQueries , invalidateQueries 선택 이유</li></ul></li><li>shadcn-ui 및 Tailwind CSS 활용<ul><li>shadcn-ui 선택 이유</li></ul></li><li>토큰 관리 방식<ul><li>accessToken을 어디에 저장할까</li></ul></li><li>파일 관리 방식<ul><li>파일 구조를 어떻게 하는게 좋을까</li></ul></li></ul>트러블 슈팅<ul><li>Safari , ios에서 로그인 오류가 생겼던 이슈</li><li>모바일 뷰에서 뷰 크기가 맞지 않는 이슈</li></ul>프로젝트 페이지 노션 링크<a target="_blank" rel="noopener noreferrer nofollow" href="https://button-acapella-065.notion.site/1c5dcf5e3075805e90ebe0423cf3c95a">https://button-acapella-065.notion.site/1c5dcf5e3075805e90ebe0423cf3c95a</a>

Balearn

주제<ul><li>검색어 기반 AI 종목 추천 서비스</li></ul>기획<ul><li>팀원들 모두 주식 종목에 대한 지식이 부족한 상태에서, 특정 키워드와 종목을 연결하는 과정이 번거롭다는 문제를 경험했습니다.예를 들어, ‘불닭’이라는 키워드로 검색했을 때 ‘삼양’이라는 기업은 쉽게 떠올릴 수 있지만,익숙하지 않은 키워드에 대한 종목을 찾기 위해 여러 차례 검색해야 하는 불편함이 있었습니다.또한, 검색량 추이가 주가 변동에 영향을 미칠 수 있다는 점을 알게 되었고,이를 활용해 단순한 키워드 입력만으로 종목과 시세, 검색량을 비교할 수 있는 서비스가 필요하다고 판단하여 기획하게 되었습니다.</li></ul>기술스택<ul><li>React , Redux tookit ,Styled-component</li></ul>팀 인원<ul><li>프론트엔드 3명</li><li>백엔드 2명</li></ul>주요기능<ul><li>사용자가 입력한 검색 키워드와 연관된 종목 리스트 제공</li><li>시세 및 검색량 비교 차트 제공<ul><li>네이버, 구글, 인스타그램 등 소셜 검색량 추이 시각화</li><li>검색한 종목의 시세 변동 및 네이버 검색량 비교 차트 제공</li></ul></li><li>선택한 종목의 실시간 주가 정보 조회</li></ul>주요 성과 및 배운점<ul><li>react-query 활용법 숙지 (useQuery )<ul><li>데이터 캐싱 학습</li></ul></li><li>Google Trends API 요청 차단 문제 해결<ul><li>대체 API인 Naver Data API 사용</li></ul></li></ul>프로젝트 페이지 노션 링크<a target="_blank" rel="noopener noreferrer nofollow" href="https://button-acapella-065.notion.site/AI-1c5dcf5e30758102b559e6f6eb83d095">https://button-acapella-065.notion.site/AI-1c5dcf5e30758102b559e6f6eb83d095</a>

CheatSOL

주제<ul><li>모임투자 서비스</li></ul>기획<ul><li>사람들은 취미, 여행, 결혼 등 특정한 목표를 위해 돈을 모으기 시작합니다.이러한 공동 자금을 활용해 투자를 시도해보자는 니즈에서 시작한 서비스입니다.개인 투자에는 두려움을 느끼는 사용자들이 지인들과 함께 투자하며 부담을 줄이고, 보다 가볍게 투자 경험을 시작할 수 있도록 설계되었습니다.</li></ul>기술스택<ul><li>React , Redux tookit ,Styled-component</li></ul>팀 인원<ul><li>프론트엔드 1명</li><li>백엔드 5명</li></ul>주요기능<ul><li>모임 생성<ul><li>모임 정보, 납부 금액, 매매 규칙 등을 설정하여 공동 투자 계좌 생성</li></ul></li><li>실시간 자산 시세 및 거래 내역 조회선택한 종목의 실시간 주가 정보 조회<ul><li>투자 종목, 현재 자산 현황, 거래 내역을 한눈에 확인</li></ul></li><li>종목 검색 및 투자 진행<ul><li>원하는 종목의 시세를 조회 후 팀원들과 투표 진행</li><li>투표가 완료되면 자동으로 매매 실행</li></ul></li></ul>주요 성과 및 배운점<ul><li>SSE통신 방법 학습<ul><li>WebSocket vs SSE 차이점</li></ul></li><li>react-hook-form과 yup 활용<ul><li>유효성 검사 체크</li><li>multi-step-form 잘못된 설계 방식</li></ul></li></ul>프로젝트 페이지 노션 링크<a target="_blank" rel="noopener noreferrer nofollow" href="https://button-acapella-065.notion.site/1c5dcf5e30758195abffe1ff37109d31">https://button-acapella-065.notion.site/1c5dcf5e30758195abffe1ff37109d31</a>

아마곗돈

주제<ul><li>중고마켓 웹 서비스</li></ul>기획<ul><li>이번 프로젝트에서는 로그인 인증, 대시보드, 상세 페이지, 검색, 무한 스크롤 등 핵심적인 기능을 구현하면서 필수적인 개발 경험을 쌓을 수 있었습니다. 또한, 이미지 처리, 디바운싱, 쓰로틀링과 같은 최적화 기법도 적용해 보며 성능 개선에 대한 이해를 높일 수 있었습니다. 이를 통해 자주 활용되는 기능들을 직접 구현하고 최적화하는 경험을 쌓고자 중고마켓 서비스를 개발하게 되었습니다.</li></ul>기술스택<ul><li>Next.js , TypeScript , Emotion , Recoil</li></ul>팀 인원<ul><li>프론트엔드 1명</li><li>백엔드 5명</li></ul>주요기능<ul><li>상품 대시보드<ul><li>판매중 , 판매 완료 상품 리스트 제공</li><li>오늘본 상품 기능 제공</li></ul></li><li>상품 상세페이지<ul><li>카카오 map을 활용한 위치 제공 기능</li><li>이미지 업로드 기능</li></ul></li><li>결제 기능<ul><li>아임포트를 활용한 간편 결제 기능</li><li>포인트 결제 기능</li></ul></li></ul>주요 성과 및 배운점<ul><li>컨테이너 &amp; 프레젠터 패턴<ul><li>관심사 분리 폴더 구조</li></ul></li><li>검색 기능 - 디바운싱<ul><li>자동 검색 기능</li></ul></li><li>무한 스크롤 - 쓰로들링<ul><li>react-infinite-scroller 사용</li></ul></li><li>이미지 최적화 방법<ul><li>Next.js의 Image태그 사용</li></ul></li><li>다중 이미지 업로드<ul><li>Promise.all()사용</li></ul></li></ul>프로젝트 페이지 노션 링크<a target="_blank" rel="noopener noreferrer nofollow" href="https://button-acapella-065.notion.site/1c7dcf5e30758017af5fc7a66ed883ce">https://button-acapella-065.notion.site/1c7dcf5e30758017af5fc7a66ed883ce</a>