프론트엔드 개발자

곽서연

문제를 해결할 수 있는 서비스를 설계하고 UX 개선에 주력하며 아름다운 인터페이스를 구현하는 것을 좋아합니다. 
새로운 기술 습득에 대한 열정이 강하며, 작은 성취에도 큰 만족을 느끼기에 모든 환경을 학습의 기회로 삼으려 노력합니다.

IT 벤처 창업 동아리 SOPT (진행 중)

<ul><li>학기 중 현장 미러형 프로젝트(PPLOG) 진행, 방학 중 기업 실무 프로젝트(TikiTaka) 진행</li><li>웹 애플리케이션 개발, 데이터 관리 기술, 시스템 아키텍처 수강</li><li>Kakao Cloud, Oracle Cloud, Microsoft Azure 워크숍 참여</li><li>가천대 마이크로디그리 취득</li></ul>

가천대 카카오엔터프라이즈 SW 아카데미

<ul><li>HTML/CSS, JavaScript,&nbsp;React,&nbsp;Next.js,&nbsp;TypeScript&nbsp;학습</li><li>Git을&nbsp;통한&nbsp;버전&nbsp;관리와&nbsp;협업&nbsp;기초&nbsp;학습</li><li>초급 프로젝트(<a target="_blank" rel="noopener noreferrer nofollow" href="https://garnet-rosemary-25b.notion.site/Rolling-6c4ee2f135fb4270a6f4184555e1dccb">Rolling</a>), 중급 프로젝트(<a target="_blank" rel="noopener noreferrer nofollow" href="https://garnet-rosemary-25b.notion.site/Planit-3019376a72be49148d54b8275000ce80?pvs=73">Planit</a>), 고급 프로젝트(<a target="_blank" rel="noopener noreferrer nofollow" href="https://garnet-rosemary-25b.notion.site/Epigram-6424947b454b43b1865516aace7ced76?pvs=73">Epigram</a>) 진행</li></ul>

코드잇 스프린트 프론트엔드 부트캠프

<ul><li>기획자, 백엔드 개발자, 디자이너와 협업하여 대학 동아리 모집 통합 관리 플랫폼 CLUTING 개발</li><li>잇타 6기 대상, 블레이버스 우수상 수상</li></ul>

IT 연합동아리 잇타 6기

약 1년간 사이드 프로젝트, 개발자 스터디 및 커뮤니티 활동을 통해 실무 기술을 습득최신 개발 트렌드를 반영한 다양한 프로젝트에 참여하여 협업을 통한 문제 해결 및 코드 리뷰 경험<ul><li>리액트 스터디 참여</li><li>CSS 심화 학습을 위한<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/yeonilil/vending-machine?tab=readme-ov-file"> Vending Machine </a>프로젝트 진행</li><li>RESTful API 와 백엔드 연동 이해를 위한 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/yeonilil/blog-sideproject">블로그 프로젝트</a> 진행</li><li>전역 상태 관리 이해를 위한 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/yeonilil/chat-image-talk">Chat Image Generator</a> 프로젝트 진행</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/ToyMakers/todo-mark">todomark</a> 크롬 익스텐션 개발 프로젝트 진행</li><li>결제 모듈과 REST API에 대한 깊은 이해를 목표로, 클라이언트·서버·어드민으로 구성된<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/house-study/market-toy-project"> 쇼핑몰 프로젝트 </a>진행</li><li>아티클 스터디 참여</li></ul>

Toy Makers 사이드 프로젝트 스터디

학교 자치 기구인 교지 편집 위원회에서 총 3년간 활동<ul><li>수습위원(1년): 기사 작성 및 편집 보조, 편집 과정 전반 학습</li><li>편집위원(1년): 원고 기획 및 편집 참여, 교지 제작 실무 담당,</li><li>학교 신문사, 방송국 등 타 자치 기구와 협업하여 취재 및 콘텐츠 제작</li><li>교육부장 &amp; 기획부장(1년): 위원 교육 및 콘텐츠 기획 주도, 연 2회 교지 발간 총괄</li></ul>

가천교지편집위원회

portfolio

github

velog

<blockquote>디케이테크인 인프라 팀에서 업무 요청을 처리할 수 있는 티켓 관리 시스템 개발담당: 프론트엔드, 기획, 디자인</blockquote><h5>Experience</h5><h6>주요 기능 구현</h6><ul><li>티켓 상세, 문의 내역, 일별 월별 통계 관리, 사용자 티켓 대시보드, 담당자 티켓 대시보드 구현</li><li>티켓 주요 지표를 개별 테이블에서 확인해야 해 가독성이 낮았으나, 한눈에 파악할 수 있도록&nbsp;<code>Recharts</code>를 통한&nbsp;차트 구현 및 시각화</li><li>담당자가 진행 중인 티켓을 리스트 형태로만 확인할 수 있어 업무 파악이 어려웠던 점을 개선하기 위해, 드래그앤드롭 방식의 칸반보드로 변경하여 티켓 이동 및 상태 변경 소요 시간을 평균 30% 단축</li><li>페이지 이동 시 응답 시간이 1.2초 이상 소요되며 화면 깜빡임이 발생하는 문제를 해결하기 위해, React Query의 <code>prefetch</code>기능을 활용하여 최적화해 응답 시간을 평균 60% 단축</li><li>검토 프로세스에서 바로 검토 내역이 바로 업데이트되지 않는 문제를&nbsp;낙관적 업데이트를 적용하여 사용자 경험을 체감 속도 2배 이상 향상</li></ul><h6>성능 최적화 및 보안 강화</h6><ul><li>Suspense 및 Lazy Loading 적용, 메타 태그 최적화를 통한 SEO 개선</li><li>XSS 공격, 세션 하이재킹 방지를 위해 <code>DOMPurify</code>적용 및 보안 요소 개선</li></ul><h6>디자인 및 사용성 개선</h6><ul><li>디자인 시안 제작 및 디자인 시스템 구축</li><li>사용자/담당자 티켓 관리 페이지에 재사용성을 고려한 대시보드 컴포넌트 도입</li><li>효율적인 인프라팀 업무 요청을 위해 사이드바, 대시보드, 툴팁, 미리보기 기능을 설계하여 사용성 개선에 기여</li></ul><h6>기획 및 문서화</h6><ul><li>요구사항 정의서, 업무 흐름도, 용어 사전, 화면 설계서, WBS 등 체계적인 문서화를 통한 기획 및 설계 진행</li><li>코드 프리징 이후 QA 테스트 기간을 통한 역할, 화면 별 오류 검증 진행</li></ul><hr>

