최신글
-
[네이버 부스트캠프] 우리는 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
-
[네이버 부스트캠프] 토스의 퍼널 패턴 적용해보기
퀴즈 플랫폼에 퍼널 패턴 적용하기: 토스의 UX 디자인 패턴 차용들어가며부트캠프에서 실시간 퀴즈 플랫폼을 개발하면서 마주친 가장 큰 도전과제는 "어떻게 하면 사용자들이 끊김 없이 퀴즈에 참여할 수 있을까?"였습니다. 이 문제를 해결하기 위해 우리는 토스(Toss)의 퍼널 패턴을 도입했고, 놀라운 결과를 얻을 수 있었습니다.퍼널 패턴이란?퍼널(Funnel)은 '깔때기'라는 뜻으로, 사용자가 특정 목표를 달성하기까지의 단계를 위에서 아래로 시각화했을 때 깔때기 모양이 되는 것에서 유래했습니다. 예를 들어 일반적인 이커머스의 구매 과정은 다음과 같은 단계로 이루어집니다:쇼핑몰 방문상품 검색상품 선택장바구니에 담기결제 정보 입력최종 결제실제 토스의 컨퍼런스 영상에서의 토스의 송금 프로세스를 보면 이러한 퍼널 패..
2024.11.11
-
[네이버 부스트캠프] 그룹프로젝트 1,2주차 회고
유일한 프론트엔드 개발자로서의 첫 그룹 프로젝트 회고부스트캠프 그룹 프로젝트가 시작된 지 2주가 지났습니다. 4명의 백엔드 개발자와 함께하는 팀에서 유일한 프론트엔드 개발자로 참여하게 되면서, 많은 고민과 도전 과제들을 마주하게 되었습니다. 이번 회고에서는 프로젝트 초기 단계에서 제가 겪은 경험과 그 과정에서의 배움을 공유하고자 합니다.프론트엔드 개발자 1명, 그리고 협업에 대한 고민가장 큰 고민은 '혼자서 프론트엔드 개발을 진행할 것인가, 아니면 백엔드 개발자분들과 함께 할 것인가'였습니다. 팀원분들의 의견을 구했을 때, 두 분이 프론트엔드와 백엔드를 함께 해보고 싶다는 의견을 주셨습니다. 이를 계기로 페어 프로그래밍을 시도해보기로 했습니다.하지만 실제 진행 과정에서 몇 가지 어려움이 있었습니다. 실질..
2024.11.10
-
[서평] 비전공자를 위한 AWS
『비전공자를 위한 AWS』 서평: 클라우드의 세계로 가는 친절한 첫걸음Before: 진입장벽이 높은 클라우드 컴퓨팅의 세계클라우드 컴퓨팅은 현대 IT 인프라의 핵심이 되었지만, 많은 비전공자들에게는 여전히 높은 진입장벽으로 느껴집니다. "EC2", "S3", "Lambda"와 같은 용어들은 마치 외계어처럼 들리고, AWS 콘솔의 수많은 메뉴들은 미로처럼 복잡해 보입니다. 특히 프론트엔드 개발자로서, 주로 사용자 인터페이스와 클라이언트 측 로직에 집중하다 보니 클라우드 인프라는 더욱 멀게만 느껴졌습니다.After: 클라우드를 이해하고 활용하는 개발자의 모습히로코 니시무라의 『비전공자를 위한 AWS』는 이러한 어려움을 해소하는 탁월한 입문서입니다. 프론트엔드 개발에 주력하면서도 AWS의 세계를 탐험하고 싶었..
2024.11.05
