728x90 오블완8 [네이버 부스트캠프] 우리는 Vite, StoryBook, Tsdoc을 왜 사용할까? 들어가며부스트캠프 그룹 프로젝트를 시작한 지 2주차가 지나가고 있습니다. 이번 기수는 특별히 주제를 기준으로 랜덤으로 팀이 구성되었습니다. 네이버 부스트캠프에서 추구하는 방향성이 웹 풀스택 개발자 양성이지만, 각자의 선호도와 희망 진로는 다를 수 있다는 점을 고려하며 프로젝트를 진행하고 있습니다. 이러한 상황에서 저는 팀의 유일한 프론트엔드 지망생으로 참여하게 되었습니다.프로젝트를 준비하고 진행하면서 '어떤 방향으로 나아가야 더 큰 성장을 이룰 수 있을까'라는 고민을 계속했습니다. 단순한 기술적 도전을 넘어서, 다양한 측면에서의 성장을 고려하다 보니 기술 스택과 도구 선정에 특별히 많은 시간을 투자했습니다.이번 프로젝트의 기술 스택과 개발 방향을 결정하는 데 있어 두 가지 상황을 중점적으로 고려했습니다... 2024. 11. 18. [FE] 쉽게 이해하는 Vitest 주요 기능 완성 가이드 들어가며네이버 부스트캠프에서 프론트엔드 테스트 코드 작성의 필요성을 느끼게 되었습니다. 그래서 이제는 리액트의 defacto가 된 Vite에서 사용하는 Vitest를 적용하기 위해 공부하면서 알게 된 내용들을 정리해보았습니다.왜 테스트 코드가 필요했나요?부스트캠프에서 프로젝트를 진행하면서 다음과 같은 상황들을 자주 마주쳤습니다:🐛 예상치 못한 버그 발생"잘 되던 기능이 갑자기 작동하지 않아요!""다른 팀원의 코드를 수정했더니 연관된 기능이 깨졌어요."🤝 팀 협업의 어려움코드 리뷰할 때 해당 기능이 제대로 동작하는지 일일이 확인하기 힘들었습니다.다른 팀원의 코드를 이해하고 수정하는 데 시간이 많이 걸렸습니다.🏃♂️ 빠른 개발 주기새로운 기능을 추가할 때마다 모든 기능을 수동으로 테스트하기에는 시간이.. 2024. 11. 17. [why] 📚 테스트 코드는 왜 작성해야 할까요? 특히 프론트엔드에서는요? 들어가며테스트 코드. 올해 제가 가장 많이 마주한 단어이자, 그 필요성을 뼈저리게 느낀 개발 문화입니다. 이 깨달음은 두 가지 의미 있는 경험을 통해 얻게 되었습니다.첫 번째는 상반기 인턴 근무 중의 경험입니다. 당시 저는 혼자 개발을 진행해야 하는 상황이었습니다. 동료 개발자의 코드 리뷰나 피드백을 받을 수 없는 환경에서, 제가 작성한 코드의 신뢰성을 검증할 방법이 절실했습니다. 이때 테스트 코드의 부재가 얼마나 큰 리스크가 될 수 있는지 깨닫게 되었습니다.두 번째는 현재 참여 중인 네이버 부스트캠프에서의 경험입니다. 5명으로 구성된 팀에서 유일한 프론트엔드 개발자로 프로젝트를 진행하게 되었습니다. 웹 풀스택 과정이기에 팀원들이 제 코드를 리뷰할 수는 있지만, 복잡한 상태 관리나 사용자 인터랙션과 같은.. 2024. 11. 16. [네이버 부스트캠프] 퍼널 패턴으로 실시간 퀴즈 애플리케이션 상태 관리하기 들어가며실시간 퀴즈 애플리케이션을 개발하면서 가장 큰 도전 과제는 복잡한 퀴즈 진행 과정의 상태 관리였습니다. '대기실', '퀴즈 진행', '결과'와 같은 주요 단계들이 있고, 각 단계마다 세부적인 상태와 데이터가 존재하는 구조를 어떻게 효율적으로 관리할 수 있을지 많은 고민이 있었습니다.이런 복잡한 상태 관리 문제를 해결하기 위해 토스의 SLASH 23 컨퍼런스에서 소개된 퍼널 패턴을 적용해보기로 결정했습니다.퍼널 패턴이란?퍼널(Funnel)은 '깔때기'라는 뜻으로, 사용자가 특정 목표를 달성하기까지의 단계를 위에서 아래로 시각화했을 때 깔때기 모양이 되는 것에서 유래했습니다. 주로 마케팅에서 사용되던 이 개념을 개발에 적용한 것이 퍼널 패턴입니다.퍼널 패턴의 특징단방향성: 사용자는 정해진 순서대로 단.. 2024. 11. 15. [네이버 부스트캠프] OAuth 2.0 정리하기: 현대 웹 인증의 표준 들어가며"이 앱에서 GitHub 로그인하기 버튼을 클릭했더니, 내 모든 코드와 개인정보가 유출되면 어쩌지?" 많은 개발자와 사용자들이 이런 걱정을 한 번쯤은 해보셨을 것입니다. 하지만 OAuth 2.0을 제대로 이해하고 나면, 이런 걱정은 기우였다는 것을 알 수 있습니다.OAuth 2.0이란?OAuth 2.0은 사용자의 패스워드를 공유하지 않고도 특정 리소스에 대한 접근 권한을 부여할 수 있는 인증 프로토콜입니다. 쉽게 말해, 여러분의 GitHub 비밀번호를 모르더라도, 여러분이 허용한 범위 내에서만 다른 애플리케이션이 여러분의 GitHub 정보에 접근할 수 있도록 하는 방식입니다.OAuth 2.0의 핵심 요소1. 주요 참여자리소스 소유자: 보호된 리소스를 소유한 사용자 (예: GitHub 계정 소유자).. 2024. 11. 13. [네이버 부스트캠프] 퍼널 적용하기 BooQuiz 프로젝트의 React Custom Hook을 활용한 퍼널 구현하기목차문제 상황구현 목표설계 및 구현상세 구현사용 예시최적화 및 개선결론문제 상황실시간 퀴즈 플랫폼인 BooQuiz를 개발하면서 가장 큰 도전 과제는 퀴즈 진행 과정의 복잡한 상태 관리였습니다. 퀴즈 참여자들이 대기실에서 시작하여 문제 풀이, 결과 확인까지 이어지는 일련의 과정(퍼널)을 자연스럽게 경험할 수 있도록 만드는 것이 중요했습니다. 특히 다음과 같은 문제들이 있었습니다:퀴즈 진행 단계별로 복잡한 상태 전이가 필요했습니다.실시간 타이머와 답안 제출이 동기화되어야 했습니다.여러 컴포넌트에서 퀴즈 상태를 일관되게 관리해야 했습니다.네트워크 지연이나 오류 상황에 대한 견고한 처리가 필요했습니다.구현 목표이러한 문제들을 해결하기.. 2024. 11. 12. 이전 1 2 다음 728x90
