Projects .

• DTA

  Personal Project

  2023.09

  Links .

  • Github
  • Deployed Link

  Overview .

  Document Construction Business Tax Administration

  My Tasks .

  • Developed a service for a specific company's Admin system
  • Designed a Form by appropriately mixing Controlled Components and Uncontrolled Components to efficiently handle user input data
  • Managed Modal component that can suffer from continuous rendering of unnecessary components or fragmentation efficiently
  • Implemented the document printing functionality for tax declarations using react-to-print
  • Implemented and deployed features using Firebase's Firestore, Authentication, Hosting, and Github Actions.

  Improvement .

  • Improved initial loading speed through web performance optimization using React.Lazy for dynamic import, Vite bundler's tree shaking and build.rollupOptions.output.manualChunks

  Tech Stacks .

  ReactTypeScriptReact QueryRedux ToolkitEmotionZodReact-Hook-FormVitePnpmGoogle FirebaseJestGithub Actions

• FineApple

  Team Project ·

  3 FE

  2023.04 - 2023.05

  Links .

  • Github
  • Deployed Link
  • Collaboration History

  💿

  If you want to try to use Deployed Service, you have to register because of Firebase's security rule.

  Overview .

  Community Web Application related to Computer / IT and Game topics

  My Tasks .

  • Developed AutoComplete UI Component based on keyword search for titles of questions and selected topics in the Select component
  • Implemented Infinite Scroll to fetch a page unit list of topic-related questions
  • Migrating an existing project implemented with Vite and JavaScript to a custom setup with Webpack and TypeScript
  • Deployed Frontend with Firebase and Github Actions
  • Created UI guidelines for colors, font styles, component styling, and layout

  Improvement .

  • Controlled Routing based on user info and login status, using Higher Order Component(HOC) , such as AuthenticationGuard Component
  • Improved code to proactively fetch Data from the Server and quickly show User a UI with server status, using Loader in React Router
  • Improved unnecessary Refetch by introducing React Query to manage server state and cache
  • Introduced Firebase's Authentication, Firestore, Storage and refactored it to enable actual service operation and deployment, after implementing mock server using Node.js and Express.js

  Tech Stacks .

  ReactJavaScriptReact QueryRecoilEmotionMantineZodReact-Hook-FormViteYarnGoogle FirebaseGithub Actions

• Vanilla Trello

  Personal Project

  2023.06 - 2023.08

  Links .

  • Github
  • Deployed Link

  Overview .

  Trello Clone Project using Vanilla JavaScript only

  My Tasks .

  • Implemented SPA (Single Page Application) using Vanilla JavaScript without any libraries or frameworks
  • Created a diffing algorithm similar to React's Reconciliation
  • Designed a CBD library based on the implemented diffing algorithm, using Class (ES6+) syntax
  • Implemented various DOM event interactions using event delegation

  Improvement .

  • Gain a better understanding of this binding and class syntax
  • Got a better understanding of the DOM API and valuable experience implementing Web Applications in Vanilla JavaScript

  Tech Stacks .

  HTMLCSS(Sass)JavaScriptLodash

• ESC

  (Easy Sports Club)

  Team Project ·

  2 FE & 3 BE

  2022.11 - 2022.12

  Links .

  • Github
  • Demo Video

  Overview .

  Web Application of location-based gym search, booking, and goods rental

  My Tasks .

  • Developed User Authentication-related features and UI, such as Login, Signup, Forgot-Password, and Member Detail pages
  • Implemented Social Login with JWT and OAuth 2.0
  • Developed a gym booking page using conditional rendering by steps
  • Implemented gym bookmark, reservation, and notification history pages with Server State and Cache Management using RTK Query
  • Designed wireframe for a consistent UI

  Improvement .

  • Enhanced collaborative productivity by designing highly reusable UI elements like button and input as Atom unit
  • Defined style-related types and palette constants, and writed code to implement a consistent UI.

  Tech Stacks .

  ReactTypeScriptRedux ToolkitRTK QueryViteYarnEmotionGithub ActionsAWS Cloudfront/S3