SIM HYO EUN

안녕하세요,
프론트엔드 개발자 심효은입니다.

EmailPhoneGithubBlog
  • 비 개발직군으로, 개발 직군과 소통하며 복잡한 아이디어를 명확하게 전달하고 프로젝트를 성공적으로 이룬 경험이 있습니다. 이 경험을 바탕으로 다양한 유관부서와 원활한 커뮤니케이션에 자신 있습니다.
  • 호기심을 이해로 바꾸는 집념의 소유자로, 새로운 지식을 흡수하고 이를 적용하고 개선하는 것에 큰 흥미를 느낍니다. 특히 성능 최적화와 명확한 목적이 담긴 코드를 작성하기 위해 노력을 기울입니다.
  • 사용자 경험을 최우선으로 여기며, UX/UI에 높을 가치를 두고 이를 개선하는 일에 많은 관심을 가집니다.

Project.

WINIW

WINIW

2023. 08 - 2023. 10 / 2024. 01 - 현재
미리보기
위치 서비스를 기반으로 동네 주민들과 물물 혹은 재능 교환 서비스를 제공하는 플랫폼
FE 2명, BE 1명, 디자이너 2명으로 구성된 팀 프로젝트입니다.
* 현재 API 개발 중입니다.
TypeScriptReactRedux-toolkitstyled-componentsSocket.io-client

주요 화면 및 기능 구현

메인페이지, 게시물 작성 페이지, 오퍼 페이지, 채팅 페이지, 검색페이지를 담당하였습니다.

  • 자주 사용되는 컴포넌트에 대해 공용 컴포넌트로 분리 (BottomSheet, Modal 등)
    • 합성 컴포넌트를 통해 재사용성을 극대화하고 유연성 확대 및 코드 단순화
  • React DevTools을 통해 컴포넌트의 렌더링을 분석하고, useCallback, useMemo 등 메모이제이션 Hook을 통해 렌더링 최적화 및 전체적인 성능 개선
  • 반복되는 동일 로직에 대해 useModal, useNavigate 등 Custom Hooks 구현하여 재사용성을 높임

전역 상태 관리 및 Web App 구현

Redux-toolkit를 통한 전역 상태를 관리하고, Web App을 구현했습니다.

  • Reudx-Toolkit을 사용해 보일러 플레이트 코드를 줄이고 패키지 의존성 낮춤
    • 내장된 Redux thunk pattern을 통해 비동기 로직 구현
  • 데스크탑 브라우저와 모바일 기기 모두 동등한 콘텐츠 화면을 제공받도록 Web App으로 구현

Styled-Component의 'shouldForwardProp' 에러 해결

Styled-Component를 생성하고 해당 태그에 props을 전달해 스타일 변경 처리를 하던 중, 해당 에러가 발생하여 원인을 파악해 문제를 해결하였습니다. Error-code

  • 해당 에러는 Styled-Componentd에 넘겨준 props을 DOM이 attribute로 받아드릴 수 있다는 경고로, 에러 해결을 위해 변수 앞에 접두사 $를 붙여 문제를 해결하였습니다.
    • 이처럼 transient props을 사용하면 더이상 DOM 요소로 전달하지 않고 Styled-Component props으로 사용할 수 있다는 것을 알게 되었습니다.
Sendy

Sendy

2023. 03 - 2023. 04
미리보기
온라인으로 편지를 작성하고, 보낼 수 있는 서비스
원하는 문구로 URL 주소를 만들 수 있는 커스텀 기능과 SNS에 쉽게 업로드할 수 있도록 이미지 저장 기능을 제공합니다.
FE 3명, BE 3명으로 구성된 팀 프로젝트입니다.
JavaScriptReactZustandstyled-componentsReact Hook Form

회원 인증 절차 구현

회원가입, 로그인, 로그아웃에 해당하는 전체적인 회원인증 절차 기능을 구현했습니다.

  • Cookie와 Web Storage를 활용한 JWT 인증절차 구현

  • 회원가입이나 편지 작성 등 다수의 input 요소를 효율적으로 관리하기 위해 React-hook-form 을 활용한 비제어 Form Component 구현

    • 공용 컴포넌트로 분리하여 코드 재사용성을 높이고 리렌더링을 최소화시켜 마운팅 속도 개선

  • YUP 라이브러리를 통해 유효성 및 중복검사 기능 구현

    • yup.object을 사용해 schema를 만들어 검증로직과 에러메세지를 한번에 정의하는 직관적인 코드 구현

주요 기능 구현

편지 조회 페이지 주요 기능 및 상태관리 라이브러리를 통한 전역 상태 관리, 반응형 Web을 구현했습니다.

  • Web Speech API를 이용한 음성 TTS 기능과 Dom to image, File Saver를 활용한 이미지 저장 기능 구현
  • Zustand를 통한 유저의 로그인 상태와 MemberID 정보 전역 상태 관리
  • media query를 사용한 반응형 Web 구현하여 Desk, Tablet, Mobile에 따른 레이아웃 최적화를 통한 UX 향상
  • Vercel 을 사용한 CI/CD 워크플로우 구축

SetState 함수의 비동기 호출로 인한 이슈 해결

