API 호출을 최적화 해보자 !

스켈레톤과 함께라면 로딩이 두렵지 않아 !

IntersectionObserver를 통해 효율적으로 데이터 불러오기

Octokit으로 Git Rest API를 호출해 부려먹어보자

이전 팀 프로젝트에서 구현했던 MBTI 페이지에서 작은 문제가 발생했다. 바로

최근 진행했던 팀 프로젝트에서 필수 기능 구현을 마치고, 백엔드의 도움 없이 프론트엔드에서 구현할 수 있는 요소가 뭐가 있을까 고민하다가 간단하 MBTI 테스트를 구현해보았다. Recoil을 사용하여 더 간단하게 구현할 수 있었는데, 그 과정에 대해 알아보도록 하자.우

최근 진행한 팀 프로젝트에서 프론트엔드 개발을 담당했다. 우리 팀은 요즘 현업에서 많이 사용되는 React의 프레임워크인 'NextJS'를 사용해보기로 했다. 내가 구현한 기능 중 Kakao API를 이용한 소셜 공유 기능과 Kakao Map을 띄우는 기능을 NextJ

쇼핑몰 프로젝트에서 담당했던 Admin 관련 기능 중 사용자가 주문을 하거나 회원을 탈퇴하게 될 경우 해당 사용자의 이메일로 관련 메일을 전송하는 기능을 구현했다. 이는 NodeJS 환경에서 이용할 수 있는 'NodeMailer'라는 라이브러리를 통해 쉽게 구현할 수

첫번째 프로젝트를 진행했을 당시, 백엔드를 담당하였고 그 중 User와 Admin 관련 기능을 구현하게 되었다. User 기능 중 가장 기본이 되는 로그인과 로그아웃 방식을 JWT 토큰을 활용한 방식으로 구현하였는데, 그 방법에 대해 알아보도록 하자.🤔 JWT 토큰이

(아, 이 녀석 이름부터 어렵다..!)React에서 컴포넌트의 인스턴스 값에 사용자 지정 메소드를 추가하거나 특정 값을 가져오기 위해 useImperativeHandle과 forwardRef를 사용할 수 있다. 이들은 서로 연관되어 작동하며, 주로 컴포넌트의 내부 값을

이번 시간에는 React에서 흔히 사용하는 Context API와 useContext hook에 대해 알아보겠다. Context API는 React에서 전역 상태 관리를 위해 사용하는 방법 중 하나이다. 또한, useContext라는 hook을 사용하여 더 간편하게 전

이번 포스팅에서는 useState를 이은 React의 상태관리 hook 중 하나인 'useReducer'에 대해 알아보자.🤔 useReducer, 넌 또 뭐냐?useReducer는 React에서 제공하는 훅 중 하나로, 상태 업데이트 로직을 컴포넌트 외부로 분리할 수

React에서 컴포넌트가 렌더링 된 후 특정 작업을 수행할 수 있도록 도와주는 hook이 있는데, 그것이 바로 'useEffect'이다. useEffect를 사용하여 'side effect'를 관리할 수 있다.🤔 Side Effect는 또 뭐야?React 컴포넌트는

React Portal은 컴포넌트를 일반적인 컴포넌트 트리 외부에 렌더링하게 해주는 기능이다. 다시 말해서, 컴포넌트를 부모 컴포넌트의 외부, 심지어는 DOM 트리 완전히 다른 부분에 삽입할 수 있도록 해준다.🤔 그럼 언제 Portal을 사용하면 좋을까?포탈 기능은

🤔 React에서 CSS를 어떻게 적용할 수 있을까?React에서 CSS를 이용해 컴포넌트를 스타일링하는 방법은 여러가지가 있다. 그 중 가장 일반적인 3가지 방법, 즉 인라인 스타일링, Styled Components, 그리고 CSS Modules에 대해 설명하고,

🤔 React에서는 리스트를 어떤식으로 렌더링 할까?React에서 배열의 데이터를 이용하여 여러 요소를 렌더링하는 방법은 매우 자주 사용되는 패턴이다. React를 사용한 웹 개발에 있어서 리스트 렌더링과 조건부 렌더링은 핵심 기능 중 하나이며, 이를 위해 React

React는 상태를 관리하기 위해 useState라는 Hook을 제공한다. useState는 가변적인 상태를 가질 수 있는 값과 그 값을 업데이트하는 함수를 제공한다. 여기서! React는 state(상태)가 변경되면 컴포넌트를 다시 렌더링 한다.🤔 useState는

React는 Component 기반으로 앱을 구성한다. 이런 컴포넌트 시스템 덕분에 우리는 기능 별로, 또는 보기 편한 대로 코드를 나눠 작성할 수 있다.🤔 그럼 컴포넌트를 어떻게 분할할까?간단히 말해서, 하나의 컴포넌트는 하나의 기능만 수행해야 한다. 예를 들어,

🤔 Component(컴포넌트)란? 컴포넌트는 재사용 가능한 독립적인 코드 덩어리를 의미한다. React에서는 UI를 여러 개의 컴포넌트로 분리하고, 이렇게 분리한 각 컴포넌트를 조립하여 전체 어플리케이션을 구축한다. 각 컴포넌트는 독립적으로 동작하며, 주어진 pro

🤔 Box-model(박스 모델)이란? 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델 이라고 한다. 박스 모델은 HTML 구성 요소를 패딩(padding), 테두리(border), 마진(margin), 컨텐츠(content)로 구분한다.요소