TikiTaka

<blockquote>취업준비생들을 위한 AI 자소서 첨삭, AI 모의 면접, 포트폴리오 관리, 블로그 서비스 개발담당: 프론트엔드, 기획, 디자인<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/KEA-5th-Myaong/pplog-frontend">깃허브</a></blockquote><h5>Experience</h5><h6>주요 기능 구현</h6><ul><li>랜딩 페이지, 캐러셀 및 배너, 포트폴리오 목록, 조회, 작성 및 수정 구현</li><li>Tailwind CSS를 활용한 반응형 UI 설계로 모바일, 태블릿, 데스크탑 등 다양한 환경에서 일관된 사용자 경험 제공</li><li>props drilling 문제 해결을 위해 <code>react-hook-form</code>의 <code>FormProvider</code>를 활용하여 폼 상태 관리 개선</li><li>모의 면접 화상 표정 분석 기능을 제안 및 구현</li></ul><h6>성능 최적화</h6><ul><li>Next.js 14 App Router로 동적 경로 처리를 최적화하고 서버 컴포넌트를 적극 활용하여 렌더링 성능을 평균 30% 향상</li><li>API 요청 및 캐싱, 무한 스크롤, 페이지네이션, 화면 높이 크기 조절 등을 커스텀 훅으로 구현하여 로직 재사용</li><li>메타 데이터 작성을 통한 SEO 최적화</li></ul><h6>기획 및 디자인</h6><ul><li>요구분석 엔지니어링 및 FE 팀원들과의 상세한 코드리뷰를 통해 코드 품질 향상</li><li>Tailwind CSS 유틸리티 및 커스텀 클래스를 활용하여 일관된 스타일 및 디자인 시스템 적용</li></ul>

PPLOG

<blockquote>대학 동아리 리크루팅 통합 관리 플랫폼 개발담당: PL, 프론트엔드<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Cluting/cluting-frontend">깃허브</a></blockquote><h5>Experience</h5><h6>주요 기능 구현</h6><ul><li>로그인(OAuth), 회원가입, 동아리 등록, 리크루팅 계획하기, 공고 작성, 서류 평가, 지원자 합불 결과 확인, 면접 평가, 답변 기록 등 MVP 기능 구현</li><li><code>full-calendar</code> 라이브러리를 활용한 캘린더 일정 관리 기능 구현</li><li>복잡한 리크루팅 단계 구조에 대응하기 위해 공통 컴포넌트를 분리하고 재사용 가능한 구조로 설계하여 개발 효율성과 유지보수성을 향상</li><li>클라이언트와 백엔드 서버 간의 연결 과정에서 preflight 요청(OPTIONS 메서드)으로 인해 발생한 CORS 오류를 정책 조정을 통해 해결</li></ul><h6>기획 및 협업</h6><ul><li>프론트엔드 영역 전반의 개발을 주도적으로 진행,매일 데일리 스크럼 진행 및 문서화 담당</li><li>팀원 수가 적은 점을 보완하기 위해 AI 코드리뷰툴 <code>CodeRabbit </code>적극 활용하여 코드 개선</li><li>백엔드 팀원들의 요청 사항 및 프론트엔드에서 발생한 이슈 정리, API 연동 문서화로 원활한 협업 환경 조성</li><li>유저 테스트 진행을 통한 개선점 도출 및 코드 리팩토링 진행</li></ul><hr>

클루팅

<blockquote>마크다운 투두리스트 크롬 익스텐션 개발담당: 기획, 프론트엔드</blockquote><h5>Experience</h5><h6>협업</h6><ul><li>페어 프로그래밍을 통해 실시간 코드 작성 및 피드백 진행</li><li>체계적인 코드 리뷰를 통해 코드 품질 개선 및 일관성 유지</li></ul><h6>주요 기능 구현</h6><ul><li>IndexedDB를 활용한 클라이언트사이드 데이터베이스 구성</li><li>프로젝트 초기 세팅 및 Github Actions를 이용한 CI/CD 구축</li><li>시맨틱 버저닝을 적용하여 프로젝트 버전 관리</li><li><code>Vite </code>등의 번들링 도구를 활용하여 크롬 익스텐션 최적화 및 빌드</li><li>크롬 익스텐션 배포 프로세스 학습</li></ul>