본문 바로가기

분류 전체보기76

여기서 잠깐!! Boilerplate 코드란? 지난번 게시글에서 소개했던 "카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그"에서 Boilerplate 코드라는 용어가 자주 등장했는데요, 오늘은 이 개념에 대해 조금 더 깊이 알아보려고 합니다. Boilerplate 코드란 무엇인지, 그리고 왜 개발에서 중요한지 React와 Redux의 사례를 통해 쉽게 풀어 설명드릴게요.함께 알아보며 이해를 넓혀가 봅시다! 😊Boilerplate 코드란?Boilerplate 코드는 개발을 시작할 때 기본적으로 작성해야 하는 반복적이고 기본적인 코드를 의미합니다.쉽게 말해, 특정 작업을 수행하기 위해 늘 비슷한 방식으로 작성해야 하는 템플릿 같은 코드예요. 예를 들어, 책을 쓸 때 제목, 목차, 페이지 번호 같은 기본적인.. 2025. 1. 2.
[후기] 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 * 이 게시물은 카카오페이 기술 블로그의 '카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그'를 읽고, 관련 내용을 바탕으로 정리한 지식과 저의 생각을 담은 글입니다. React Query: 효율적인 비동기 데이터 관리 방법카카오페이 프론트엔드 개발자들이 작성한 기술 블로그 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그 를 바탕으로, React Query라는 라이브러리가 왜 주목받고 있는지에 대해 정리했습니다.Redux로 데이터 관리, 왜 어려웠을까?React Query를 사용하기 전에, 카카오페이에서는 Redux를 통해 비동기 데이터를 관리했다고 합니다. Redux는 React 생태계에서 많이 쓰이는 전역 상태.. 2025. 1. 2.
children prop이 왜 필요한지와 어떻게 쓰이는지 🎯 1. 버튼(Button) 컴포넌트로 이해하기(1) children 없이 고정된 버튼props를 이용해 버튼 텍스트를 전달한다고 가정해보세요:function Button({ label }) { return {label};}// 사용문제점: 버튼 안에 아이콘, 이미지, 다른 복잡한 내용을 넣고 싶을 때 어려워집니다. (2) children을 사용한 버튼children을 사용하면 버튼 안에 무엇이든 넣을 수 있습니다:function Button({ children }) { return {children};}// 사용Click Me Submit이렇게 하면 버튼 안에 텍스트, 이미지, 아이콘 등 원하는 모든 콘텐츠를 동적으로 삽입할 수 있습니다.🎯 2. 상자(Box) 컴포넌트로 이해하기(1) chi.. 2024. 11. 14.
NPM이란 무엇인가요? 💡 NPM이란 무엇인가요?NPM은 Node Package Manager의 약자로, 자바스크립트 개발에서 필요한 도구와 라이브러리를 설치하고 관리하는 도구입니다.쉽게 말해, "코드가 더 편하게 작동하도록 도와주는 앱 스토어 같은 것"입니다.🌟 NPM이 왜 필요한가요?만약 우리가 개발을 하면서 매번 모든 기능을 처음부터 끝까지 직접 코딩한다면 너무 시간이 오래 걸립니다.그래서 이미 다른 개발자들이 만들어 놓은 코드를 다운로드해서 사용하는데, 이때 NPM이 그 코드를 편리하게 관리해 줍니다.📂 NPM의 구성 요소 (쉽게 이해하기)구성 요소 설명패키지패키지는 특정 기능을 미리 만들어 둔 자바스크립트 코드라고 생각하면 됩니다.예를 들어, React는 웹사이트 화면을 만들 때 사용하는 도구이고,Lodash는 .. 2024. 11. 13.