𝐀𝐥𝐥 𝐏𝐨𝐬𝐭292

[회고] 동료 피드백으로 되돌아본 나 - 4년차 개발자의 회고록 회고 · Retrospective 동료 피드백으로 되돌아본 나— 프론트엔드 메인 개발자로서의 회고 함께 일했던 동료들에게 피드백을 받았다. 현재 같이 일하는 동료도 있고, TF로 잠깐 함께했던 동료도, 이미 퇴사한 동료도 있다. 받아보기 전에는 솔직히 두근거렸다. 내가 어떻게 보이는지 안다고 생각했지만, 막상 글자로 마주하는 건 다른 일이니까. 피드백을 읽으며 웃기도 했고, 조용히 눌러두었던 감정이 올라오기도 했다. 이 글은 그 피드백들을 바탕으로 스스로를 돌아본 기록이다. 나는 어떤 개발자인가 나는 프론트엔드 개발자이자, 현재 클라우드 제품 파트의 프론트엔드 메인 개발자 역할을 맡고 있다. 나의 주요 역할은 개발뿐만 아니라 일감을 미리 분배하고 현실적인 일정을 산출하여 타 .. 2026. 5. 27.

[회고] HIGH FIVE 2026 - 나는 어떤 개발자로 성장해야 하는가? HIGH FIVE 2026에 다녀오며이 글은 강연 내용보다는 개인 관점에서 느낀 점에 대해 작성된 글입니다. 이번 HIGH FIVE 2026은 개인적으로 꽤 의미가 컸던 행사였다.사실 나는 매년 2~3번 정도는 개발 컨퍼런스를 찾아다니는 편이다.새로운 기술 자체도 좋아하지만, 결국 지금 업계가 어떤 방향으로 움직이고 있는지를 계속 확인하고 싶었기 때문이다.우리 회사의 규모보다 몇백배는 큰 회사에서는 어떤 일이 일어나고 있는지 궁금하기도 하고,그들이 고민하는 것들과 인사이트를 얻으면서 알을 깨고 나오는 거 같을 때가 많기 때문이다. 이번 컨퍼런스는 TECH 세션만 들은게 좀 아쉬울 정도로,다른 세션들도 재밌는게 많아보여서 다음에 참여하게 되면 더 다양하게 들어보고 싶다. 이번에도 회사에 먼저 이야기해서 함.. 2026. 5. 19.

[DX 개선] Orval을 활용한 API Boilerplate 자동화 경험기 기획은 계속 바뀌는데 개발 일정은 고정되어 있었다서비스 전체 개편을 진행하게 되면서 짧은 기간 안에 매우 많은 화면을 개발해야 하는 상황이 있었습니다.페이지, 슬라이드아웃, 모달을 포함해 30개 이상의 화면이 새롭게 추가되어야 했고, 문제는 단순히 화면 수만 많았던 것이 아니었습니다.기획은 완전히 확정되지 않은 상태였고, 개발을 진행하는 동안에도 계속해서 요구사항이 변경되고 있었습니다.하지만 릴리즈 일정은 고정되어 있었고, 결국 개발자가 실제 구현에 사용할 수 있는 시간은 계속 줄어드는 구조였습니다.이런 상황에서 저는 자연스럽게 다음 질문을 하게 되었습니다.“지금 내가 정말 제품 개발에 시간을 쓰고 있는 걸까? 의미 없는 반복 작업에 시간을 쏟는거 아닐까?” 반복되는 API Boilerplate 문제기.. 2026. 5. 12.

