profile
안녕하세요

[backstage][catalog]The Life of an Entity

The Life of an Entity 카탈로그 백앤드의 내부 동작 방식에 관련된 설명이다. 주로 카탈로그를 설치하거나 확장하려는 대상으로 한다. 핵심개념 카탈로그는 허버 역할을 한다. 다양한 출처에서 엔티티를 수집하고 데이터베이스에 저장한뒤, 자동 처리 후 API

2026년 3월 14일
·
0개의 댓글
·
post-thumbnail

[backstage][catalog] overview

중앙화된 시스템으로, 생태계에 있는 모든 소프트웨어(서비스, 웹사이트, 라이브러리, 데이터파이프라인 등)의 소유권과 메타데이터를 추적 및 관리합니다.카탈로그는 코드와 함께 저장되는 메타데이터 YAML파일이라는 개념을 중심으로 구축되며 이 파일들은 수집되어 backsta

2026년 3월 14일
·
0개의 댓글
·

[backstage] Technical overview

목적 및 탄생 배경\-> Backstage는 end-to-end 소프트웨어 개발을 단순화하기 위해 만든 오픈소스프레임워크입니다. 핵심구조 : 추상화 계층(Abstraction Layer)\-> Backstage는 모든 인프라와 개발도구 위에 위치하는 추상화 계층을 활용

2026년 3월 1일
·
0개의 댓글
·

[backstage] what is Backstage(overview)

회사에서 팀을 이동하게 되었는데 사용하는 프레임워크가 BackStage라서 관련 문서를 읽어 보게되었다.What is Backstage?정의: 스포티파이(Spotify)에서 만든 개발자 포털(Internal Developer Portal, IDP) 구축용 오픈소스 프레

2026년 3월 1일
·
0개의 댓글
·
post-thumbnail

[CSS] 기기별 화면 비율이 달라도 배경 이미지 속 특정 위치에 요소 고정시키기

이전 방식의 핵심 의도 요약브라우저 화면 높이를 꽉 채우되, 이미지가 잘리는 것(cover)을 방지하고 이미지의 전체 요소(캐릭터, 꽃 등)가 화면 안에 다 들어오게 하려는 의도였습니다.imageAreaGuide: 이름(nameOverlay)과 하단 정보(informa

2026년 2월 5일
·
0개의 댓글
·

4. 리액트의 고급개념

1.포털이란? 어떻게 생성하는가?:: 자식 컴포넌트를 부모 컴포넌트 DOM과 독립적으로 생성할 수 있는 기능이다. 보통 팝업창, 툴팁 같은 경우 포탈을 많이 사용한다.

2026년 1월 18일
·
0개의 댓글
·

3. 훅: 함수 컴포넌트에 state와 다른 기능 추가하기

훅이란?:: 함수 컴포넌트가 리액트 생명주기와 state를 연결하는 수단이다.훅의 도입 배경은?:: 컴포트간 재사용이 어렵고, 로직의 캡슐화가 어려웠다.e.g) 창의 너비를 감지하는 custom hook을 생성해보자 위에 custom hook 을 A컴포넌트에서 사용할

2026년 1월 12일
·
0개의 댓글
·

Context API 란?

보통 props를 통해 상위 컴포넌트가 하위 컴포넌트한테 데이터를 전달을 한다. 이를 props drilling이라고 하는데 잘못하면 불필요한 컴포넌트의 리렌더링까지 일으 킬 수 있다. 이를 위헤 전역적으로 데이터를 관리할 수 가 있는데 스토어를 사용하거나 contex

2026년 1월 11일
·
0개의 댓글
·

[리액트 인터뷰 가이드] 리액트의 기본 개념과 이해(part2)

