프로젝트

Project ARA, Project Dream-In

기획과 개발의 경계를 넘나드는 프론트엔드 개발자 박재현입니다.

React + TypeScript 기반 SNS형 학습 플랫폼을 팀장으로 기획·개발하며 실시간 채팅 구독 중복, Optimistic UI 타이밍 충돌, Supabase RLS 정책 오류 등을 직접 원인부터 파고들어 해결했습니다.

사용자 인터뷰로 문제를 먼저 정의하고, 그 문제를 해결하는 기능을 직접 설계하고 구현합니다.

작은 UX 개선이 서비스의 신뢰를 만든다고 믿습니다.

연락처 Email: dev.clarova@gmail.com

GitHub

🛠 Project

Untitled

🔓 Problem-Solving

개발 과정에서 마주친 기술적 문제들을 문제 정의 → 원인 분석 → 해결 → 회고 순서로 정리했습니다.

Untitled

🧰 Tech Stack

프로젝트 적용

<aside> <img src="attachment:c959c070-9384-4a61-a035-007e00f30a79:ts.png" alt="attachment:c959c070-9384-4a61-a035-007e00f30a79:ts.png" width="40px" />

                 TypeScript

</aside>

<aside> <img src="attachment:b8408c48-1b95-47da-8c73-306160bbf5f3:tailwind.png" alt="attachment:b8408c48-1b95-47da-8c73-306160bbf5f3:tailwind.png" width="40px" />

                Tailwind CSS

</aside>

<aside> <img src="attachment:b447b1c0-6c7d-42d9-ab47-9424a0f1c3ff:supabase.jpg" alt="attachment:b447b1c0-6c7d-42d9-ab47-9424a0f1c3ff:supabase.jpg" width="40px" />

                  Supabase

</aside>

<aside> <img src="attachment:90393357-57ef-4ea2-bce1-36a2d38398c9:image.png" alt="attachment:90393357-57ef-4ea2-bce1-36a2d38398c9:image.png" width="40px" />

                Emotion Styled

</aside>

<aside> <img src="attachment:ece01701-9634-472a-9657-160ba914cdde:image.png" alt="attachment:ece01701-9634-472a-9657-160ba914cdde:image.png" width="40px" />

                  Context API

</aside>

<aside> <img src="attachment:78264ce5-c881-4db9-8cea-49ef607c4fe4:image.png" alt="attachment:78264ce5-c881-4db9-8cea-49ef607c4fe4:image.png" width="40px" />

                         Vite

</aside>

<aside> <img src="attachment:a5d46c6b-67e1-476a-aca0-a7871c37a781:html.png" alt="attachment:a5d46c6b-67e1-476a-aca0-a7871c37a781:html.png" width="40px" />

                       HTML

</aside>

<aside> <img src="attachment:29e3179c-2530-44be-9cf5-53aeae302009:reacticon.png" alt="attachment:29e3179c-2530-44be-9cf5-53aeae302009:reacticon.png" width="40px" />

                       React

</aside>

<aside> <img src="attachment:38ea4389-4c9d-433b-882d-e0940f4d924d:googleanalytics.png" alt="attachment:38ea4389-4c9d-433b-882d-e0940f4d924d:googleanalytics.png" width="40px" />

            Google Analytics

</aside>

<aside> <img src="attachment:f31abf99-d81f-4d38-93d8-0851b4ea0ada:image.png" alt="attachment:f31abf99-d81f-4d38-93d8-0851b4ea0ada:image.png" width="40px" />

                   Zustand

</aside>

<aside> <img src="attachment:79621716-1f9b-4245-b1b0-d01dbded85bf:image.png" alt="attachment:79621716-1f9b-4245-b1b0-d01dbded85bf:image.png" width="40px" />

                 OpenAI API

</aside>

<aside> <img src="attachment:a829354b-bb82-4271-bd6f-516efa2ee75d:image.png" alt="attachment:a829354b-bb82-4271-bd6f-516efa2ee75d:image.png" width="40px" />

                    Recharts

</aside>

<aside> <img src="attachment:9395248b-87d3-4dc5-9ce8-0bcc88f015d5:js.jpeg" alt="attachment:9395248b-87d3-4dc5-9ce8-0bcc88f015d5:js.jpeg" width="40px" />

                   JavaScript

</aside>

<aside> <img src="attachment:fa0e4d40-56d9-42d4-a060-2e3a28211dcc:css.png" alt="attachment:fa0e4d40-56d9-42d4-a060-2e3a28211dcc:css.png" width="40px" />

                       CSS

</aside>

학습 중

<aside> <img src="attachment:8edf3ae5-2be5-4b89-a554-f8d43928d7e4:reactnative.png" alt="attachment:8edf3ae5-2be5-4b89-a554-f8d43928d7e4:reactnative.png" width="40px" />

                React Native

</aside>

<aside> <img src="attachment:f22173a7-bde7-45c8-974f-6794156ab3d9:next.png" alt="attachment:f22173a7-bde7-45c8-974f-6794156ab3d9:next.png" width="40px" />

                     Next.js

</aside>

협업 및 배포 도구

<aside> <img src="attachment:ca800061-3618-45f3-bae0-93588b47cf91:githubicon.jpeg" alt="attachment:ca800061-3618-45f3-bae0-93588b47cf91:githubicon.jpeg" width="40px" />

                     GitHub

</aside>

<aside> <img src="attachment:4692fe79-2401-46b2-9110-6bd9490a38e7:slack.png" alt="attachment:4692fe79-2401-46b2-9110-6bd9490a38e7:slack.png" width="40px" />

                      Slack

</aside>

<aside> <img src="attachment:92cf8866-eabf-4115-a724-954c7f8e88a5:Notionicon.png" alt="attachment:92cf8866-eabf-4115-a724-954c7f8e88a5:Notionicon.png" width="40px" />

                     Notion

</aside>

<aside> <img src="attachment:0cd60b46-5054-4f8e-88e7-4dd642da0f25:vercel.png" alt="attachment:0cd60b46-5054-4f8e-88e7-4dd642da0f25:vercel.png" width="40px" />

                      Vercel

</aside>

<aside> <img src="attachment:079e6d0d-8247-4ed4-b39c-abc7d13c0997:figmaicon.png" alt="attachment:079e6d0d-8247-4ed4-b39c-abc7d13c0997:figmaicon.png" width="40px" />

                     Figma

</aside>