Juun의 개발 기록

개요getStaticProps를 이용하려는 생각은 회사에서 서비스 중인 그룹웨어 메인 페이지를 부분을 개발하면서 시작하게 됩니다.메인페이지에 접속하게 되면 google api, 전자결재, 조직도, 게시판, 개인정보 등등 수 많은 API를 요청 보내고 있습니다.여기서 가장 주목했던건 엄청난 양의 데이터가 담긴 조직도 데이터였습니다.조직도는 그룹웨어 내에 가장 많이 쓰이는 시스템 중 하나로 개선을 한다면 눈에 뛰는 효과가 분명하다고 생각헀습니다. 또한 조직도 같은 경우는 자주 변경되지도 않는 데이터인데 사용자가 로그인 할 때마다 데이터를 호출할 필요가 있을까? 라는 생각을 가지게 되었습니다.물론 서버상태관리 라이브러리인 SWR 덕에 사용자가 최초 메인페이지에 접속했을 경우에만 1번 호출하지만 새로고침을 하거..

이번 2024년 5월 15일부터 16일까지 개최한 행사인 React Conf 2024에서 발표된 내용을 기반으로 작성되었습니다. 리액트 컴파일러란?리액트 19에 도입될 리액트 컴파일러는 공식 문서의 일부분에는 이렇게 설명되어 있습니다.React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as useMemo, useCallback, and React.memo. With these APIs you can tell React that certain parts of your application don’t need to recompute if their inputs ha..

useState는 동기일까? 비동기일까? 결론부터 말하자면 React에서 setState를 호출하면 상태 업데이트는 일반적으로 비동기적으로 처리됩니다. 이는 React가 여러 상태 업데이트를 batch 처리하고, 성능을 향상시키기 위해 상태 업데이트를 함께 묶어서 처리하기 때문입니다. 예를 들어, 다음과 같이 useState를 사용하여 상태 변수를 업데이트하는 예제를 살펴봅시다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); console.log(count); // 이 부분에서는 업데이트된..

이번에 만들어본 서비스에 SSR을 지원하는 Next.JS를 적용하고 Notion API를 이용해서 공지사항을 구현하는 과정을 기록합니다. https://puenti.tistory.com/85 [React] Notion API 연동해보기 https://about-home.net/ 우리집은 안전할까? 우리집 정보 확인하기 우리집은 안전할까? 우리집 정보 확인하기 about-home.net 이번에 친구와 사이드 프로젝트를 진행했던 어바웃홈입니다. 기본적인 기능 puenti.tistory.com 먼저 Next.JS에서 지원하는 getSerSideProps와 getStaticProps에 대해 알아보면 이렇습니다. getServerSideProps getServerSideProps는 매번 요청이 있을 때마다 서버 ..

useState란? 리액트의 useState는 함수형 컴포넌트에서 상태를 관리하기 위한 Hook 중 하나입니다. Hook은 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. 또한 Hook은 함수형 컴포넌트에서 상태를 지속적으로 추적하고 업데이트할 수 있도록 도와줍니다. useState를 사용하면, 컴포넌트에서 변경 가능한 상태를 정의하고, 해당 상태가 변경될 때마다 리액트가 컴포넌트를 다시 렌더링하도록 설정할 수 있습니다. useState는 다음과 같이 사용합니다 import React, { useState } from 'react'; function Example() { // useState를 사용해 "count"..

리액트를 하다보면 State와 Props에 대해 많이 나오는데 오늘은 이것에 대해 간단하게 정리해볼까 합니다. State란? 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달하는 방법! 예를 들어, 검색 창에 입력할때 글이 변하는 것은 state로 바꾸게 됩니다. State는 변경 가능한 mutable 값입니다. State가 변하면 re-render가 됩니다. State는 해당 컴포넌트에서 useState라는 React hooks를 통해 사용가능합니다. 간단한 코드로 설명을 하면 아래와 같습니다. import React, { useState } from 'react'; function MyComponent() { const [count, setCount] = ..