Juun의 개발 기록

OpenAi API를 활용하여 토이 프로젝트를 진행하고, 그 과정에서 얻은 인사이트와 경험을 공유하려 합니다. 이 프로젝트는 OpenAI API를 활용해서 간단한 사이트를 구축해보고 평소 업무 외적으로 평소에 느꼈던 갈증을 해소 할 수 있는 것에 초점을 맞췄습니다. 이번 포스팅은 토이 프로젝트를 진행하면서 얻은 인사이트와 회고에 중점을 두고 프로젝트 시작부터 배포까지 시간의 흐름에 맞춰 글을 작성했습니다. 1. 프로젝트의 시작 평소에 챗지피티를 활용을 많이 하여 OpenAi에 관심이 많았고 자연스레 OpenAI에서 제공하는 API까지 관심을 가지게 되어 AI를 활용해서 간단한 프로젝트를 진행해보고자 했습니다. 또한 회사에서는 NEXT 12를 사용하고 있는데 NEXT 13, 14에서 엄청 많이 바꼈다고 해..

회사에서 프론트엔드 뿐만 아니라 모바일 개발도 맡게 되었습니다ㅎ... 평소 모바일 개발도 해보고 싶었던지라 좋은 기회라 생각하고 수락했습니다! 회사 내 모바일 개발자가 없고 외주사를 통해 앱 개발을 진행했던지라 버전만 달랑 명시되어 있고 혼자 머리 깨져가며 세팅한 과정과 에러를 공유합니다. 1. Xcode 설치 앱스토어에서 설치했다고 끝이 아님!! 반드시 앱을 한 번 실행 시켜서 마저 다운로드 맥북이 업데이트 됨에 따라 CommandLinTools를 해당 경로로 설정해주는게 좋다고 합니다. // 경로 확인 xcode-select -p // 경로가 Library/Developer/CommandLineTools로 나오면 아래 실행 sudo xcode-select -s /Applications/Xcode.ap..

서론회사 내 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)이 생성되고, 함수가 종료될 때마다 스택 프레임이 제거됩니다. 이를 스..

재귀함수란?? 재귀함수(Recursive Function)는 자신이 수행하는 함수 내에서 자기 자신을 다시 호출하여 작업을 수행하는 함수를 말합니다. 이러한 재귀적 호출을 통해 복잡한 문제를 간단하게 해결할 수 있습니다. 재귀함수로 팩토리얼 구현 재귀 함수의 대표적 예시인, 팩토리얼 함수를 구현해보겠습니다. 팩토리얼 함수는 양의 정수 n에 대해 n!을 구하는 함수이며, n!은 1부터 n까지의 정수를 모두 곱한 값입니다. function factorial(n) { if (n === 0) { // n이 0일 때, 1을 반환합니다. return 1; } else { // n이 0이 아닐 때, 자신을 다시 호출합니다. return n * factorial(n-1); } } console.log(factorial..