Juun의 개발 기록

onBlur와 onFocus는 HTML 및 React에서 자주 사용하는 이벤트, 각각 요소에 포커스가 떠날 때 또는 도달할 때 발생onBlur정의: 요소에서 포커스가 떠날 때(focus out) 발생하는 이벤트.주요 사용 사례:폼 검증: 사용자가 입력 필드에서 포커스를 잃었을 때 유효성을 검사.상태 저장: 사용자가 입력을 마치고 다른 요소로 이동했을 때 값을 저장.사용자 행동 추적: 특정 입력 필드를 벗어난 시점을 기록.예제: { console.log('Input field lost focus:', e.target.value); }}/>동작: 사용자가 입력 필드에서 포커스를 잃을 때 onBlur가 호출됩니다.onFocus정의: 요소에 포커스가 도달할 때(focus in) 발생하는 이벤트.주요 사용..

https://puenti.tistory.com/100 [Next.js] next/dynamic 1. 사용법과 빌드 과정회사 내 서비스가 커지다보니 빌드 시간과 초기 JS 파일의 크기가 커지는 문제가 있었습니다.이는 곧 성능과 속도에 문제가 생길 수 있어 next/dynamic을 적용시켜 개선해보았습니다. next/dynamic은 Nepuenti.tistory.com 이전 글과 이어지는 내용입니다.이전 글에서는 기본적이고 원론적인 사용법과 빌드 과정에 대해서 포스팅을 했는데요.이번 글은 실무에서 적용시키면서 생긴 의문과 적절하게 적용시키는 방법에 대해 포스팅해보겠습니다. next/dynamic은 동적 로드를 지원합니다.근데 만약 해당 컴포넌트가 한 개가 아니라 여러 개일 경우 어떻게 적용시키면 좋을까에서..

회사 내 서비스가 커지다보니 빌드 시간과 초기 JS 파일의 크기가 커지는 문제가 있었습니다.이는 곧 성능과 속도에 문제가 생길 수 있어 next/dynamic을 적용시켜 개선해보았습니다. next/dynamic은 Next.js에서 동적 임포트를 지원하는 기능으로, 컴포넌트를 필요한 시점에 로드하도록 설정할 수 있습니다.특정 컴포넌트에 next/dynamic을 적용하면 해당 컴포넌트는 초기 번들에 포함되지 않고 클라이언트에서 필요할 때 로드됩니다. next/dynamic을 사용하는 방법은 다음과 같습니다:import dynamic from 'next/dynamic';const DynamicComponent = dynamic(() => import('./DynamicComponent'));function P..

유유자적 깃헙을 돌아다니며 뛰어난 사람들의 코드를 보며 좌절하던 도중 우연히 우테코 깃헙을 발견했습니다.네카라쿠배라 불릴 정도로 개발자라면 한 번쯤은 다니고 싶어하는 배민의 부트캠프인 우테코에서는 어떤식으로 디렉토리 구조를 설계하고 코드는 어떻게 짜는지 궁금해서 살펴보았습니다. 배민의 웹서비스는 리액트와 자바로 구성되어 있다고 알고 있습니다.그래서 그런지 우테코에서도 자바, 리액트로 프로젝트로 되어 있는 것을 확인했습니다. 저는 프론트엔드 주니어 개발자라 프론트엔드 위주로 살펴보았습니다. 1. packge.json해당 부분에서 눈 여겨본 부분은 3가지 입니다. 1. Next.js의 부재리액트 공식문서에서 조차 Next.js 사용을 권장하고 있습니다.근데 우테코의 프로젝트들을 살펴보면 Next.js를 사용..

이전 글과 이어지는 내용입니다.이전 글 내용이 궁금하신 분은 아래의 링크를 참고해주시면 됩니다. https://puenti.tistory.com/97 [GCP] GCP로 node 배포하기 1. (네트워크, DNS 세팅)이번 토이 프로젝트로 구글에서 제공하는 API, storage를 사용해서 간단한 서비스를 만들어 봤습니다.구글에서 제공하는 서비스를 쓰다보니 배포 역시 AWS 보단 GCP를 사용해보기로 했습니다.번외로puenti.tistory.com 저번 포스팅에서 DNS 설정까지 했습니다.이번에는 HTTPS 인증을 받기 위한 SSL 인증을 해보겠습니다.HTTPS란 무엇인가?HTTPS는 인터넷에서 데이터를 안전하게 주고받기 위해 사용하는 프로토콜입니다. HTTP에 SSL/TLS를 추가해 보안을 강화한 것입..

