728x90 반응형 DEV/FE23 Tanstack Table 쓰기 전에 공식문서 읽어보기(번역과 함께) 들어가며최근 취업을 준비하면서, 친구들과 함께 면접 질문을 아카이빙하고 관리할 수 있는 토이 프로젝트를 진행하고 있습니다.면접 준비 과정에서 자주 등장하는 질문들을 정리하고, 카테고리별로 분류하거나 검색할 수 있는 기능이 있으면 좋겠다는 아이디어에서 출발한 프로젝트입니다. 이 과정에서 질문 데이터를 테이블 형태로 보여줄 필요가 있었고, 어떤 테이블 라이브러리를 사용할지 고민하던 중 TanStack Table을 선택하게 되었습니다.기존에도 프로젝트에서 Shadcn UI를 사용하고 있었기 때문에, 같은 Headless UI 접근 방식을 유지하는 것이 좋겠다는 결론을 팀원들과 함께 내린 점도 선택에 큰 영향을 주었습니다.또, 향후 데이터 패칭이나 무한 스크롤 기능을 직접 구현해보고, 이후에 TanStack Q.. 2025. 4. 4. [FE] 브라우저와 렌더링 들어가며웹 개발을 하면서 가장 많이 알아야 되지만 항상 미묘하게 알고 있었던 게 브라우저에 대한 내용인 것 같습니다. 스터디 준비하면서 한번 정리를 해둬야 겠다 싶어서 전체적인 내용을 짚어가면서 정리를 해보려고 합니다.1. 브라우저란?1.1. 브라우저의 탄생과 발전웹의 시작과 초창기 브라우저웹은 1990년 팀 버너스 리(Tim Berners-Lee) 박사에 의해 개발된 월드 와이드 웹(WWW)에서 시작되었습니다. 초창기 웹페이지는 단순한 정적 HTML 문서로 구성되었으며, 1993년 최초의 그래픽 기반 웹 브라우저인 모자이크(Mosaic)가 등장하면서 대중들이 웹을 쉽게 접할 수 있는 계기가 되었습니다. 이후 1994년 넷스케이프 내비게이터(Netscape Navigator)가 출시되면서 브라우저 기술이.. 2025. 2. 7. [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. 이전 1 2 3 4 다음 728x90 반응형
