Dongwoo Kwon (권동우)
Open to Work
Frontend Developer
+82 10-8786-9260
|hyeonggyugwon3@gmail.com
Basic Information
Date of Birth
04/24/2008 (Male, Korean)
Residence
Gyeongju, Gyeongsangbuk-do, South Korea
Education & Military Service
Education
Daegu Software Meister High School (Mar. 2024 - Feb. 2027, Expected Graduation)
Military Service
unfulfilled
A Developer Who Embraces Failure
I continuously challenge myself to become a better developer, learning and growing from failures.
Like Nietzsche's quote, “What does not kill me makes me stronger”, I use failure as a stepping stone to become a better developer.
Tech Stack
Languages
JavaPythonFrontend
ZustandStorybookBackend
Deployment
Tools
Featured Project
Sync SaaS
Mar 2025 - Oct 2025Team
7 members total
|
Frontend: 4 (including myself)
|
Backend: 3
My Role: Frontend Developer & UI/UX Designer
Summary
An AI-based project management desktop application designed to resolve communication gaps and collaboration inefficiencies caused by technical disparities between non-developers, such as designers and planners, and developers. The core objective is to leverage AI to bridge knowledge gaps and provide a real-time collaborative environment for team members.
Key Challenges
In real-world projects, collaboration between developers and non-developers such as designers, PMs, and planners is essential, yet a clear technical gap exists between these roles. Non-developers often have a strong understanding of service direction and market trends but face difficulties communicating their requirements due to a lack of technical knowledge. Developers are capable of resolving technical issues but may overlook user context or business needs. These disconnects in collaboration can lead to distorted project direction, wasted time, and increased team fatigue.
Solution
- Non-developers can enhance their technical understanding with AI assistance and express their intentions more accurately. - Developers can clearly understand non-developer requirements and provide immediate feedback and implementation through a real-time collaborative editor. - Communication costs between developers and non-developers are minimized.
Major Functions
- Workspace and project-based team collaboration (creation, participation, invitations, workspace and project member management) - Issue tracking system (status management, assignee assignment, comments) - Kanban board (drag-and-drop task management) - Docs (functional specifications and automatic ERD generation based on specifications) - Dashboard and analytics (charts and progress visualization) - AI features (term definition lookup, context-aware project chatbot)
Tech Stacks
React
Chosen to efficiently build interfaces with frequent state changes. Enables component-based UI composition and effective state management.
TypeScript
Adopted to ensure type safety required for collaboration and maintainability. Complements JavaScript's dynamic typing and improves code quality while preventing potential bugs.
Electron
Utilized to develop desktop applications using familiar web technologies. Provides multi-platform support to deliver consistent UX across macOS and Windows environments. Maintains a browser-like development workflow while ensuring development speed and productivity.
Styled-components
Used to manage styles consistently at the component level. The CSS-in-JS approach allows styles and logic to coexist within the same file, improving maintainability.
Activities
Design System Development (sync-design-system)
Inconsistencies in UI and components made maintenance and reuse difficult. To address this, 15 reusable common components were extracted. These components were distributed internally as an npm package (@sync-design-system). Components were documented using Storybook, along with usage guidelines. As a result, development efficiency was improved and UI consistency was ensured through a structured component architecture.
Reduced Issue Page Load Time Using React Query Caching
Each navigation between the issue list and detail pages triggered repeated API calls, resulting in an average loading time of 2 seconds and increased server load. To resolve this, React Query was introduced to enable automatic caching of issue data. Considering that issue lists change relatively frequently, the staleTime was set to 2 minutes so that fresh data could be displayed immediately without refetching. This caching strategy successfully improved both performance and user experience.
Improved Task Completion Responsiveness with Optimistic Updates
Checking task completion caused a 0.5-1 second delay while waiting for server responses, leading to degraded user experience. React Query's optimistic update feature was applied to reflect UI changes immediately upon user interaction. As a result, perceived response time was reduced from an average of 800ms to near 0ms. Automatic rollback and error toast notifications were implemented to maintain stability in case of network failures.
Removal of Unnecessary Skeleton UI
A skeleton UI was applied to workspace cards, but a brief flash occurred as it appeared and disappeared during loading. Chrome DevTools analysis revealed an average API response time of only 180ms. As a result, the skeleton UI acted as visual noise rather than a meaningful loading indicator. The skeleton UI was removed, and content is now rendered immediately upon data arrival, providing a clean and flicker-free loading experience.
Beta Test Landing Page Development (sync-introduce)
A beta test application landing page was built using GitHub Pages with a custom domain. Installation files for Windows and macOS were distributed via GitHub Releases. This enabled the establishment and execution of an efficient beta distribution strategy for product validation.
Improved Organic Search Traffic Through SEO Optimization
SEO optimization was conducted on the landing page (Sync-introduce) to improve search visibility and organic traffic for Sync Desktop. Search engine crawling efficiency was enhanced through sitemap.xml, robots.txt configuration, and meta tag optimization. A custom domain was applied, achieving a Lighthouse SEO score of 100. Technical SEO implementation secured sustainable organic user acquisition channels. Through this process, a solid understanding of search engine crawling mechanisms and technical implementation was developed.
Trouble Shootings
Optimization of Excessive Re-rendering in SSE Streaming Responses
While implementing an SSE-based feature that provides real-time AI explanations when users drag text, severe UI stuttering and frame drops occurred during streaming responses.
setState was called on every incoming chunk, resulting in N re-renders for N chunks. Each render triggered Virtual DOM creation and diffing, leading to overall performance degradation.
Both throttling and debouncing approaches were considered to address the issue. Throttling - Provides smooth and consistent typing animations by rendering at fixed intervals. - However, unnecessary renders occurred even when no new chunks arrived. Debouncing - Delays rendering while chunks are continuously received. - Executes a single render only after no new chunks arrive for a specified duration. Although throttling produced smoother animations, it caused redundant renders and residual performance issues. Debouncing slightly reduced animation naturalness but significantly decreased render frequency, effectively resolving UI stuttering. Based on this analysis, debouncing was selected as the final approach.
Applied a debouncing and useRef-based buffering pattern. useRef was used as an intermediate buffer to accumulate data without triggering re-renders. A 50ms debounce was applied to prevent excessive rendering from continuous chunk arrivals. Previous timers were canceled to ensure setState was called only once based on the final chunk. As a result, chunks accumulated in real time while the UI updated only when no new chunks arrived within 50ms.
Significantly reduced setState invocation frequency, resolving UI stuttering issues. Gained hands-on experience applying rendering optimization techniques such as throttling and debouncing. Developed a deeper understanding of React's rendering mechanism.
Personal Reflections
Through seven months of team-based development, I learned that teamwork does not form naturally without effort. Differences in experience led to conflicts and misunderstandings regarding intent. However, open communication helped resolve even minor misunderstandings, reinforcing that mutual understanding is more important than problem-solving alone. This project emphasized not only building features, but also the value of growing together as a team.
Other Activities
Booth Operation at FIX 2025 Korea ICT Convergence Expo
Oct 22 - Oct 25, 2025
3rd Place, 2025 IT CE Project Competition
2025.10.24
References
Sync-Desktop Source Code
https://github.com/AICT-SYNC/sync-desktopSync Design System Source Code
https://github.com/AICT-SYNC/sync-design-systemSync Design System NPM
https://npmjs.com/package/sync-design-systemSync Introduce Source Code
https://github.com/AICT-SYNC/sync-introducesync-saas Website (Service Discontinued)
https://sync-saas.comQualifications & Assessments
Last Updated: 01/06/2026
Created by Dongwoo Kwon (권동우)