본 서비스에서 제공하는 사용자의 개인정보 데이터를 포함하여 각 정보주체의 동의 없이 데이터를 무단으로 수집하는 행위를 금지 및 거부합니다. 공개된 데이터도 크롤링 등 기술적 장치를 이용해 허가 없이 수집하는 경우 개인정보 보호법에 따라 형사처벌 될 수 있음을 알려드립니다.
© 2025 Rocketpunch, 주식회사 더블에이스, 홍원표, 대한민국 서울특별시 성동구 성수일로10길 12, 12층 1호, 04793, support@rocketpunch.com, +82 10-2710-7121
사업자등록번호 206-87-09615
더보기
최지연
안녕하세요. 전 스포츠 기획/마케터 출신의 프론트엔드 개발자입니다. 기획 의도를 파악하고, 그것을 개발에 잘 녹여내기 위해 노력하는 개발자입니다. 비 개발자의 시선에서 더욱 쉽게 기술적인 부분에 대해 설명하며 개선해오는 협업 방식을 지향하며 실행하고 있습니다.
경력
회계법인 회사의 회계 노하우가 담긴 서비스입니다. 사용자는 다양한 회계 서비스를 이용할 수 있습니다. 1. Next-auth와 AWS Cognito 통합한 로그인 구현 amazon-cognito-identity-js 라이브러리를 이용해 클라이언트에서 로그인 요청 시, 정보가 4~5개의 Provider와 함께 웹 로컬스토리지로 들어왔습니다. 이는 보안적인 측면에서 이슈가 있을 것이라고 판단하였습니다. 그래서 Next-auth의 credentials와 Callback을 이용해 서버사이드로 처리를 진행했습니다. 쿠키 1개로 정보를 관리했으며, 프론트에서의 보안 이슈를 개선했습니다. 2. 결제 심사를 위한 페이지 제작 (공지사항, FnQ, 결제 페이지) 공지사항 - 다른 레퍼런스를 찾아보니 공지사항은 간헐적으로 올라오는 경우가 많아 페이지네이션 및 검색 기능이 없는 경우들도 더러 존재했습니다. 사용자가 제목을 기준으로 검색할 수 있게 검색 기능, 페이지네이션을 포함해서 페이지를 제작했습니다. FnQ - 분류별 태그로 페이지가 랜더링 될 수 있게 제작했습니다. 수정의 여지가 있어 정적 타이핑이 아닌 배열로 정보를 관리해 map method로 컴포넌트로 관리할 수 있게 개발을 진행했습니다. 결제 페이지 - 결제 심사를 위한 비즈니스,개인 회원 회계 상품 결제 페이지 제작 및 React-hook-form(이하 RH)의 Controller를 이용한 불 필요한 React hook 최소화 3. 컴플라이언스& RFC 대응을 고려해 개발을 진행 서비스를 운영하는 것에 있어서, 개인정보는 사용자로부터 컴플레인이 많이 일어날 수 있다는 것을 스토어 리뷰를 서치하면서 알게되었습니다. 팀 내 데브옵스 엔지니어 분께 개인 정보에 위반되지 않는 부분을 컨펌 받고, RFC 이메일 패턴, 회원 가입 체크 박스 전체 동의 조건 등 컴플라이언스를 지켜 개발을 진행했습니다.
더보기
특강 제목 : MVP 설정을 통한 파이널 프로젝트 준비하기 특강 내용 : 1. 2시간 특강 + 2시간 맨투맨 멘토링 2. “3주의 시간동안 어떻게 효율적으로 프로젝트를 진행 할 것인가?”라는 목표를 기반으로 학생들이 많이 겪는 방해 요소를 정리해 MVP소개 3. IA & UserFlow, 백로그 등 개발에 앞서 제작해야 하는 과정에 대한 당위성을 설명
더보기
뉴질랜드 투자 스타트업의 투자자 유치를 위한 회사 소개 페이지 리뉴얼 작업을 전반적으로 담당했습니다. (회사 홈페이지 : http://knccapital.co.nz/) 1. Storybook을 이용한 클라이언트와 소통 컴포넌트 제작 동안, 시각적인 자료를 이용해 클라이언트와 소통하려했습니다. 눈에 보이는 페이지가 나오는 단계가 아니었기에 개발 진행 상황에 대해 설명하기 위해 Storybook을 선택하게되었습니다. 레이아웃, 반응형 테스트를 위한 control interface 환경 구축해 직접 테스트를 해볼 수 있게 개선했습니다. 2. 반응형 UI 구현 React를 이용한 컴포넌트 제작했으며, tailwindCSS를 사용한 커스텀 도형 컴포넌트 제작해서, 커스텀 도형 내 텍스트 내용이 바뀌어도 쉽게 바꿀 수 있도록 props로 제어했습니다. 또한,현지 desktop 뷰포트 상황을 고려해 max view port 1024 반응형 UI 로 구현했습니다. 클라이언트의 니즈를 반영해 gsap을 이용해 마이크로 애니메이션을 구현했습니다. 3. 지역 인터넷 환경을 고려한 최적화 네이버 페이지가 열리는데도 꽤나 오랜 시간이 걸린다는 클라이언트의 말씀을 듣고 개발 시에도, slow 3G, fast 3G 환경에서 테스트 진행을 했습니다. slow 3G로 최초 진입 시, 로드 시간 평균 3초 미만으로 되게끔 개발을 진행했습니다. 이미지 콘텐츠가 많아서 vite로 빌드 시, chunk가 된다 해도 테스트 시 약간의 버벅거림이 존재 했습니다.그래서 imagemin-cli 패키지를 이용해 로컬에서 한 번 더 이미지 최적화를 진행해서 개선했습니다. 4. 클라언트로부터 form 전송 시, 해당 회사 웹 메일로 전송하는 기능 구현 기존 보유 서버가 node.js로 배포 하려면, 추가 요금 지불이 필요했습니다. 그래서 firebase cloud functions를 이용해 nodemailer를 이용한 해당 회사 웹 메일로 전송하는 기능을 구현했습니다. 예민한 개인정보는 cloud functions의 Magic key로 환경 변수 처리했습니다.
더보기
2023년 1월 - 2023년 2월 · 2개월
프론트엔드스쿨 4기 특강강사
2023년 2월 - 2023년 2월 · 1개월
- IT기획에서의 기획 범위. - 사이드 프로젝트에서의 기획 범위를 잡는 법과 플로우 소개. - IA와 userFlow, 백로그 소개 및 적용 사례. - 자체 프로젝트 진행 시, 개발 흐름 케이스 스터디. - 외주 프로젝트 진행 시, 개발 흐름 케이스 스터디.
더보기
프론트엔드스쿨 4기 특강강사
2023년 1월 - 2023년 1월 · 1개월
- 깃이슈, 마일스톤, 프로젝트 사용법 소개. - 실제 적용 사례를 통한 케이스 스터디. - 깃 이슈 템플릿 기능 소개 및 적용 방법 소개. - 웹 훅 (Web Hook) 연동 방법 소개. - 타 라이브러리의 깃 이슈와 디스커션을 활용한 정보 교환 사례.
더보기
스포츠 협회와의 온라인 콘텐츠 기획 및 수행.
학력
