Skip to content

Latest commit

 

History

History
134 lines (100 loc) · 6.92 KB

README.en.md

File metadata and controls

134 lines (100 loc) · 6.92 KB
Raw

SSUNG-DELIVERY-FRONT

⚽️ Our Goal

  • Prioritize access to a new technology stack over the completeness of the code.
  • Implement it by self rather than the library.
  • Solve the inconvenience related to development.

🛠️ Technology & Architecture

React18

Why

  • The goal of the FE team is to actively utilize the new technology stack.
  • React officially offers a variety of APIs compared to other stacks.
  • React has the largest community, so I expect it to be easy to troubleshoot.
  • Solve any regrets from past React projects.
  • Learn the features of React18
  • Reference

PNPM

Why

  • To protect my MacBook SSD life from npm, where node_modules capacity grows dramatically
  • As a drop-in-replacement of npm, familiar usage environment
  • Contains most of YARN and NPM features
    • PNPM don't support zero installation, which is a pity

🔑 Key Implementations

React

useModal

  • Previous problem
    • To manage each modal, additional state and logic are required for each parent component
  • Idea
    • Create a component that can manage all of the view, state, and logic in a single modal
  • Implementation
    • Implement a hook that manages the state of the modal and renders the modal based on the state
  • Result
    • The readability and maintainability of the code for managing modals has improved
// Component

const { Modal, onModalOpen } = useModal()

const openModal = () => { onModalOpen() }
...
<Modal>
    <Component />
</Modal>
...

useForm

  • Previous problem

    • Hassle of processing events andStatus for managing form in React.

  • Idea

    • Manage the type and status required for form in one place, and separate the status and view

  • Implementation

    • Returns the relevant values to an object so that the input can set the required elements at once.
    • Leverages hooks that allow you to manage status and logic independently Implementation
    • Hook implementation that returns status and event handlers when you pass the type and initial value of the form data you want to receive to the hook

  • Result

    • Improved readability and maintenance of form management code image

useFetch (in Progress)

  • Previous problem
    • Burden of using libraries like tanStackQuery in smaller apps. I wanted to use logic together, such as storing data in a browser, importing data from outside, etc.
  • Idea
    • Returning data from local storage at the same time as fetching data, updating the state as it arrives at a later time, while remaining immutable
    • Reuse (caching) existing data when other components request the same data using global state management as a single tone.

Korean survey classification lib

  • Previous problem
    • The characteristics of the Korean language that come with different surveys for each word, such as the problem in "iPhone is being shipped."
  • Idea
    • Return an appropriate investigation according to the presence or absence of an end, referring to the actual method of distinguishing investigations in Korean.
  • Implementation
    • Implementing a function that returns an appropriate investigation based on whether or not it is terminated
  • Result
    • "픽셀 폰를" => "픽셀 폰을"

📱 Result

User User Card Stack
User Success User Fail
Shipper Shipper Component
Sender Client
Sender 클라이언트

📌 Going Forward

Code Refactoring

  • Reduce external library dependencies (e.g. design system)
  • Divide components into more headless structures
  • Improve common library architecture

Utilizing Goals Not Yet Introduced

  • React18
    • Suspense, ErrorBoundary
    • Dynamic import, Lazy Load
    • Sentry
    • SSR
    • Utilize custom hooks
    • Introduce Storybook
  • Monorepo
  • Incorporate CI/CD
  • NPM Deployment