본문 바로가기
728x90
반응형

DEV/FE23

[네이버 부스트캠프] 퍼널 적용하기 BooQuiz 프로젝트의 React Custom Hook을 활용한 퍼널 구현하기목차문제 상황구현 목표설계 및 구현상세 구현사용 예시최적화 및 개선결론문제 상황실시간 퀴즈 플랫폼인 BooQuiz를 개발하면서 가장 큰 도전 과제는 퀴즈 진행 과정의 복잡한 상태 관리였습니다. 퀴즈 참여자들이 대기실에서 시작하여 문제 풀이, 결과 확인까지 이어지는 일련의 과정(퍼널)을 자연스럽게 경험할 수 있도록 만드는 것이 중요했습니다. 특히 다음과 같은 문제들이 있었습니다:퀴즈 진행 단계별로 복잡한 상태 전이가 필요했습니다.실시간 타이머와 답안 제출이 동기화되어야 했습니다.여러 컴포넌트에서 퀴즈 상태를 일관되게 관리해야 했습니다.네트워크 지연이나 오류 상황에 대한 견고한 처리가 필요했습니다.구현 목표이러한 문제들을 해결하기.. 2024. 11. 12.
[why] JavaScript는 왜 undefined를 사용할까? 개요JavaScript 개발을 하다 보면 자주 마주치는 값이 있습니다. 바로 undefined입니다. 변수를 선언만 하고 값을 할당하지 않았을 때, 함수가 반환값 없이 실행을 마쳤을 때, 객체의 존재하지 않는 속성에 접근할 때 등 다양한 상황에서 만나게 되죠. 하지만 왜 JavaScript는 이런 상황에서 undefined라는 특별한 값을 사용하기로 했을까요?역사적 배경JavaScript가 처음 만들어진 1995년, Brendan Eich는 10일 만에 이 언어의 첫 버전을 완성해야 했습니다. 이미 잘 알려져 있겠지만 1995년 5월, 그는 '자바와 비슷해야 하며, 넷스케이프 브라우저 내의 거의 모든 것을 제어할 수 있어야 한다'는 명령하에 열흘 만에 Javascript를 만들었다고 합니다.흥미로운 점은.. 2024. 10. 26.
[why] 프론트엔드 개발자로써 알아야 되는 부분들 개요현대 웹 개발에서는 수많은 기술과 도구들이 끊임없이 진화하고 있습니다. 이러한 환경에서 개발자들은 단순히 사용법을 익히는 것을 넘어, 각 기술의 존재 이유와 작동 원리를 깊이 이해할 필요가 있습니다. 이 시리즈는 프론트엔드 개발의 핵심 영역들에 대해서 학습하고 정리해보려고 합니다.시리즈의 목적프론트엔드 기술의 근본적인 원리와 배경 이해기술 선택과 의사결정에 대한 깊이 있는 통찰 제공발전하는 웹 생태계에 대한 포괄적인 이해 도모실무에서 마주치는 문제들에 대한 해결 능력 향상주제 목록1. 자바스크립트의 핵심 개념undefined는 어떤 목적으로 탄생했을까?자바스크립트가 스크립트 언어로 설계된 이유는?객체 기반 언어로서의 자바스크립트의 특징은?싱글 스레드 동작 방식의 장단점은?호이스팅은 어떤 원리로 동작하.. 2024. 10. 26.
[FE] React Context API와 LocalStorage로 간단 상태관리 모듈 만들기 1. 개요지금까지 리액트로 여러 프로젝트를 했던 경험을 돌아봤을 때, Context API만으로도 충분히 해결할 수 있는 상황에서도 종종 Zustand나 Redux를 사용해야겠다는 생각에 치우쳤던 적이 많았습니다. 이러한 접근은 종종 '배보다 배꼽이 더 커지는' 상황을 초래했습니다. 즉, 핵심 기능 구현보다 상태 관리 라이브러리 사용법 익히는 데 더 많은 시간을 투자하게 되는 경우가 발생했습니다.이러한 경험을 바탕으로, 부스트캠프 후반기 미션에서는 React가 제공하는 기본 도구를 최대한 활용하고자 했습니다. 특히 Context API를 이용한 전역 상태 관리와 함께, LocalStorage를 활용하여 데이터 지속성까지 확보하고자 했습니다. 이 아이디어는 이전에 다른 개발자분이 localStorage를 .. 2024. 10. 9.
[FE] 아토믹 디자인 패턴에서 탈출: 컴포넌트 디자인 패턴, 방법론 찾아보기 개요프론트엔드 개발자를 희망하는 사람으로서 다양한 프로젝트를 진행하면서, 저는 몇 가지 디자인 패턴과 방법론을 경험해 왔습니다. 특히 React를 사용한 프로젝트에서는 아토믹 디자인 패턴이 큰 유행을 끌었고, 저 역시 이를 적용해 보았습니다. 그 과정에서 유행을 따라가다 보니 오히려 다른 디자인 패턴과 방법론을 많이 못 사용해본 문제도 생겼던 것 같습니다.하지만 시간이 지나면서 아토믹 디자인 패턴이 모든 상황에 적합한 것은 아니라는 점을 깨달았습니다. 작은 규모의 프로젝트에서는 오히려 과도한 구조화로 인해 복잡성만 증가하는 경우가 있었습니다. 또한, 프로젝트의 특성에 따라 다른 패턴이나 방법론이 더 효과적일 수 있다는 것을 알게 되었습니다.이러한 경험을 바탕으로, 이번에 새로운 React 프로젝트를 시작.. 2024. 10. 7.
[네이버 부스트캠프] 프론트엔드 프레임워크 비교하기(feat. typescript) 들어가며최근 네부캠에서 후반부 학습 스프린트를 진행하면서 프레임워크를 직접 구축해보는 경험을 하고 있습니다. 이 과정에서 각 프레임워크의 등장 배경, 그들이 해결하고자 했던 핵심 문제들, 그리고 그 해결 방식을 이해하는 것이 매우 중요하다는 것을 깨달았습니다.그룹 활동 중에 리액트가 주로 논의되었지만, 다양한 프레임워크를 폭넓게 이해하는 것이 장기적으로 더 큰 도움이 될 것이라 생각합니다. 따라서 이번 기회에 주요 프론트엔드 프레임워크들의 역사와 특징을 정리해보고자 합니다.참고해주셨으면 하는 부분은 jQuery와 React가 엄밀히 말해 프레임워크는 아니라는 것입니다. jQuery는 라이브러리이고, React는 라이브러리 혹은 UI 개발을 위한 JavaScript 도구로 분류됩니다. 그러나 이들을 이 글.. 2024. 9. 24.
728x90
반응형