가상 DOM이란?:: 웹페이지 UI는 DOM이라는 Tree로 나타낸다. 리액트 컴포넌트에 의해 생성된 실제 DOM의 메모리상 경량화된 가상 표현이다. 리액트는 가상 DOM을 생성해서 변경된 데이터를 감지해서 화면에 리렌더링을 일으킨다. 이 과정을 재조정(reconcil

2025년 12월 30일
·
0개의 댓글
·

[리액트 인터뷰 가이드] 리액트의 기본 개념과 이해

리액트 소개 JSX 요소와 컴포넌트를 이용한 뷰 구축 컴포넌트란 무엇인가? :: 컴포넌트란 UI를 더 작은 조각으로 나누어 독립적이며, 재사용가능한 코드 블록이다. 컴포넌트를 생성하는 방법에는 무엇이 있는가? :: 2가지가 있다. 함수형 컴포넌트와 클래스형 컴포넌

2025년 12월 29일
·
0개의 댓글
·

greedy

각 단계에서 최적의 해를 선택하는 방식이다. 그러나 각 단계에 최적의 해가 전체의 최적의 해가 되지는 못한다. 그리디의 단점이다.단적인 예시가 아래 슬라이딩 윈도우로 풀었던(https://velog.io/@berry_hennie/sliding-window) 카

2025년 10월 21일
·
0개의 댓글
·

슬라이딩윈도우

슬라이딩 윈도우란?연속된 데이터에서 일정한 크기의 창을 설정하고 이 윈도우를 하나씩 이동 시키면서 데이터를 효율적으로 처리하는 기법이다.문제N개의 카드가 있고, 양쪽 끝 왼쪽 끝카드를 둘 중 하나 가져갈 수 있다. 양끝에서 가져가는 방식으로 k개의 카드를 가져갈 수 있

2025년 10월 21일
·
0개의 댓글
·

파일 업로드 구현

파일 업로드 구현관련해서 바닐라JS와 React 코드를 비교하기로 한다.가장 먼저, 바닐라JS에서의 코드이다.동적으로 태그를 추가해서 구현하는것이 일반적인 케이스이다.React에서의 코드는이떄 브라우저는 client가 서버에게 파일 저장하라고 하기전에 임시로 파일을 메

2025년 10월 16일
·
0개의 댓글
·

useMemo를 통한 무한 렌더링 방지

query 코드호출하는 컴포넌트 코드🔄 왜 useMemo를 사용해야 했을까?📌 문제 상황usePublishingGroupQuery에서 deployedPublishingGroup을 다음과 같이 정의했을 때:이 코드가 매 렌더링마다 새로운 배열 객체를 생성하게 되면서,

2025년 10월 16일
·
0개의 댓글
·

무한호출

React 렌더링 사이클 상태 변경 → setState 호출 리렌더링 → 컴포넌트 함수 재실행 useEffect 체크 → 의존성 배열의 값들이 이전과 다른지 비교 useEffect 실행 → 의존성이 변경되었다면 effect 함수 실행 무한 루프가 발생하는 이유

2025년 9월 13일
·
0개의 댓글
·

타입 호환성

타입은 여러개의 값을 포함하는 '집합'이다. number라는 집합은 여러개의 숫자 리터럴로 이루어진 집합이다.e.g) -20, Infinity, 1234123,2,....예를 들어 20이라는 타입에 속하는 요소인 숫자 20은 20이라는 타입 외에도 number라는 타입

2025년 9월 1일
·
0개의 댓글
·
post-thumbnail

[TypeScript] Generic 타입은 언제 쓰면 유용할까?

타입스크립트를 처음 배울 때 Generic이라는 개념을 마주치면 '이건 대체 왜 있는 걸까?' 하는 생각을 한 번쯤 해보셨을 겁니다. 저도 그랬으니까요! 하지만 제네릭은 타입스크립트를 강력하게 만들어주는 핵심 기능 중 하나입니다.타입스크립트 공식 문서에서는 제네릭을 이

2025년 8월 11일
·
0개의 댓글
·
post-thumbnail

🌵 React에서 무한스크롤 기능 구현하기

요즘 소셜 미디어나 뉴스 피드를 보면 콘텐츠가 끝없이 이어지는 경험을 쉽게 할 수 있습니다. 사용자가 페이지를 아래로 스크롤하면 새로운 콘텐츠가 자연스럽게 로드되는 것, 이것이 바로 무한 스크롤(Infinite Scroll) 입니다.이번 포스트에서는 왜 무한 스크롤이

2025년 8월 10일
·
0개의 댓글
·

[worklog] 앱 미설치 시 Detail Page로 유도하는 팝업 기능 구현기

특정페이지(ChannelMap, TravelService, LG Channels) 진입시 필요한 앱 미설치시 Detail Page 로 이동할 수 있도록 팝업을 출력하는것이 요구조건이다.. 예를들면, TraverlService 페이지 접속시 TraverlService 설

2025년 8월 4일
·
0개의 댓글
·

[design pattern] Proxy pattern

대상 객체에 접근하기전에 그 접근에 대한 흐름을 가로채 해당 접근을 필터링 하거나 수정하는 등의 역할을 하는 계층이 있는 다지인 패턴이다.클라이언트(사용자)와 서버 사이 중간에 위치하여 요청을 대신 처리해주는 서버이다. 사용자가 직접 서버에 접근하지 않고 프록시 서버를

2025년 8월 4일
·
0개의 댓글
·