편지의 보관 상태를 동기화하는 기능을 구현하던 중, state값이 실시간으로 반영되지 않은 문제를 발견하였습니다. 이를 해결하고자 setSate의 비동기 동작에 대해 공부하여 해당 문제를 해결할 수 있었습니다.

  • setState의 호출은 비동기적으로 이뤄지기 때문에 새로운 값이 즉시 반영되지 않습니다.
    • React는 브라우저의 이벤트가 끝날 시점에 state를 일괄적으로 업데이트하고 렌더링하기 때문입니다. 덕분에 불필요한 렌더링을 방지하고 성능을 향상시킬 수 있지만, 최신값을 보장하지 않는다는 문제가 존재합니다.
  • 이를 해결하기 위해 setState에 객체 대신 함수를 전달해 문제를 해결하였습니다.
    • updater 함수를 전달하면 updater 함수안에서 이전 state값에 접근할 수 있기 때문에, setState를 동기적으로 처리할 수 있다는 것을 알게 되었습니다.

Work Experience.

하나금융 TI
하나금융 TI
2015. 11 - 2022. 09재무관리팀

약 7년 간 하나금융 TI의 재무팀으로 근무하며 다수의 사내 소프트웨어 개발 프로젝트에 참여하고 진행하였습니다. 이 과정에서 개발직군을 비롯한 여러 유관 부서와 긴밀하게 협업하며 탁월한 커뮤니케이션 능력을 발휘하였습니다.

프로젝트를 거듭 진행하며 개발을 통해 복잡한 데이터를 직관적이고 효율적으로 구현할 수 있다는 점에 큰 매력을 느꼈고, 이는 “개발자"로 직무 변경을 결심하게 되는 계기가 되었습니다.

개발자로서 기술 역량을 집중적으로 키우기 위해 퇴사 후 부트캠프와 스터디 그룹을 진행하며 Front-end 개발 지식에 대해 심도 깊게 학습하였고, 팀 프로젝트를 통해 학습한 내용을 실제로 구현해보며 "개발자"가 되기 위해 꾸준히 나아가고 있습니다.

사내 관리회계시스템 프로젝트
  • 팀별, 프로젝트별, 인별 성과 지표 분석 및 보고 시스템
  • 프로젝트의 도입부터 서비스 발표, 추후 고도화까지 전 과정을 담당했습니다.
법인카드 경비처리 시스템 프로젝트
  • 편성된 예산에 대한 법인카드 경비처리 시스템
  • 전체적인 예산 편성 및 편성예산 관리에 대한 시스템 개발 파트의 담당자로 참여하였습니다.
재무-RPA 협업 프로젝트
  • 사내 RPA팀과 협업하여 거래처 실시간 자동화 배치 작업 담당자로 참여하였습니다.
전사 ERP 도입 프로젝트
  • 재무, 인사, 총무, 영업 등 업무 프로세스 자동화 및 단일화 시스템
  • 재무 담당자로 유관부서와 협력하여 업무 프로세스 모듈화 작업을 진행하였습니다.

Activities.

Udemy Front-end 스터디

2024. 01 - 현재
  • 매주 Front-end 및 CS 주제를 선정해 Github에 학습한 내용을 업로드합니다. 그 후 발표 및 주제에 대해 토의하는 시간을 가집니다.

Frontend Interview Handbook 스터디

2023. 05 - 2023. 12
  • 매주 화요일은 2개의 주제를 선정해 설명하는 시간을 가지고, 금요일은 서로 질문하고 답하는 시간을 가집니다.
  • 단순히 답을 아는 것을 넘어, 깊이 이해하고 원리를 깨달아 활용하는 것을 목표로 합니다.

CS 스터디

2023. 05 - 2023. 06
  • Front-end와 CS관련 주제를 선정하여 GitHub에 공부한 내용을 업로드하고 매주 목요일마다 발표합니다.

모던 자바스크립트 Deep Dive 스터디

2023. 02 - 2023. 12
  • 매주 <모던 자바스크립트 Deep Dive>를 읽고, 주제에 대해 함께 토의하고 Insight를 나눕니다.

Skill.

HTML
웹접근성, 표준성을 준수하며 시멘틱태그를 이용해 마크업 할 수 있습니다.
CSS
position, display를 적절히 사용하여 반응형 웹을 적용할 수 있습니다
JAVASCRIPT
Javascript의 배열, 메소드, DOM을 이해하며 다양한 상황에 적용할 수 있습니다.
TYPESCRIPT
Type-Safe한 코드를 작성하여 개발 생산성을 높이고 코드 안정성을 높일 수 있습니다.
REACT
React 구조와 hook을 잘 알고 있으며, 범용적이고 재사용가능한 컴포넌트 설계를 할 수 있습니다.
REDUX
Flux 패턴의 기본적인 동작 원리를 이해하고 Redux Toolkit를 활용해 전역 상태관리를 할 수 있습니다.
zstand
ZUSTAND
Zustand로 보다 간단하게 상태를 정의하고 redux Devtools를 사용해 debugging할 수 있습니다.
STYLED-COMPONENTS
CSS-in-JS 방식을 사용해 모듈화를 이루고 범용적인 스타일 작업을 할 수 있습니다.
TAILWIND
In-Line 스타일 작업을 할 수 있고, extend 객체를 사용해 커스터마이징할 수 있습니다.
NODEJS
Express를 활용한 서버 구축 경험이 있습니다.

Education.

Udemy X 사람인 웹 풀스택 취업 부트캠프

2023. 12 - 현재
  • React, NextJS 그리고 NodeJs, NestJS를 기반으로 한 웹 풀스택 과정을 수료 중입니다.
  • 매일 Velog과 Github에 학습한 내용을 기록하고 성장하는 기쁨을 즐깁니다.

CodeStates Software Engineering Frontend 42기

2022. 10 - 2023. 04
  • HTML, CSS, JavaScript, React, Web Server, 자료구조/알고리즘, 인증/보안, 배포, TDD
  • 페어프로그래밍, 팀 프로젝트

홍익대학교

2019. 03 - 2023. 02
  • 디자인경영융합학부