이번 토이 프로젝트로 구글에서 제공하는 API, storage를 사용해서 간단한 서비스를 만들어 봤습니다.구글에서 제공하는 서비스를 쓰다보니 배포 역시 AWS 보단 GCP를 사용해보기로 했습니다.번외로 회사에서 GCP를 사용해서 겸사겸사 해보면 좋을거 같다는 생각도 했습니다. 1. GCP 접속GCP > Compute Engine > VM 인스턴스 > 인스턴스 만들기  2. 인스턴스 만들기본인의 사양에 맞게 머신 구성저는 제일 저렴한 지역과 머신으로 선택했습니다.액세스 할 서비스 계정을 설정하고 방화벽은 HTTP/ HTTPS 트래픽 허용  3. 프로젝트 세팅 (Git & Node)SSH 연결을 통해 인스턴스를 실행해봅시다.GCP는 기본적으로 git이 설치되어 있지만 확인해보기$ git --version//..

통합검색 성능 개선 이후로 진행한 성능개선 작업 2편입니다.1편인 통합검색 성능 개선이 궁금하신 분은 아래 링크 참고해주세요.https://puenti.tistory.com/89 메인페이지 관련 개발 중 해당 로그를 발견했습니다.이 메시지는 Next.js 애플리케이션에서 Largest Contentful Paint (LCP)를 최적화하기 위해 이미지를 우선적으로 로드해야 한다는 경고입니다. LCP는 사용자가 페이지를 로드할 때 가장 큰 콘텐츠 요소가 화면에 나타나는 시간을 측정하는 웹 성능 지표이며 이는 사용자 경험을 개선하는 데 중요하다고 볼 수 있습니다. 로그를 확인해보니 메인 페이지에 배너와 사용자 사진 등이 들어가는데 이 부분에서 LCP가 발생하는 것으로 파악했습니다.LCP (Largest Con..

프론트엔드 개발에서 debounce와 throttle는 성능 최적화와 사용자 경험 향상을 위해 자주 사용되는 기술입니다.제가 담당하고 있는 서비스에서도 많이 쓰이진 않지만 debounce는 종종 보이곤 합니다. 처음 debounce를 마주했을 때 이걸 왜 쓰는지에 대해 알아봤는데 debounce와 함께 나오는 개념이 throttle과 함께 정리해봤습니다.DebounceDebounce는 특정 이벤트가 여러 번 발생할 때, 지정된 시간 동안 이벤트가 발생하지 않을 때까지 대기했다가 한 번만 실행되도록 하는 기술입니다. 이를 통해 연속된 이벤트 호출을 줄여 불필요한 처리를 방지합니다. 예를 들어, 사용자가 검색창에 글자를 입력할 때마다 검색 요청을 서버에 보내면 서버에 과부하가 걸릴 수 있습니다. 이 때 de..

개요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..

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. 게시판으로 이루어져 있습니다. 에러 픽스 요청으로 게시판과 전자결재에서 '더보기' 버튼 클릭 시 동일한 컨텐츠가 중복 노출되는 문제를 발견하게 되었고, 이를 수정하면서 통합검색 로직이 비효율적으로 동작하는 것을 확인했습니다. 통합검색 ..

리덕스를 쓰면 쉽게 구현할 수 있을텐데? Why?? 이번 새로 이직한 회사에서 휴대폰 인증을 구현해보라고 간단한 업무를 던져주었습니다. 제가 생각한 큰 흐름에서의 로직은 아래와 같습니다. 1. 마이페이지 모달(부모 컴포넌트)에 휴대폰 인증 버튼을 추가한다. 2. 휴대폰 인증 버튼을 클릭하면 인증 모달(자식 컴포넌트)을 띄워준다. 3. 인증된 번호이 완료되면 인증된 번호를 마이페이지 모달(부모 컴포넌트)로 바뀐다. 코드를 제대로 보기 전이라 저는 리덕스로 개인정보를 상태관리 하는줄 알았습니다. 하지만 코드를 확인해보니 마이페이지 모달을 띄울때마다 api 요청을 통해서 데이터를 가져왔어서 현 상태에서 리덕스를 통해서 구현하기 보다는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해주고자 했습니다. 리액트 데..