Juun의 개발 기록

서론회사 내 TDD를 적용하려 리액트 테스트 라이브러리인 Jest와 RTL(React Testing Library)을 설치하려 하니??현재 쓰는 Node 버전이 낮아서 설치가 안된다는 문구가ㅠ.... 알아보니 현재 내가 사용하는 Node 버전은 16.7.0Jest를 설치하기 위한 최소 Node 버전은 16.10.0 이라 설치가 안된다는 문구;; 그래서 운영서버와 개발서버 노드를 확인 해보니운영 node : 16.14.0개발 node : 16.13.0로컬 node : 16.7.0 왜 셋 다 다른건지ㅠㅠㅠ심지어 로컬 환경 세팅 가이드는 16.7.0으로 세팅되게 되어 있었네요... TDD 도입하려다 노드 버전까지 바꾸게 되는 작업까지 했네요ㅠ...서론은 여기까지 하고 이번 포스팅의 내용은 노드 버전 업데이트 ..

리액트 성능 개선 후기 안녕하세요? 준입니다. 그간 현생이 너무 바빠 글을 많이 올리지 못 했는데요. 어쩌다 보니 리액트 성능 개선을 한 후기와 제가 고민했던 부분을 적어보려 합니다. 결론부터 말씀드리자면 통합검색 로직 개선을 통해 약 50% 성능 향상이 있었습니다. 먼저 보안 때문에 코드와 많은 사진을 못 보여드리는 점 양해부탁드립니다. 1. 개선 통합검색 페이지는 3가지 섹션으로 구성되어 있습니다. 1. 전계열사 임직원 정보(소속, 담당업무 등), 2. 전자결재, 3. 게시판으로 이루어져 있습니다. 에러 픽스 요청으로 게시판과 전자결재에서 '더보기' 버튼 클릭 시 동일한 컨텐츠가 중복 노출되는 문제를 발견하게 되었고, 이를 수정하면서 통합검색 로직이 비효율적으로 동작하는 것을 확인했습니다. 통합검색 ..

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는 매번 요청이 있을 때마다 서버 ..

https://about-home.net/ 우리집은 안전할까? 우리집 정보 확인하기 우리집은 안전할까? 우리집 정보 확인하기 about-home.net 이번에 친구와 사이드 프로젝트를 진행했던 어바웃홈입니다. 기본적인 기능 구현은 다되어 있고 공지사항을 어떻게 구현할지에 대한 고민이 있었습니다. 친구와 말한 기존안은 어드민 페이지를 만들어서 거기에 공지사항 CRUD 페이지를 만들고 클라이언트에서 DB에 저장되어 있는 공지사항을 호출하는 방식을 생각했는데.... 친구도 이직을 하고 시간도 많이 없어 일단 노션 API를 통해 공지사항을 구현하기로 했습니다. 많은 레퍼런스들이 많지만 구현시 어려웠던 부분만 정리해보았습니다. 1. 사용 라이브러리 "dependencies": { "@notionhq/client"..

이 글을 읽기 전 참고하면 좋은 글 https://puenti.tistory.com/82 [JavaScript] 자바스크립트에서 heap, stack, queue란? 1. Heap(힙) Heap은 동적으로 할당되는 메모리 영역으로, 객체와 배열과 같은 복합 데이터 타입이 저장되는 곳입니다. Heap의 데이터는 크기가 동적으로 결정되기 때문에 메모리 공간이 필요한 만큼 puenti.tistory.com 이벤트 루프(event loop) 란? 이벤트 루프란 자바스크립트에서 가장 중요한 개념 중 하나 입니다. 자바스크립트는 싱글 스레드 기반의 언어(인터프리터 언어)로서 한 가지 작업 밖에 못하는 언어적 한계를 가지고 있습니다. 그러다보니 자바와 같은 컴파일 언어와 비교하면 컴파일 하는 과정이 없기 때문에 컴파..

1. Heap(힙) Heap은 동적으로 할당되는 메모리 영역으로, 객체와 배열과 같은 복합 데이터 타입이 저장되는 곳입니다. Heap의 데이터는 크기가 동적으로 결정되기 때문에 메모리 공간이 필요한 만큼 동적으로 할당되고, 필요하지 않은 메모리는 가비지 컬렉터(garbage collector)에 의해 자동으로 해제가 됩니다. ※ 메모리 생존주기 필요할때 할당 할당된 메모리를 사용 (읽기, 쓰기) 더 이상 필요하지 않으면 해제 2. Stack(스택) Stack은 정적으로 할당되는 메모리 영역으로, 함수 호출 시 함수 내의 변수, 매개변수, 복귀 주소 등의 정보가 저장되는 곳입니다. 함수가 호출될 때마다 스택 프레임(stack frame)이 생성되고, 함수가 종료될 때마다 스택 프레임이 제거됩니다. 이를 스..

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] = ..

비구조화 할당이란? 리액트를 공부하다 보면 비구조화 할당이란 단어가 많이 보입니다. 비구조화 할당(Destructuring assignment)은 객체나 배열에서 데이터를 추출하여 변수나 상수로 개별적으로 할당하는 문법으로, 배열에서도 동일하게 사용할 수 있습니다. 이때 배열에서 비구조화 할당을 사용하는 것을 배열 분해 구조(Array destructuring)라고 부릅니다. 객체에서의 비구조화 할당 객체에서 비구조화 할당을 사용하면 객체의 프로퍼티를 추출하여 변수나 상수로 할당할 수 있습니다. const { 프로퍼티1, 프로퍼티2, ... } = 객체; 예를 들어 다음과 같이 객체를 생성하고, 해당 객체의 프로퍼티를 변수로 할당하는 코드를 작성할 수 있습니다. const person = { name: ..