다만, 사랑하고 살아가는 프론트엔드 개발자
基本情報
- 生年月日
- 1998年4月12日（男、韓国人）
- 趣味
- 自転車、ウェイトトレーニング、読書
学歴・兵役
- 兵役
- 兵役満了（韓国陸軍兵長満期除隊）
- •KATUSA 2022.03 ~ 2023.07
- •ROTC 2019.01 ~ 2020.09
github.com/gwak2837
linkedin.com/in/gwak2837
velog.io/@gwak2837お客様の不便さを解決する製品を企画しながら、お客様の声に耳を傾けてビジネス問題を解決し、製品を開発する途中で得た知識を他人と共有しながら技術の存在理由を悩むフロントエンド開発者郭泰昱です。
職務経歴 (1年11ヶ月、2025年7月27日基準)
- 現在総人員: 445名(2024年12月)
グローバル市場でウェブトゥーン、ウェブ小説、漫画、電子書籍などをオンラインで提供するコンテンツプラットフォーム企業
RIDI ウェブ
フロントエンドエンジニア (ジュニア) · Webチーム (6名)
2024年4月 ~ 現在韓国の電子書籍市場でシェア50%以上を占めるRIDIウェブサイトの新機能開発およびメンテナンス
ridibooks.com
React.jsNext.jsGraphQLPHPNode.jsMySQLPlaywrightSentryDatadog•成果評価 （基準：Outstanding, Excellent, Good, Moderate, Need Improvement）2024-09 Excellent （詳細結果）
•漫画電子書籍ウェブビューアーローンチ日本のデジタル漫画市場の成長に合わせて、既存のRIDIウェブビューアで漫画電子書籍ファイルも閲覧できるようにサポート。ユーザーがウェブで直接漫画を楽しめるようにし、リリース後、漫画電子書籍の売上高が前月比3.61%増加することに貢献し、漫画電子書籍の新規顧客のウェブビューア使用率が5%に増加。具体的には、モバイル/PCウェブビューアのコンバージョン率がそれぞれ8.5%p/99%p増加し、ビューアの離脱率がそれぞれ5%p/99%p減少し、ビューアのオープン時間がそれぞれ91%/99%短縮。
•A/Bテスト合計10万人のユーザーを対象に2週間、複数のUI改善案についてA/Bテストを実施。ユーザーの50%は既存のUIを維持し、残り50%は複数のグループに分けて異なるUI改善案を提供。実験の結果、新しいUIを使用する特定のグループで売上などの主要ガードレール指標が維持されると同時に、KPIであるユーザーエンゲージメント率が10%p、有料転換率が5%p上昇したことを確認。このデータに基づいて該当UI改善案をプロダクション環境に最終デプロイ。これによりUI改善効果をデータベースで評価し、最も効率的なUIを識別することができた。
•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リゾルバーを実装してUIと連動。
Manta - Unlimited Comics
フロントエンドエンジニア (ジュニア) · エンジニアリングチーム (10名)
2023年11月 ~ 2024年3月北米ウェブトゥーン市場シェア2位のグローバルウェブトゥーンサービスMantaのReact NativeアプリとNext.jsウェブ開発
React NativeNext.jsReduxSentry•フランス語版リリースフランス語を使用するユーザーのために、国別通貨および日付形式、言語別テキスト長によるデザインの違い、コンテンツ年齢等級関連の現地法律などを考慮した国際化（i18n）デザインを適用。
•関連検索語機能ユーザー検索体験を向上させるためにフロントエンドに関連検索語機能を適用。リリース前と比較してユーザーの検索画面滞在時間が20%以上増加するなど、ユーザーが望むコンテンツを素早く見つけられるようにした。
•Sentryエラー分類システム構築既存でエラーが
Unknown Errorとして報告されデバッグが困難だった問題を解決するために、クライアント側エラーフィルタリングシステムを構築。ネットワークエラー（status code 0）を別途分類し、エラータイプ別カスタムタグを適用してエラー原因を体系的に分類。これにより全体エラーの約35%を占めていたネットワークエラーを識別し、残りのエラーを5つの主要カテゴリ（APIレスポンスエラー、レンダリングエラー、状態管理エラー、サードパーティSDKエラー、ユーザー権限エラー）に分類して、週間エラー分析会議時間を平均1時間から45分に25%短縮。 - 2023総人員: 533名(2023年12月)
トスの運営会社である（株）ビバリパブリカが作った大韓民国の3番目のインターネット専門銀行
トスバンクルモス（与信審査・管理・運営システム）
アドミン開発者 (契約職) · Housing Loan Squad (12名)
2023年8月 ~ 2023年11月Next.jsおよびToss Design Systemベースでトスバンク与信審査・管理・運営システムを開発し、貸出関連プロセスの自動化でトスCX担当者の業務効率を高め、貸出顧客の不便を最小化
Next.js 13Toss Design SystemReact Query•伝貰保証金ローンリリーストスバンク開発者およびトスCX担当者と協業して貸出書類審査、事後管理、保証関連機能をリリースすることで、トスバンク個人担保貸出部門で約2,000億ウォンの貸出残高増加に貢献。
•CI最適化Dockerイメージレイヤーにリモートクラウドキャッシングを適用し、プロジェクトビルド時間を平均300秒から210秒に30%短縮。
•宣言型プログラミングSuspenseとErrorBoundaryの概念を利用してネットワーク状態を宣言的に管理し、React Queryを使用してレスポンス順序が保証されないネットワークリクエストを非同期で管理。またPromiseを活用してModal、Dialogコンポーネント状態を宣言的に管理し、Funnelパターンを活用して多段階ページ移動も宣言的に管理。そして関連するコードは近い場所に配置してコンポーネント凝集度を高め、ロジック詳細実装はhookで隠してコード把握に必須な情報がよく見えるように改善。
学歴
| 学校 | 詳細 | 期間 | 備考 |
| 中央大学 | コンピューター工学部学士 (MAGNA CUM LAUDE) | 2017年3月～2022年2月 | 総合成績: 4.1 / 4.5（163単位） 専攻成績: 4.0 / 4.5（89単位） |
| 湖南高等学校 | 理系 | 2014年3月～2017年2月 | 平均成績: 1.45 |
| 華山中学校 | 寄宿型自律学校 | 2011年3月～2014年2月 | 卒業順位: 全校4位（男子首席） |
資格
| 名前 | 内容 | 主催 | 日時 |
| 2025年定期技師1回 | 情報処理技師 | 科学技術情報通信部 | 2025年6月13日 |
| TOPCIT 第15回 | 627点 (全国4位) | 科学技術情報通信部 | 2021年5月22日 |
| G-TELP (Level 2) | 82点 | 国際テスト研究院 | 2020年5月3日 |
| 大韓検定会 | 準1級 | 大韓民国漢字教育研究会 | 2009年11月28日 |
その他の資格を見る
| 名前 | 内容 | 主催 | 日時 |
| TOPCIT 第14回 | 523点 | 科学技術情報通信部 | 2020年10月31日 |
| TOPCIT 第13回 | 609点 | 科学技術情報通信部 | 2020年6月20日 |
| TOPCIT 第12回 | 488点 | 科学技術情報通信部 | 2019年10月19日 |
| TOPCIT 第11回 | 383点 | 科学技術情報通信部 | 2019年5月18日 |
| TOPCIT 第10回 | 343点 | 科学技術情報通信部 | 2018年10月20日 |
| TOPCIT 第9回 | 397点 | 科学技術情報通信部 | 2018年5月19日 |
| テコンドー | 1段 | 国技院 | 2015年11月18日 |
| 柔道 | 2段 | 大韓柔道会 | 2013年11月27日 |
| グラフィック技術資格 | 3級 | 韓国生産性本部 | 2010年11月26日 |
| 情報技術資格 (ハングルパワーポイント) | A等級 | 韓国生産性本部 | 2009年12月3日 |
| ワードプロセッサー | 3級 | 大韓商工会議所 | 2008年12月26日 |
技術スタック
開発経験 (給与あり、社会保険なし)
(주)플랜바이테크놀로지스
2023.11.07 ~ 11.26 (3주), 2023.07.24 ~ 08.06 (2주)- 직책: 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명)역할: 여론 조사 데이터 통계 분석 및 엑셀 함수 작성
開発活動 (無給)
신디(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 이메일 서버 내용을 가져옴