728x90 반응형 DEV/FE27 [FE] this 정리하기 this란?this는 자바스크립트에서 현재 실행 중인 컨텍스트의 객체를 참조하는 특별한 식별자입니다. this의 값은 함수가 호출되는 방식에 따라 동적으로 결정되는데, 일반 함수에서는 전역 객체를, 메서드로 호출될 때는 해당 메서드를 소유한 객체를, 화살표 함수에서는 상위 스코프의 this 값을 참조합니다. 또한 call(), apply(), bind() 메서드를 통해 this의 바인딩을 명시적으로 변경할 수 있어 유연한 객체 지향 프로그래밍을 가능하게 합니다.this 바인딩이란?this 바인딩은 this 키워드가 실제로 가리키는 대상을 결정하는 과정입니다. JavaScript에서 this는 코드가 작성된 시점이 아닌, 함수가 실행되는 시점에 바인딩이 결정됩니다. 즉, 동일한 함수라도 어떻게 호출되느냐에.. 2025. 2. 4. [FE] 자바스크립트 비동기 개념 정리 하기 들어가며스터디에서 동기, 비동기 개념을 다루는 김에 전에 작성해둔 글들과 여러 참고 자료들을 보면서 자바스크립에서의 비동기 개념에 대해서 정리해보는 시간을 가져 봤습니다. 조금 더 추가해야 되는 내용들이 많지만 작성해두고 개선을 해나가보려고 합니다. 자바스크립트에 동기, 비동기 개념이 있는 이유자바스크립트는 싱글 스레드 언어이기 때문에 한번에 하나의 작업만 수행 할 수 있다. 즉 이전 작업이 완료 되어야 다음 작업을 수행 할 수 있게 된다.우리가 프로그래밍을 하면서 일반적으로 위에서 아래로 차례대로 실행 되는 방식, 이러한 코드 순차 실행을 동기라고 부른다.동기 방식은 직관적이지만 다수의 작업이 이루어진다면, 특정 작업이 마무리 될 때 까지 다음 작업이 이루어 질 수 없기 때문에 성능과 사용자 경험에 영.. 2025. 1. 30. [FE] 쉽게 이해하는 Vitest 주요 기능 완성 가이드 들어가며네이버 부스트캠프에서 프론트엔드 테스트 코드 작성의 필요성을 느끼게 되었습니다. 그래서 이제는 리액트의 defacto가 된 Vite에서 사용하는 Vitest를 적용하기 위해 공부하면서 알게 된 내용들을 정리해보았습니다.왜 테스트 코드가 필요했나요?부스트캠프에서 프로젝트를 진행하면서 다음과 같은 상황들을 자주 마주쳤습니다:🐛 예상치 못한 버그 발생"잘 되던 기능이 갑자기 작동하지 않아요!""다른 팀원의 코드를 수정했더니 연관된 기능이 깨졌어요."🤝 팀 협업의 어려움코드 리뷰할 때 해당 기능이 제대로 동작하는지 일일이 확인하기 힘들었습니다.다른 팀원의 코드를 이해하고 수정하는 데 시간이 많이 걸렸습니다.🏃♂️ 빠른 개발 주기새로운 기능을 추가할 때마다 모든 기능을 수동으로 테스트하기에는 시간이.. 2024. 11. 17. [why] 📚 테스트 코드는 왜 작성해야 할까요? 특히 프론트엔드에서는요? 들어가며테스트 코드. 올해 제가 가장 많이 마주한 단어이자, 그 필요성을 뼈저리게 느낀 개발 문화입니다. 이 깨달음은 두 가지 의미 있는 경험을 통해 얻게 되었습니다.첫 번째는 상반기 인턴 근무 중의 경험입니다. 당시 저는 혼자 개발을 진행해야 하는 상황이었습니다. 동료 개발자의 코드 리뷰나 피드백을 받을 수 없는 환경에서, 제가 작성한 코드의 신뢰성을 검증할 방법이 절실했습니다. 이때 테스트 코드의 부재가 얼마나 큰 리스크가 될 수 있는지 깨닫게 되었습니다.두 번째는 현재 참여 중인 네이버 부스트캠프에서의 경험입니다. 5명으로 구성된 팀에서 유일한 프론트엔드 개발자로 프로젝트를 진행하게 되었습니다. 웹 풀스택 과정이기에 팀원들이 제 코드를 리뷰할 수는 있지만, 복잡한 상태 관리나 사용자 인터랙션과 같은.. 2024. 11. 16. [네이버 부스트캠프] 퍼널 적용하기 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. 이전 1 2 3 4 5 다음 728x90 반응형
