다만, 사랑하고 살아가는 프론트엔드 개발자
- 이름Logan Gwak (곽태욱, 郭泰昱)
- 출생April 12, 1998 (Male, Korean)
- 학위BCompSc at Chung-Ang Univ.
- 거주Gangdong-gu, Seoul, R.O.K.
- 병역ROK Army SGT, Honorable:
- KATUSA Mar. 2022 - July 2023
- ROTC Jan. 2019 - Sept. 2020
I'm Logan Gwak, a frontend developer who listens to customers while planning products that solve customer inconveniences, solves business problems, and shares the knowledge gained during product development with others to think about the reason for the existence of technology.
Work Experience (1년 8개월, 2025.04.26 기준)
- 매출: 2024년 2,354억원 (연결)자산: 2024년 2,376억원 (연결)총원: 2024년 12월 445명유형: 정규직소개: 글로벌 시장을 무대로 웹툰, 웹소설, 만화, 전자책 등을 온라인으로 제공하는 콘텐츠 플랫폼 기업
RIDI 웹
2024.04.01 ~ 현재직책: Frontend Engineer (Junior)부서: 서비스플랫폼그룹(50명) ⊃ 웹팀(6명)역할: 국내 전자책 시장에서 점유율 50% 이상을 차지하는 리디 웹 사이트 신규 기능 개발 및 유지보수- 성과 평가 (평가 기준 : Outstanding, Excellent, Good, Moderate, Need Improvement)2024-09 Excellent(세부 결과)
- 만화e북 웹 뷰어 출시
일본 디지털 만화 시장의 성장에 발맞춰 기존 리디 웹 뷰어에서 만화e북 파일도 열람할 수 있도록 지원함. 사용자가 웹에서 바로 만화를 감상할 수 있게 해서, 출시 이후 만화e북 판매 매출이 전월 대비 3.61% 증가하는 데 기여했고, 만화e북 신규 고객의 웹 뷰어 사용율이 5%로 증가함. 구체적으로 모바일 / PC 웹뷰어 전환율이 각각 8.5%p / 99%p 증가했고, 뷰어 이탈율이 각각 5%p / 99%p 감소했으며, 뷰어 오픈 시간이 각각 91% / 99% 단축됨.
- 피처 플래그 활용
신규 기능을 출시하기 전에 GrowthBook을 통해 사용자, 런타임 환경, 기능 단위로 피처 플래그를 설정하여 원활한 QA를 지원함. 배포 후 장애가 발생하면 추가적인 코드 변경이나 재배포 없이 해당 피처 플래그만 비활성화하여, 평균 3분 이내에 문제 기능을 차단하고 기존 상태로 복구해 서비스 중단 시간을 최소화함.
- E2E 테스트
Playwright로 30여 개 핵심 사용자 시나리오의 E2E 테스트 자동화 파이프라인을 구축함. 프로덕션 배포 전 수동으로 진행하던 QA 업무를 E2E 테스트로 자동화하여, 배포 전 리그레션 테스트에 소요되는 시간을 평균 31분 → 18분으로 42% 단축시켜 배포 생산성을 향상시킴.
- Node.js 기반 백엔드 API 개발
REST API 리팩토링: 필요한 데이터만 보내주는 신규 REST API를 설계하고 기존 로직을 리팩토링하여 응답 크기를 40.5 kB → 20.5 kB로 절반 가까이 줄임.
GraphQL API 확장: 작품 정보 페이지에 쿠폰 프로모션 배너를 신규로 노출하기 위해 GraphQL 스키마 타입을 새로 정의하고, 쿠폰 도메인 데이터베이스 쿼리 및 GraphQL resolver를 구현하여 UI와 연동함.
Manta - Unlimited Comics to Binge
2023.11.27 ~ 2024.03.31 (4개월)직책: Frontend Engineer (Junior)부서: 만타제품그룹(20명) ⊃ 엔지니어링팀(10명)역할: 북미 웹툰 시장 점유율 2위인 글로벌 웹툰 서비스 Manta의 React Native 기반 앱과 Next.js 기반 웹을 개발함.- 프랑스어 출시
프랑스어를 사용하는 사용자를 위해 국가별 화폐 및 날짜 형식, 언어별 텍스트 길이에 따른 디자인 차이, 콘텐츠 연령 등급 관련 현지 법률 등을 고려한 국제화(i18n) 디자인을 적용함.
- 연관 검색어 출시
사용자 검색 경험을 향상시키기 위해 프론트엔드에 연관 검색어 기능을 적용함. 출시 대비 사용자의 검색 화면 체류 시간이 20% 이상 증가하는 등 사용자가 원하는 콘텐츠를 빠르게 찾을 수 있게 함.
- 이벤트 추적
안정적인 서비스 운영과 사용자 행동 분석을 위해 Firebase와 Braze를 활용하여 추적 이벤트를 기록하고, 오류 발생 시 Crashlytics에 로그를 기록함. 이를 바탕으로 CS 문의 등 다양한 상황에서 Google Cloud 콘솔의 로그 탐색기를 활용하여 사용자의 행동 기록을 분석하여 문제를 해결함.
- 성과 평가 (평가 기준 : Outstanding, Excellent, Good, Moderate, Need Improvement)
- 매출: 2023년 1조 2,609억원 (개별)자본: 2023년 1조 5,052억원 (개별)총원: 2023년 12월 533명유형: 계약직소개: 토스의 운영사인 (주)비바리퍼블리카에서 만든 대한민국의 3번째 인터넷 전문 은행
토스뱅크 루모스 (여신 심사·관리·운영 시스템)
직책: Admin Developer부서: Housing Loan Squad (12명)역할: 대출 관련 프로세스 자동화로 토스씨엑스 담당자의 업무 효율성을 높이며, 대출 고객의 불편함을 최소화하는 토스뱅크 여신 심사·관리·운영 시스템을 Next.js 및 Toss Design System 기반으로 개발함.- 전월세보증금대출 출시
토스뱅크 개발자 및 토스CX 담당자와 협업하여 대출 서류 심사, 사후 관리, 지킴 보증 관련 기능을 출시함으로써, 토스뱅크 개인 담보대출 부문에서 약 2,000억 원의 대출 잔액 증가에 기여함.
- CI 최적화
Docker 이미지 레이어에 원격 클라우드 캐싱을 적용하여
docker build시간을 평균 300초 → 210초로 30% 단축함. - 장애 대응
서비스 기능 장애가 발생했을 때 관련 커밋을 롤백한 후 Kibana 검색 및 집계 기능을 사용하여 오류 발생 주기와 원인을 분석함. 또한 해결 방안을 논의해 문서로 남긴 후 개선된 코드를 제안하고 구현함.
- 선언형 프로그래밍
Suspense와 ErrorBoundary 개념을 이용해 네트워크 상태를 선언적으로 관리하고, React Query를 사용해 응답 순서가 보장되지 않는 네트워크 요청을 비동기로 관리함. 또한 Promise를 활용해 Modal, Dialog 컴포넌트 상태를 선언적으로 관리하고, Funnel 패턴을 활용해 다단계 페이지 이동도 선언적으로 관리함. 그리고 연관된 코드는 가까운 곳에 배치하여 컴포넌트 응집도를 높이고, 로직 세부 구현은 hook으로 숨겨 코드 파악에 필수적인 정보가 잘 보이도록 개선함.
- 전월세보증금대출 출시
Education
| Name | Detail | Period | Note |
| Chung-Ang Univ. | BCompSc (MAGNA CUM LAUDE) | Mar. 2017 - Feb. 2022 | Total GPA: 4.05 / 4.5 Major GPA: 4.04 / 4.5 |
| Honam High School | Natural Sciences | Mar. 2014 - Feb. 2017 | Grade Average: 1.45 |
| Hwasan Middle School | Boarding, Autonomous | Mar. 2011 - Feb. 2014 | Graduation Rank: 4th |
기술
Language
Frontend
Backend
Cloud
Operation Tool
AI
자격증
| 이름 | 내용 | 주관 | 일시 |
| TOPCIT 제15회 | 627점 (전국 4등) | 과학기술정보통신부 | 2021.05.22 |
| G-TELP (Level 2) | 82점 | 국제테스트 연구원 | 2020.05.03 |
| 대한검정회 | 준1급 | 대한민국한자교육연구회 | 2009.11.28 |
개발 경험 (급여 O, 4대보험 X)
(주)플랜바이테크놀로지스
2023.11.07 ~ 11.26 (3주), 2023.07.24 ~ 08.06 (2주)직책: Frontend Developer부서: 개발팀 (4명)역할: 고등학교 친구가 창업한 스타트업에서 'HOMI AI - 인공지능이 꾸며주는 나의 공간' 인테리어 디자인 AI 자동화 MVP 개발- 직책: Full stack Developer 팀장부서: 개발팀 (3명)역할: '4050 여성 전용 커뮤니티' 알파카살롱 기획 및 MVP 개발
비욘드코딩 (코딩학원)
2021.08.25 ~ 09.30 (1개월)직책: 웹 개발 수업 강사부서: 초중등반 (6명)역할: 초등학생/중학생을 대상으로 HTML/CSS/JS 개념 및 자기소개 웹페이지 제작 수업 (주 2회, 1회 3시간)- 역할: 대학생을 대상으로 Frontend·Backend·Cloud 개념, 네트워크 OSI 계층, SSR·CSR·SSG, Database 개념 수업 및 인스타그램 클론 코딩 수업 (주 3회, 1회 2시간)
- 직책: Frontend Developer 팀장 (참여연구원)부서: 개발팀 (2명)역할: '3차) 블록체인 기술을 이용한 해외 건설프로젝트 스마트 분쟁관리 모델구축 연구' 과제 참여. 건설 프로젝트 수주 협상 과정에서 주고 받는 이메일을 블록체인 상에 관리하여 추후 분쟁 발생 여지를 최소화하는 사이트 개발
- 직책: Frontend Developer부서: 개발부 (3명)역할: '방탈출 리뷰 웹사이트' 기획·디자인 및 MVP 개발
중앙대학교 2019년 2학기 SW 기초 교과목 멘토
2019.09.16 ~ 12.13 (3개월)직책: 수업 조교 (근로장학생)부서: '컴퓨팅적 사고와 문제 해결' 과목역할: 수업 중 수강생의 Scratch 프로그래밍 관련 질의 응답 및 과제 채점 (주 2회, 1회 2시간)- 직책: Software Developer (참여연구원)부서: 개발팀 (2명)역할: 'KFX IR 해석 기법 및 해석 소프트웨어 개발 연구' 과제 참여. 적외선 영상 통계 분석 개발 보조 (C++), OpenMP 라이브러리 기반 병렬처리로 수학 계산 성능 최적화
- 직책: Data Analyst부서: 연구4팀 (10명)역할: 여론 조사 데이터 통계 분석 및 엑셀 함수 작성
개발 활동 (급여 X)
신디(SinDy, Signature in Dessert) 창업
2021.02.08 ~ 11.08 (9개월)직책: Full stack Developer 팀장 (공동창업자)부서: 전체(5명) ⊃ 개발팀(2명)역할: '카페의 특색을 담아내는 사용자 주도 SNS형 디저트 정보 공유 공간' 디저트핏 기획 및 Frontend · Backend · Cloud 개발
수상
- 여행일지 자동기록 서비스 아이디어 제시 (최우수상, 2등, 상금 150만원)
- 결식 아동에게 줄 크리스마스 선물 크라우드펀딩 서비스 (우수상, 2등, 상금 5만원)
- 식의약용 자생식물 데이터 기반 사업화 서비스 아이디어 제시 (입상, 6~15등)
- Sindy 창업팀 추가 선정 (2021.11.01 ~ 2022.08.31, 10개월)
- Sindy 창업팀 선정 (2021.10.18 ~ 10.29, 2주)
- Sindy 창업팀 선정 (2021.07.01 ~ 12.31, 6개월, 지원금 200만원)
- Sindy 창업팀 선정 및 2단계 진출 (2021.06.01 ~ 07.31, 2개월)
- Sindy 창업팀 선정 (2021.02.05 ~ 11.30, 10개월, 지원금 500만원)
- ‘버려지는 소재를 새로운 순환으로’를 주제로 사업계획서 작성‘온라인 새활용 제품 유통 플랫폼’ 기획으로 대상(1등) 수상 및 특허 출원
- 2019-1학기 ~ 2020-2학기 전액장학금 (4개 학기)
- 블록체인 기반 전자투표 시스템(e-voting) 기획 및 개발 (피칭상, 6등)
소개
직접 만든 기프트링크 동아리의 소프트웨어 개발자로 시작해, (주)페스타 인턴, 신디(Sindy) 창업팀, 토스뱅크(주) 계약직, 리디(주) 정규직 등에서 다양한 프로젝트를 수행하며 서비스가 세상에 나오기 위한 전체 개발 주기를 경험했습니다. 이 과정에서 서비스의 성공은 동료와의 협업과 서로의 성장에 기반한다는 사실을 느꼈습니다.
문제 해결 경험 약 950자
제가 난관에 부딪혔을 때 해결했던 사례로 토스뱅크에서의 경험을 말씀드릴 수 있습니다. 토스뱅크에서 Admin Developer로 근무하며 여신 심사·관리·운영 시스템의 화면 설계와 개발을 담당하던 중, 금융 분야에 특화된 지식과 여신 도메인에 대한 이해 부족이라는 문제에 직면했습니다. 단순한 개발 지식만으로는 장님이 코끼리 다리 만지는 방식과 비슷하여, 금융 도메인 지식을 알지 못하면 복잡한 금융 시스템을 효율적으로 구축할 수 없다는 것을 깨달았습니다.
이 문제를 해결하기 위해 먼저 금융 관련 규제와 법률을 조사했습니다. 개인정보보호법과 은행법의 관련 조항을 검토하여 시스템이 준수해야 할 요건과 제한 사항을 파악했습니다. 특히 어떤 정보가 필수적으로 마스킹되어야 하는지 확인하기 위해 금융 업계 출신의 팀원들과 협업하여 실무적인 지식을 습득했습니다. 이 과정에서 주민등록번호와 핸드폰 번호 등 그 자체만으로 고객을 특정할 수 있는 민감한 정보는 암호화하여 저장하고, 화면에 표시될 때는 마스킹되어 보여지도록 구현했습니다.
또한 전월세보증금의 자금 흐름을 명확히 파악하기 위해 대출 프로세스에서 각 주체--임대인, 임차인, 보증 기관, 금융 기관--간의 역할과 거래 구조를 분석했습니다. 이를 통해 자금이 어떤 경로로 이동하며, 어떤 주체가 대출금을 어떻게 보증하고, 각 단계에서 필요한 법적 요건과 컴플라이언스 사항이 무엇인지 이해했습니다. 그 후 전월세보증금 대출의 승인 과정에서 필요한 문서와 정보를 효율적으로 처리할 수 있도록 루모스(내부 여신 시스템) 워크플로우를 개선하고, 관련 법률에 따른 보고 및 감사 요구사항을 충족하도록 데이터 관리 방안을 수립하여, 시스템 설계와 개발 과정에서 서비스의 보안성과 규제 준수성을 높였습니다.
이러한 경험을 통해 난관에 부딪혔을 때 문제의 근본 원인을 분석하고, 필요한 지식을 습득하며, 팀원들과의 협업을 통해 해결책을 모색하는 것이 중요하다는 것을 배웠습니다.
직무 성취 경험 약 900자
제가 가장 큰 성취감을 느낄 때는 제가 참여한 프로젝트가 회사와 사용자 모두에게 실질적인 가치를 제공하고, 그 결과가 명확한 지표로 나타날 때입니다. 저는 사용자와 비즈니스에 긍정적인 영향을 미치는 결과를 만들어낼 때, 그리고 어려운 문제를 해결하여 팀의 목표 달성에 기여할 때 가장 큰 성취감을 느낍니다.
예를 들어, 리디에서 만화 e북 웹 뷰어를 출시한 경험이 있습니다. 이 프로젝트에서는 사용자가 웹에서 직접 만화를 감상할 수 있도록 기존 뷰어를 개선했습니다. 출시 후 만화 e북 판매 매출이 전월 대비 3.61% 증가했고, 만화 e북 신규 고객의 웹 뷰어 사용률이 5%로 상승했습니다. 구체적으로 모바일과 PC 웹 뷰어의 전환율은 각각 8.5%p와 99%p 증가했으며, 뷰어 이탈률은 5%p와 99%p 감소했습니다. 또한 뷰어 오픈 시간도 각각 91%와 99% 단축되었습니다. 이러한 성과를 통해 제가 기여한 기술적 개선이 사용자 경험과 비즈니스 성과에 직접적인 영향을 미쳤음을 확인할 수 있었고, 이는 큰 보람으로 다가왔습니다.
또한, 난관을 극복하고 새로운 지식을 습득하여 문제를 해결했을 때 성취감을 느낍니다. 토스뱅크에서 여신 심사·관리·운영 시스템을 개발할 당시, 금융 분야의 전문 지식이 부족하여 어려움이 있었습니다. 이를 해결하기 위해 금융 관련 규제와 법률을 적극적으로 학습하고, 금융 업계 출신 팀원들과 협업하여 도메인 지식을 습득했습니다. 전월세보증금 대출 프로세스에서 자금의 흐름과 각 주체의 역할을 명확히 이해한 후, 시스템에 이를 정확하게 반영했습니다. 그 결과, 전월세보증금대출 관련 프로세스를 자동화하고 시스템 효율성을 높여 개인 담보대출 부문에서 약 2,000억 원의 대출 잔액 증가에 기여할 수 있었습니다. 금융 산업의 문제를 분석하고 해결하여 팀의 목표 달성에 이바지했다는 점에서 큰 만족감을 얻었습니다.
가치관 및 신조 약 900자
저는 개인적인 성장과 팀의 목표 달성을 중시하는 프론트엔드 개발자입니다. 프론트엔드 개발의 핵심은 사용자 경험 최적화와 고객 간 신뢰 구축에 있다고 믿습니다. 이는 화면에 콘텐츠를 처음으로 표시하는 시점(First Contentful Paint, FCP)의 최적화와 같은 기술적 세부사항부터 시작됩니다. 제가 신디 창업팀의 일원으로 '카페 특색을 담은 SNS형 디저트 정보 공유 서비스' 프로젝트에 참여한 경험은 이러한 신념을 실현하는 과정이었습니다.
대학에서 컴퓨터공학을 전공하며 팀 프로젝트와 서비스 개발 실무 경험을 쌓기 위해, 신디 창업팀의 'SNS형 디저트 정보 공유 서비스' 개발에 참여하여 카페와 디저트에 관한 다양한 아이디어를 모아 초기 MVP(Minimum Viable Product)을 제작했습니다. 하지만 이 MVP는 추후 설문조사 및 인터뷰를 통해 얻은 고객의 요구사항과 다소 차이가 있었고 추가적인 성능 개선도 필요했습니다. 이에 신디 개발팀장으로서 팀원의 강점에 맞는 역할을 할당하고 프로젝트 방향을 설정했습니다. 저는 프론트엔드 개발에서 디자이너에게 사용자 인터페이스에 대한 세밀한 피드백을 제공했습니다. 또한 백엔드 개발에서 서비스의 사용자 경험을 개선하기 위해 필요한 데이터만 주고 받도록 해서 데이터 처리의 효율성을 높였고, 프론트엔드에 최적화된 백엔드 API 설계에 기여했습니다. 이 프로젝트는 성공적으로 출시되어 월간 사용자 수(Monthly Active User, MAU) 5천 명을 달성하는 성과를 이루었습니다.
개발자는 개인의 파트뿐만 아니라 프로젝트 전체적인 운영에 시야를 갖춰야 합니다. 개발 일정과 코드 유지보수, 기획 요소를 녹일 수 있는 부분까지 고려하여 최적화된 기능을 구현하여야 만족도 높은 결과물을 산출할 수 있기에, 이 부분에서 책임감을 나타낼 것을 약속드립니다.
이루고 싶은 것 약 850자
개발자로서 이루고자 하는 것은 기술을 통해 일상생활에서 사람들이 겪는 불편함을 해결하고, 실질적인 가치를 제공하는 것입니다. 리디와 토스뱅크에서의 웹 프론트엔드 개발 경험을 바탕으로, 사용자에게 이익이 되면서 비즈니스 매출을 증대시키고 낭비되는 비용을 줄일 수 있는 솔루션을 개발하는 데 집중하고자 합니다.
예를 들어, 의료 분야에서 병원 간 데이터 공유가 원활하지 않아 환자들이 다른 병원을 방문하거나 상급 병원으로 전원할 때 동일한 진료를 여러 번 받아야 하는 문제가 있습니다. 또한, 진료 데이터를 공유하기 위해 환자가 직접 개별 병원에 자신의 진료 기록을 수동으로 전달해야 하는 번거로움도 존재합니다. 이러한 문제를 해결하기 위해 의료 데이터의 표준화와, 개인정보보호법과 의료법을 준수하는 안전한 공유 시스템을 구축하여 환자들의 불필요한 불편을 줄이고자 합니다.
또한, 최근 빠르게 성장하고 있는 무인 매장 시장에서, 무인 매장을 운영하면서 빈번하게 발생하는 도난 문제는 운영 효율성과 신뢰성에 큰 영향을 미칩니다. 이를 해결하기 위해 영상 인식 기술과 센서 데이터를 활용한 실시간 모니터링 시스템을 개발하여 도난을 예방하고, 점주들이 수동으로 CCTV 화면을 주 52시간 이상 모니터링하지 않고도, 청소 및 매대 정리 등 하루에 1시간만으로도 운영할 수 있는 솔루션을 구현하여 무인 매장의 운영 효율성을 높이고 싶습니다.
그밖에도 높은 공실률로 인해 빌딩 자산이 효율적으로 활용되지 못하고 가치가 낭비되는 현상이 있습니다. 이에 대한 해결책으로, 빌딩의 사용 데이터를 분석하고 수요와 공급을 매칭하는 플랫폼을 개발하여, 빈 공간을 커뮤니티 시설로 전환하는 등 자산의 가치를 극대화할 수 있는 방안을 모색하고 싶습니다.
성격의 장단점 약 300자
저는 업무에 깊이 몰입하며 뛰어난 집중력을 발휘합니다. 이는 3개월 동안 토스뱅크(주)라는 금융 기업에서 계약직으로 근무하면서 경험했습니다. 반면, 한 가지에 집중하는 경우 부분적으로 놓치는 요소가 있었습니다. 하지만 다양한 프로젝트와 인턴 실무를 경험하며 프로젝트의 전체적인 흐름과 업무 분배의 중요성을 깨달았습니다.
현재는 업무 분석에 우선순위를 두고, 자체적인 데드라인 설정을 통해 시간 관리에 집중하고 있습니다. 또한, 해당 도메인의 전문적인 지식을 가지고 있는 팀원에게 지속적으로 업무에 대한 피드백을 요청해 서비스에 대한 시야를 넓히고 있으며, 프로젝트 전체를 이해하는 개발자로 성장하고 있습니다.
포트폴리오
프로젝트
OFFICE AI
- 검색 순위 향상을 위해 Search Engine Optimization 관련 HTML 메타데이터를 설정함
- 네트워크 응답 시간이 긴 AI 서비스 특성에 맞게 SWR 등을 활용해 데이터 불러오기 UI를 구현함
- Figma UI 디자인을 참조해 프로토타입 개발 및 Vercel 클라우드에 자동 배포
- React Query로 AI 서버 응답 관리 및 Recoil.js로 클라이언트 전역 상태 관리
코리아톡
- 디자인: 페이지 왼쪽엔 자신의 대화방 목록을 불러오고 각 대화방을 클릭 시 해당 대화방 id를 참조하여 대화 내용을 오른쪽에 보여줌. 대화 목록은 마지막 대화 시각 기준 내림차순으로 이메일은 생성일 기준 오름차순으로 클라이언트 측에서 정렬해서 표시해 줌
- 메시지 전송: 특정 대화방에서 대화 입력 중 Shift+Enter를 눌렀을 땐 전송 가능하지만 아무 내용이 없을 경우에는 전송이 불가능함. 대화를 전송하면 카카오톡과 비슷하게 응답이 올 때까지 로딩 상태의 말풍선을 보여줌. 그 후 서버 응답이 오면 서버 응답 내용으로 대체됨. 메시지를 2개 이상 동시에 전송해도 일관성 있는 UI를 보여줌.
- 메시지 응답: 메시지를 전송하면 임의의 시간 이후에 답장이 소켓으로 옴. 이를
Socket.io
를 이용해 대화 목록에 실시간으로 추가시킴. 서버 응답을 소켓으로 받기 때문에, 여러 브라우저 창에서 코리아톡 사이트를 열었을 때 한 창에서 메시지를 전송하더라도 서버 응답이 다른 창에서도 보임. 소켓으로 다른 대화방 대화 내용이 오면 대화방 목록의 마지막 대화 시각을 갱신하고 정렬해줌. - SWR: 각 대화방의 대화 내용을
Recoil.js
로 캐싱해서 해당 대화방의 마지막 대화 시각이 변경되지 않으면 서버에 추가로 요청하지 않고 이전에 불러왔던 데이터를 보여줌
지키다
- SQL 개선: 약 2억 개의 예산 데이터 검색에 50초 걸리는 응답시간을 B+Tree 인덱스를 설계해 5초로 개선함
- UPSERT: 기존 데이터의 업데이트와 새로운 데이터의 삽입이 반복적으로 발생하는 상황에서, SQL의 UPSERT 개념을 적용하여 데이터가 이미 존재할 경우 해당 데이터를 업데이트하고 그렇지 않을 경우 새로운 데이터를 삽입해, 불필요한 중복 삽입을 방지하고 데이터베이스의 무결성을 유지하면서 데이터 관리를 효율적으로 수행함
- 렌더링 개선: 페이지 렌더링에 필요한 리소스 용량을 줄이기 위해 Next.js 13을 이용해 특정 URL의 HTML 파일을 캐싱함. Dynamic import를 사용해 클라이언트 JS 번들 크기를 줄임.
- 크롤링: OpenAPI를 이용해 중앙정부 세출과 지방자치단체 세출 데이터를 데이터베이스에 주기적으로 저장함
이력서
- 빠른 개발을 위해 Next.js와 TailwindCSS, Vercel을 이용함
쿠팡 가격 알리미
- 사이트를 크롤링 후 특정 조건을 만족하면 모바일로 알림을 보내는 알고리즘을 구현함
- 특정 사용자의 최근 N개 알림 목록과 같이, one-to-many 관계의 테이블일 때 many 쪽 테이블에서 모든 레코드가 아닌 특정 레코드 N개만 선택해 JOIN 해야하는 상황이 발생했는데, Greatest-N-Per-Group 알고리즘을 사용하여 해결함
- 프로젝트의 규모가 커질 수록 Styled components는 CSS 번들 크기의 선형적 증가라는 단점이 있어 Tailwind를 도입함. Tailwind는 사용 시 별도 CSS 문법을 익혀야한다는 단점이 있지만, Styled component와 달리 Tailwind에서는 별도로 변수를 설정할 필요 없이 바로 className만을 작성하면 되는 점이 편리하다고 느낌.
- 서버리스 서비스인 Cloud Run에서 웹사이트 크롤링 용도로 설치한 puppeteer가 작동하지 않는 문제가 발생함. root 사용자 대신 권한이 특정 폴더로 제한된 새로운 사용자를 만들어 puppeteer 접근 범위를 제한하고, puppeteer가 컨테이너 위에서 실행되기 때문에 sandbox 보안 설정을 해제하여 해결함
자유담
- 상태 관리: 네트워크 요청 및 응답 데이터는 Apollo client로 관리하고, input 입력값 데이터는 React form으로 관리하고, 클라이언트 전역 상태는 Recoil.js로 관리함
- 페이지네이션: Offset Pagination, Keyset Pagination 개념을 활용한 SQL 쿼리를 작성함
- 실시간 통신: 웹소켓보다 가벼운 HTTP2 Server push를 사용해 채팅 기능을 구현함. 본 프로젝트에선 바이너리 데이터를 서버에서 클라이언트로 먼저 보내는 경우가 없어 Server push로도 적당하다고 판단함. 브라우저의 EventSource 기능을 활용하면 HTTP2 서버에서 브라우저로 먼저 요청할 수 있음
- WebRTC: 브라우저 카메라를 이용해 QR 코드 스캔 기능을 구현함
- Nginx를 사용해 동일 호스트 내 멀티 도메인 및 멀티 서버 구축
- 가비아 클라우드 내 g클라우드 서버 임대 후 도메인 및 네트워크 설정
- Certbot을 사용해 HTTPS 적용 및 Crontab으로 인증서 자동 갱신
- TOAST UI 및 채널톡 적용
- 게시글·댓글·답글 CRUD, 회원·그룹 CRUD, 댓글 좋아요 기능 구현
- 순수 CSS와 React portal을 이용해 Drawer·Modal 직접 구현
- Google Cloud Build를 활용해 CI·CD 설정, Google Cloud Storage에 이미지 자동 업로드
- 카카오 OAuth 및 자동 로그인
- 카카오 비즈 채널로 카카오 알림톡·친구톡 연동해서 새 댓글 및 답글 등 알림 기능
display: grid
,@media
쿼리를 사용해 반응형 디자인을 구현함- GKE를 사용하여 클러스터, 노드, 팟을 설정하고, 컨테이너의 자동 스케일링과 로드 밸런싱을 구현함
- GCP 상의 IP, 포트 방화벽 등 네트워크 환경을 설정함
업비트 자동 매매
- 웹소켓을 활용해 실시간으로 코인 시세를 획득함
- 이동평균선, RSI, MFI 등 차트 보조 지표를 구현해 매매 알고리즘에 활용함
- Docker를 활용해 오류 등으로 컨테이너가 종료됐을 때 자동으로 재실행됨
소복
- GCP 백엔드 아키텍처 설계 및 클라우드 CI·CD 구성
- PostgreSQL 쿼리 빌더를 간단하게 구현하고 PL/pgSQL을 사용하여 SQL 요청 횟수 줄임
- Webpack을 활용해 JavaScript 코드를 압축하여 Docker 이미지 크기 최적화 (140MB → 40MB)
- 디자이너와 Figma 및 Zeplin을 통해 페이지 디자인 및 SVG 벡터 이미지 공유
- Intersection Observer API를 사용해 무한스크롤 페이지네이션을 구현함
수능 모의고사 웹사이트
- Virtual Box VM 인스턴스를 활용해 웹 서버, API 서버, DB 서버 구축
- 사설 IP를 활용해 3가지 서버 연결 및 각 서버별 방화벽 설정
- 배포 자동화를 위해 리눅스 crontab을 활용하여
git pull
자동화
심리 테스트
- Vercel에 프론트엔드 자동 배포, Cloud Run에 백엔드 자동 배포
- Slack에 프론트엔드·백엔드 배포 알림 설정 및 GitHub, Slack을 사용해서 협업
- Google Analytics를 적용해 방문하는 사용자 분석
- PWA를 적용해 모바일 환경의 사용자 경험 및 접근성 향상
- Next.js API Routes 기능을 이용해 비공개 블록체인의 개별 노드와 통신
@emailjs/browser
라이브러리를 사용해 다른 서버로 이메일 전송 및imap
라이브러리를 사용해 다른 IMAP 이메일 서버 내용을 가져옴