[Next.js] 성능 최적화 - 번들 사이즈를 줄이는 배럴 파일 관리 전략 프론트엔드 프로젝트의 규모가 커지면 우리는 자연스럽게 '깔끔한 코드'를 고민하게 됩니다. 그 과정에서 수십 개의 컴포넌트를 한곳에 모아 내보내는 배럴 파일(Barrel File) 패턴을 흔히 사용하곤 하죠. 하지만 이 편리함 뒤에는 번들 사이즈와 성능을 갉아먹는 치명적인 함정이 숨어 있습니다.오늘은 배럴 파일이 왜 성능의 적이 되는지, 그리고 이미 커져버린 프로젝트에서 Next.js의 optimizePackageImports를 통해 어떻게 우아하게 탈출할 수 있는지 알아보겠습니다. 1. 배럴 파일(Barrel File)이란?배럴 파일은 여러 모듈을 하나의 index.ts 파일로 모아서 다시 내보내는(Re-export) 방식입니다.// components/index.ts (배럴 파일)export { d.. 2026. 2. 13.

[Next.js] 빌드 최적화 - 프로덕션 번들에서 개발 전용 코드 제외하기 프로젝트 규모가 커질수록 Next.js 프로덕션 빌드 시간이 점점 늘어나는 문제를 체감하게 됐다.“코드가 늘면 빌드가 느려지는 건 당연한 거 아닌가?” 싶지만,자세히 보면 프로덕션에서 사용하지 않는 코드까지 빌드 파이프라인이 처리하면서 시간을 잡아먹는 구간들이 있다. 이번 글은 그중 하나였던 React Query / Jotai DevTools를 _app에 정적 import로 넣어둔 구조를 개선해서,빌드 시간을 줄인 과정을 정리한 것이다. 1. 문제: DevTools를 그냥 넣으면?개발 편의를 위해 @tanstack/react-query-devtools, jotai-devtools를 쓰는 경우,보통은 상단에서 정적 import 한 뒤 _app 안에서 컴포넌트로 렌더링하게 된다.import { ReactQu.. 2026. 2. 4.

[AI/Dev] AI 가이드 기능 프롬프트 고도화 기록과 고찰 나는 현재 회사에서 클라우드 서비스의 프론트엔드 개발자로 일하고 있다.현재 내가 맡은 클라우드 서비스의 기능에 AI 가이드 기능이 추가되었다.프론트엔드 개발자이지만 파트장님께 프롬프트 고도화를 주도적으로 말씀드려서,내가 주도하여 백엔드 개발자와 함께 설계하고 개선하는 역할을 자처했다.그 이유는 AI 응답의 품질과 일관성이 곧 사용자 경험으로 직결된다고 판단했기 때문이다. 이 글은 내가 다음에 대해 작성해보려고 한다.AI Guide를 설계하면서 어떤 문제를 마주했고왜 프론트엔드 개발자가 프롬프팅에 개입해야 한다고 판단했으며어떤 방식으로 프롬프트를 고도화했는지 그 과정을 정리한 기록이다. 1. 프론트엔드 개발자로서 AI 가이드 기능을 바라본 관점AI 가이드 기능을 대략적으로 설명하면 다음과 같다.현재 내가.. 2026. 2. 4.

[Next.js] 성능 최적화 - 번들 사이즈 개선 (feat. bundle-analyzer) 어느 날 문득 우리 서비스의 초기 로딩이 느리다는 것을 깨달았다. Bundle Analyzer를 돌려보니... _app.js가 4.2MB였다. 어떻게 이 문제를 해결했는지 공유해보려고 한다. 준비: Bundle Analyzer 설치번들 크기를 분석하려면 먼저 @next/bundle-analyzer를 설치해야 한다.yarn add -D @next/bundle-analyzernext.config.js에 설정을 추가한다:const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true',});module.exports = withBundleAnalyzer({ // 기존 설정...});편의를 위.. 2026. 2. 3.

[React] 파편화된 Form 유효성 검사 로직, Zod로 우아하게 격리하기 1. 들어가며: 거대해진 Form의 습격프런트엔드 개발을 하다 보면 수십 개의 입력 필드를 가진 거대한 설정 Form을 다뤄야 할 때가 있습니다.초기에는 단순했던 유효성 검사 로직도 서비스가 성장하면서 점점 복잡해집니다.정규식 기반 포맷 검증파일 크기 및 확장자 체크특정 조건이 만족될 때만 이어지는 순차 검증이런 로직들이 하나둘 추가되다 보면, 어느 순간 UI 컴포넌트 안에 수백 줄의 검증 코드가 뒤엉켜 있는 상태를 마주하게 됩니다.해당 프로젝트는 초기에 약 3주만에 클라우드 서비스를 올려야 했으며, MVP가 기존의 온프레미스의 기본 기능을 모두 혼자 구현해야 한다는 핑계로 UI로직과 비지니스 로직이 뒤섞인 상태였습니다. 최근에 해당 프로젝트의 유효성 검증 로직이 추가 요구사항으로 들어오게 되어 덮어두었.. 2026. 1. 12.

실시간 알림 구현 하기 : 4. 하나의 채널로 SSE 통신하기 (with. Shared Worker) 이전글에서 SSE 연결 테스트를 마친후에 실제로 개발에 착수하는 단계가 되었다. 개발 이전에 내가 고려해야 할 사항들에 대해 정리를 해보았다. 1. SSE는 브라우저 탭마다 연결이 새로 열린다.2. 헤더 커스텀이 필요하지만 SSE의 경우 헤더 커스텀이 불가능하다. 이 조건을 동시에 만족시키는 구조를 만드는 것이 이번 실시간 알림 개발의 핵심 과제였다. 1. 탭마다 새로 열리는 SSE 연결 문제SSE는 기본적으로 브라우저 탭 단위로 연결이 생성된다.즉, 사용자가 같은 서비스에서 탭을 3개 열면 서버 입장에서는 SSE 연결이 3개가 열린다. 기술 검토 초기에는 이 부분을 크게 문제 삼지 않았다.하지만 실시간 알림은 특정 페이지가 아니라 헤더에 항상 떠 있어야 하는 기능이었고, 자연스럽게 사용자는 여러 탭을 .. 2025. 12. 7.

실시간 알림 구현 하기 : 3. 인프라 환경에서 백엔드 서버와 연결 테스트 (with. trouble shooting) 이전 글에서 백엔드 로컬 서버에서는 실행이 잘 되는 것을 확인하였다. 하지만 k8s 인프라 환경에 올렸을 때 문제가 발생하였다.이번 글에서는 Next.js API Routes + SSE 프록시 구성 시 K8s 환경에서 localhost로 연결되던 문제에 대해 작성해보려 한다. Next.js API Routes를 사용해 SSE(Server-Sent Events) 프록시를 구현하던 중, 로컬(Linux 서버)에서는 정상 동작하던 코드가 Kubernetes(K8s) 인프라 환경에 배포되자 localhost로 잘못 연결되며 실패하는 이슈가 발생했다. 이 글에서는 단순한 “env 설정 실수”를 넘어,IP 직접 접근 ↔ Service Name 기반 접근의 구조적 차이,그리고 Next.js의 빌드·런타임 환경 변수 .. 2025. 12. 7.

실시간 알림 구현 하기 : 2. SSE 백엔드 로컬 서버와 연결 테스트 (feat. next.js) 우리 서비스는 프론트(next.js - pages router)와 백엔드(spring boot)로 된 프로젝트이다. 기술을 도입하기 전 백엔드 개발자와 SSE 통신이 가능한 지 확인을 위해 프로토 타입 테스트를 시행하였다. 프론트 코드는 다음과 같이 작성하였다. EventSource 객체를 활용해 SSE 채널을 열고, 서버가 보내는 데이터를 수신하는 간단한 코드이다. 프로젝트에서는 백엔드와의 통신을 next.config.js의 rewrites 설정을 통해 프록시하고 있기 때문에, SSE 엔드포인트(/sse/test)도 동일한 방식으로 작성하였다.// pages/sse-example.jsximport { useEffect } from 'react';export default function SseExa.. 2025. 12. 7.

실시간 알림 구현 하기 : 1. SSE(Server Sent Events)는 무엇인가? SSE(Server Sent Events)SSE의 경우 웹페이지(클라이언트)의 요청 없이도 언제든지 서버가 새로운 데이터를 보내는 것이 가능전통적으로 웹페이지(클라이언트)는 새로운 데이터를 받기 위해 서버로 요청을 보내야 함SSE(Server-Sent Events)는 실시간 웹 애플리케이션을 구현하는데 사용될 수 있는 Web API실시간으로 소식 불러오기, 알림 받기 등 실시간으로 모니터링 해야하는 상황해서 사용할때 유용하게 사용동작 흐름클라이언트가 서버에게 SSE로 통신하자는 요청을 보냄. (Connection Request)서버는 이 요청을 수신하고 수락했음을 알리는 메시지를 보냄. (Connection Response)클라이언트는 이를 받고, 지금부터 서버가 보내주는 데이터들에 반응할 준비이제 서버.. 2025. 12. 1.

실시간 알림 구현 하기 : 0. 요구사항 분석과 방법론 비교 이전에는 서비스에 알림을 볼 수 있는 채널이 존재하지 않았다.서비스 내에 기존에 지원하던 분석과 관련된 서비스 외에 SBOM을 활용한 서비스의 공유 기능이 생기게 되면서 알림 기능이 요구사항으로 추가 되었다. 주요 요구 사항은 다음과 같았다.이벤트 수신 여부 실시간 반영새로운 이벤트 발생 시 실시간 업데이트이벤트 삭제 시 실시간 업데이트 요구 사항 분석 ✅ 새로운 이벤트 발생 시 실시간 업데이트데이터 전송 흐름case 1 : 클라이언트 → 서버 (요청)case 2 : 서버 → 클라이언트✅ 이벤트 수신 여부 실시간 반영, 이벤트 삭제 시 실시간 업데이트데이터 요청/전송 흐름클라이언트 동작 → 서버 (요청)실시간성이 아닌 클라이언트 동작에 따른 서버 요청으로 실시간 알림과 별개로 생각기존 REST 요청을.. 2025. 12. 1.

사내 보안 리소스 통합 플랫폼 구축기 : 6. on-premise sentry 고도화 이전글 에서 sentry를 프론트엔드 서버에 연동 완료하였다. 하지만 어떤 유저가 발생한 오류인지 확인하기는 어려웠고 소스맵 연동도 제대로 되어있지 않아서 어떤 코드에서 발생한 에러인지 한 눈에 알아볼 수 없는 상황에 오류를 트레이스하기 어려운 문제점을 가지고 있었다. 또한, 현재 서비스가 릴리즈 되어있는 현재 시점에 사용자가 어떤 페이지(기능단위의 페이지로 구성되어 있다.)를 자주 들어가는지 알 수 있는 방법이 있으면 좋겠다는 내부의 의견도 존재했다. 그래서 나는 3가지에 대해서 일단 고도화를 진행하였다. 1. 어떤 사용자로부터 비롯된 오류인가2. 어떤 소스코드로부터 트레이스 된 오류인가3. 어떤 페이지를 사용자가 많이 접근하는가 어떤 사용자로부터 비롯된 오류인가Sentry에서는 에러 이벤트에 사용.. 2025. 11. 29.

사내 보안 리소스 통합 플랫폼 구축기 : 5. 페이지 단위의 UI/UX 개선하기 이전에 작성했던 UI/UX 개선기는 컴포넌트 단위의 개선을 다뤘다면,이번에는 페이지 단위의 UI/UX 개선 사항에 대해서 다뤄보려고 한다.어쩌다보니 "레퍼런스"라는 개념에 대한 개선을 자꾸 다루게 되지만, 다른 페이지들도 개선 사항이 꽤 있었다. 또한, 추가 되는 개념들이 있어서 이걸 어떻게 사용자들이 설명 없이 직관적으로 사용할 수 있을까?라는 고민을 되게 많이 했다. 개발도 개발이지만 기획과 UI/UX를 설계하는 일도 꽤나 의미있고 재미있었다. 기존 서비스를 하나씩 다 뜯어보고, 직접 사용해보고 불편한 점들을 취합하고, 기존 사용자들에게 물어봐서 개선해야 하는 부분들에 고민했다. 약간의 자율성이 주어지는 프로젝트라서 피드백이 더 빠르게 오갔던 환경이라 더욱 흥미를 느꼈던거 같다. 같이 참여한 분들도 .. 2025. 11. 28.

사내 보안 리소스 통합 플랫폼 구축기 : 4. sentry self-hosted (on-premise) 세팅 with next.js 1. Sentry란?Sentry는 애플리케이션에서 발생하는 에러 및 예외를 실시간으로 수집하고 시각화하여 빠르게 문제를 파악하고 대응할 수 있게 돕는 오픈소스 기반의 오류 추적 시스템이다.주로 웹, 모바일, 데스크탑 등 다양한 플랫폼에서 발생하는 런타임 오류나 성능 저하 이슈를 추적하는 데 활용된다.“Application Monitoring and Error Tracking that helps developers see what actually matters, solve quicker, and learn continuously in production.”2. Sentry로 할 수 있는 것들✅ 에러 추적에러 발생 시 스택 트레이스를 포함한 상세 로그를 수집해 어디서 문제가 발생했는지 시각적으로 파악할 수 .. 2025. 6. 18.

사내 보안 리소스 통합 플랫폼 구축기 : 3. URL을 중심으로 설계한 필터, 검색, 페이지네이션 상태 관리 전략 이번 글에서는 체커 목록 화면에서 필터, 검색, 페이지네이션 상태를 어떻게 관리했는지 정리하고자 한다.특히 Next.js 기반 환경에서 URL 쿼리 파라미터를 중심으로 상태를 통합 관리하고,이를 React Query와 서버 사이드 렌더링(SSR)까지 연결해 일관된 UX와 초기 성능을 확보하는 전략을 설계했다. 🔍 문제 정의처음에는 필터와 검색 상태를 전역 상태로 관리하거나 localStorage에 저장하는 방식을 고려했었다.하지만 아래와 같은 실질적인 한계점이 존재했다.페이지를 새로고침하면 상태가 초기화되어 사용성이 떨어짐필터링된 상태를 URL로 공유할 수 없어 협업 시 불편함브라우저 뒤로가기/앞으로가기 동작이 기대와 다르게 작동함SSR을 활용한 초기 렌더링과 연결되지 않아 로딩 시 UX가 좋지 않음이.. 2025. 6. 13.

사내 보안 리소스 통합 플랫폼 구축기 : 2. 계층형 레퍼런스 필터 UI 개선기 🧱 복잡한 트리구조 필터, 계층형 필터로 개선하기❌ 기존 UI의 문제점기존의 체커 관리 시스템에서는 아래와 같이 트리 구조 기반의 레퍼런스 필터를 사용하고 있었다.트리 형태로 구성된 필터는 시각적으로 복잡하며, 중첩 레벨이 많아지면 가독성과 사용성이 급격히 떨어지는 구조각 챕터/룰 단위로 선택할 수는 있었지만, 전체 선택/해제 로직이 직관적이지 않았고, 마우스 없이 조작하기에도 불편스크롤이 많고 구조가 평평하지 않아, 사용자 입장에서는 어떤 기준으로 선택할지 파악이 어려워 보임첫번째 선택 항목의 경우 필터 레이아웃을 벗어난 UI를 가지고 있음 ✅ 개선 방향: 3단계 계층형 필터 UI기존에 한눈에 보기 어려운 UI를 개선하기 위해 3단계 계층 구조에 기반한 커스텀 필터 컴포넌트를 설계 및 구현했다. ?.. 2025. 6. 13.

사내 보안 리소스 통합 플랫폼 구축기 : 1. 불편한 필터 UI, 모달 기반으로 개선하기 복잡한 필터 UI, 모달 기반으로 개선하기❌ 기존 UI의 문제점 기존 SAST 체커 관리 시스템은 위와 같은 필터 UI를 제공하고 있었다. 그로 인해 다음과 같은 문제점을 가지고 있었다.너무 좁은 공간에 많은 필터 항목이 배치되어 있어 시인성이 낮고 조작이 어려움필터 카테고리가 많아질 경우 세로 스크롤이 길어지고, 일부 항목은 가로 스크롤 없이 볼 수 없을 정도로 레이아웃이 깨지는 경우도 발생필터 항목에 따라 드롭다운이 필터 영역 밖으로 삐져나오는 문제도 있었고, 일부 긴 텍스트는 잘려서 표시되기도 함 ✅ 개선 방향 이런 문제를 해결하기 위해 다음과 같은 UI 개선을 적용했다. 필터를 모달로 분리 좌측 사이드 영역에서 벗어나 전체 모달 창으로 필터를 제공하여 시야 확보 및 사용자 조작성을 .. 2025. 6. 13.

사내 보안 리소스 통합 플랫폼 구축기 : 0. 프로젝트 개요와 기술 선택 사내 보안 분석 체계 통합 시스템 프로젝트에 참여우리 회사는 정적 분석(SAST), 동적 분석(DAST), 오픈소스 컴포넌트 분석(SCA) 등 다양한 보안 분석 서비스를 자체적으로 개발하고 운영하고 있다.기존에 SAST와 관련된 체커(분석 규칙 모듈)를 관리하기 위한 별도의 사내 시스템이 존재했으나, 그 외는 수동 관리에 의존하고 있어 체계적인 통합 관리 플랫폼이 부재한 상황이었다. 특히 신규 체커나 레퍼런스를 추가할 때 중복된 작업이나 커뮤니케이션 비용이 발생할 수 밖에 없는 문제를 가지고 있었다.이를 해결하기 위해 SAST, DAST, SCA 체커 및 레퍼런스 정보를 하나의 시스템에서 통합 관리할 수 있도록 신규 통합 관리 시스템을 기획하고 구축하는 프로젝트 TF가 꾸려졌다. 나는 프론트엔드 개발자로.. 2025. 6. 13.

[Docker] next.js를 Docker로 배포하기 with multi-stage 빌드 더보기📌 목차Dockerfile 작성하기 (Single-stage Dockerfile)Multi-stage 빌드를 통한 이미지 최적화.dockerignore로 불필요한 파일 제거주요 Docker 명령어Reference 사내 서비스 프로젝트 프론트엔드 개발을 맡으면서 CI를 구축해 볼 수 있는 기회가 생겼다.현재 개발중인 서비스는 next.js 기반으로 이루어져 있다. 내가 맡은 역할은 Dockerfile을 생성하여 도커 이미지를 빌드하여 Teamcity에 연동하는 것이다. 이 과정에서 특정 브랜치에 업데이트 발생 시, 도커 이미지를 빌드 후 사내 저장소에 push 하도록 하는 과정까지는 내가 맡았다. 최신 이미지 태그를 가져와 서버를 업데이트 하는 작업은 다른 개발자 선배님이 연동하시기로 했다. Doc.. 2025. 6. 5.

[Next.js] tailwind CSS 로컬 폰트 적용 (feat. Type '{ children: Element[]; className: string; }' is not assignable to type) next.js + tailwind CSS프로젝트에서 글씨체를 적용 하는 방법해당 게시글은 다음 기술 스택을 기반으로 합니다.- next.js v15 pages-router- react v19- typescript- tailwindCSS- shadcnUI프로젝트에서 사용하는 pretendard를 예시로 작성합니다. Optimizing: Fonts | Next.jsOptimize your application's web fonts with the built-in `next/font` loaders.nextjs.org Pretendard 파일을 다운로드 합니다.https://cactus.tistory.com/306해당 프로젝트에서는 폰트 경량화를 위해 .woff2 확장자 파일을 다운로드 했습니다.다음 경로에.. 2025. 3. 14.

[Next.js] node.js 메모리 사용량 확인과 heap 메모리 제한 적용하기 node.js 메모리 사용량 확인과 heap 메모리 제한 적용하기현재 메모리 사용량을 확인하기 위해서는 next.js에서 server를 커스텀 하여 로그를 통해 확인할 수 있다.메모리 사용량을 알아내는 방법은 GPT의 도움을 받아 process.memoryUsage()를 통해 알 수 있다는 것을 확인했다. 1. process.memoryUsage의 중요 요소Node.js(Next.js) 애플리케이션 모니터링을 위한 메모리 인사이트 / if(kakaoAI)2024해당 컨퍼런스 내용이 내가 고민하고 있는 개념적인 부분을 다뤄주고 있었다. 1-1. 코드 적용// server.jsconst { createServer } = require('http');const { parse } = require('url');.. 2024. 12. 23.

[Next.js] Next.js의 기본 메모리 관리 구조 - node.js v8 Next.js의 기본 메모리 관리 구조Next.js는 Node.js 기반의 V8 엔진에서 실행된다.JavaScript는 싱글 스레드 언어이다. 따라서 V8 역시 자바스크립트의 Context 당 하나의 프로세스를 사용한다. 단, 서비스 워커를 사용하는 경우는 워커의 개수만큼 프로세스를 증식한다고 한다.실행중인 프로그램은 V8 프로세스에서 할당된 일정량의 메모리로 표현되는데, 이를 Resident set이라고 한다. 내부 구조는 아래 사진과 같다.사진에서 볼 수 있듯이 크게 힙 메모리와 스택 메모리로 관리 되는 것을 확인할 수 있다.1️⃣ 스택 메모리스택은 메모리 영역이고 V8마다 하나의 스택을 가진다. 스택에는 정적데이터(메서드와 함수 프레임, 원시 값, 객체 포인터)가 저장된다.V8의 스택 영역의 관리는.. 2024. 12. 22.

[Next.js] SWC 옵션을 활용하여 빌드 시간 단축하기 SWC를 활용하여 빌드 시간 단축하기 사내에서는 CI/CD 도구로 깃헙 액션을 사용하고 있다.백엔드와 다르게 프론트는 액션이 완료되는데 까지 전체적인 시간이 좀 더 소요되는 것을 확인할 수 있다. 현재 내가 개발하고 있는 프론트 환경에서 CI/CD 과정 중 가장 소요 시간이 긴 스탭은 빌드 후 도커 이미지를 만들어 ECR로 옮기는 시점이다. 그 중 CI 과정 중에서 프론트 프로젝트 빌드 시간과 ECR PUSH 타임이 대부분을 차지함을 확인 할 수 있다. ❓그렇다면,프론트 프로젝트 빌드 시간을 어떻게 줄일 수 있을까? Next.js 빌드 시간을 단축 하는 방법SWC 코드 압축 활성화: swcMinify: true를 설정해 빌드 시 SWC를 통해 코드를 압축하여 최적화.Webpack 캐싱 사용: W.. 2024. 11. 1.

[JavaScript] 마우스 및 휠 이벤트 (onMouseEnter, onMouseLeave, onWheel) [JavaScript] 마우스 및 휠 이벤트 (onMouseEnter, onMouseLeave, onWheel)회사 서비스를 구현 하면서 회사 자체 컴포넌트 툴팁 스펙때문에,마우스가 텍스트 위에 존재 하지 않음에도 휠 이벤트 발생시 툴팁이 계속 떠있는 현상이 발생하였다. 그래서 tooltip이 떠야 하는 텍스트에 onMouseEnter, onMouseLeave, onWheel 이벤트 핸들러들을 사용하여 이를 해결할 수 있었다. onMouseEnter 이벤트onMouseEnter 이벤트는 마우스 포인터가 특정 요소에 처음으로 들어갔을 때 발생하는 이벤트.이 이벤트는 사용자가 마우스를 요소 위로 이동시킬 때 트리거 된다.onMouseEnter는 해당 요소의 자식 요소에는 이벤트를 전파하지 않기 때문에 부모 .. 2024. 5. 20.

[JavaScript] 팝업 창 구현 - window.open [JavaScript] 팝업 창 구현 - window.open프로젝트에서 기획 명세를 바탕으로 독립된 팝업 창을 구현해야 했다.JavaScript의 window.open 메서드를 사용하여 팝업창을 구현하였다. window.open 메서드새 브라우저 창이나 탭을 열 때 사용하는 메서드window.open(url, windowName, [windowFeatures]);- url : 팝업 창에 로드할 페이지 URL- windowName : 팝업 창의 이름. 같은 이름을 가진 창이 이미 열려있다면 해당 창을 재사용.- windowFeatures : 팝업 창의 특성을 정의하는 문자열. 코드 예시약관 보기 Reference Window: open() method - Web APIs | MDNThe open() m.. 2024. 5. 20.

SQLD(국가 공인 SQL 개발자) - 비전공자 합격 후기 SQLD(국가 공인 SQL 개발자) - 비전공자 합격 후기 약 한달전인 2023년 6월 10일에 49회 sqld를 치뤘다. 시험은 막상 신청해두었지만 회사일이 갑자기 바빠지면서 잦은 야근으로 공부할 시간이 절대적으로 부족하게 되었다. 퇴근후 공부해보려 했으나 거의 하지 못했고, 시험 전주 토요일에 하루 공부하고 시험 전날 회사 업무를 쉴 수 있게 되어 그 날 밤새서 노란책 2회독하고 가서 시험을 보았다. sqld 시험 정보 SQLD 1과목 - 데이터 모델링의 이해 10문제 2과목 - SQL 기본 및 활용 40문제 문항별 점수 - 2점 과락 기준 - 과목별 40% 미만 합격 기준 - 60점 이상 시험시간 - 90분 기본 베이스 비전공자(의생명과학전공), 작년에 SSAFY교육 받으며 SQL문 기본 쿼리 작성.. 2023. 7. 1.

[Test Code] queryByText, findByText, getByText queryByText, findByText, getByText의 차이점 getByText, findByText, queryByText는 모두 react-testing-library 패키지에서 제공하는 함수로, 특정 텍스트를 가진 요소를 찾는 데 사용됩니다. 그러나 각 함수는 약간 다른 동작과 사용 사례를 가지고 있습니다. getByText: 동기적으로 요소를 찾는 함수입니다. 특정 텍스트를 가진 요소를 찾으면 해당 요소를 반환하고, 요소를 찾을 수 없는 경우에는 오류를 발생시킵니다. 주로 컴포넌트가 렌더링된 후에 특정 요소를 즉시 찾아야 하는 경우에 사용됩니다. 만약 요소가 없을 경우 테스트가 실패합니다. import { render, screen } from '@testing-library/react'.. 2023. 6. 29.

[Test Code] Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package) 원인 Error: Not implemented: HTMLCanvasElement.prototype.getContext 오류는 테스트 환경에서 getContext 메서드가 구현되지 않았을 때 발생합니다. 이 오류는 대개 테스트 환경에서 캔버스와 관련된 기능을 사용할 때 발생하는데, 테스트 코드에서 실제로 캔버스를 사용하려는 것이 아니라면 이 오류를 해결하는 방법이 있습니다. 😒궁금증 context 라는 것이 react의 context를 의미하는 것인가? HTMLCanvasElement.prototype.getContext 메서드의 "context"를 의미 HTMLCanvasElement.prototype.getContext 메서드는 HTML 캔버스 요소의 그리기 컨텍스트를 가져오는 메서드 이 메서드는 캔버.. 2023. 6. 29.

이전 1 2 3 4 ··· 10 다음

𝘭𝘶𝘮𝘪𝘯𝘰𝘶𝘴

𝐀𝐥𝐥 𝐏𝐨𝐬𝐭292

티스토리툴바

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31