react-query로 무한스크롤 구현

rq의 useInfiniteQuery와 IntersectionObserver를 사용해서 무한스크롤을 구현한 내용을 기록

2024-09-01

깃 머지 전략

협업을 위한 깃 머지 전략에는 무엇이 있을까

2024-07-28

Flux Pattern

Flux Pattern = 단향성 데이터 흐름

2024-06-28

추상화란 무엇인가?

객체지향의 중요 개념인 추상화에 대해 알아보자

2024-06-21

클래스(Class) & 인스턴스(Instance)

객체 지향 프로그래밍의 핵심 요소 : 클래스와 인스턴스

2024-06-16

[클라우드] 컨테이너 & 도커

컨테이너와 도커에대한 개념 알아보기

2024-06-05

[클라우드] IaaS & PaaS & SaaS

IaaS & PaaS & SaaS의 특징과 IaaS와 PaaS 비교

2024-06-04

[클라우드] Off-Premise & On-Premise

오프-프레미스(Off-Premise)와 온-프레미스(On-Premise)에 대한 개념

2024-06-04

[클라우드] 가상머신 (Virtual Machine)

가상머신 (Virtual Machine)에 대해서 알아보자.

2024-06-02

API에 대해서 알아보기

API(Application Programming Interface)는 둘 이상의 컴퓨터 프로그램이 서로 통신하는 방법이자 컴퓨터 사이에 있는 중계 계층을 의미한다.

2024-05-31

데이터 교환 형식 - JSON

JSON은 JavaScript 객체 문법**으로 구조화된 데이터 교환 형식이다. Python, JavaScript, Java 등 등 여러 언어에서 데이터 교환 형식으로 쓰이며 객체 문법 외에도 단순 배열, 문자열도 표현 가능하다.

2024-05-29

데이터 교환 형식 - XML

XML(Extensible Markup Language)이란 마크업 형태를 쓰는 데이터 교환 형식이다.

2024-05-29

React Query 캐싱 라이프사이클

React Query 캐싱 라이프사이클에 대해서 알아보자.

2024-05-19

합성 컴포넌트 (Compound Component)

항상 컴포넌트를 만들때마다 어떻게 하면 재사용성 좋은 컴포넌트로 만들지 에 대한 고민이 항상 존재했다. 이러한 고민을 해소하기 위해 여러 자료를 찾다가 발견한것이 바로 합성 컴포넌트. 완벽하게는 아니어도 잘 활용하기 위해 포스팅을 써본다.

2024-05-12

웹 브라우저에서 www.google.com을 입력했을 때 일어나는 일

프론트엔드 면접의 단골질문으로 나오는 문제이다. 한번 이번에 공부하면서 좋은 글,번역 글이 있어서 한번 정리할겸 작성해본다.

2024-05-05

zod 훑어보기

zod란? TypeScript와 JavaScript에서 사용할 수 있는 스키마 선언 및 유효성 검증 라이브러리이다. 런타임과 빌드 시점에 데이터의 형식과 구조를 정의하고 검증할 수 있게 도와준다.

2024-04-14

Suspense 사용하여 비동기 처리하기 (2)

데이터 패칭 라이브러리를 사용할 때 Suspense를 지원하는 라이브러리는 대표적으로 `React Query` 와 `Suspense` 가 있다. 이 둘을 사용하는 이유는 서버와의 API 통신과 비동기 데이터 관리가 편리하고 유리하기 때문이다.

2024-03-30

Suspense 사용하여 비동기 처리하기 (1)

`React Suspense`는 React.js 버전 16.6에서 소개된 기능이다. 이 기능을 사용하면 컴포넌트가 서버에서 데이터를 가져오거나 동적으로 코드를 불러오는 등의 비동기 작업이 완료될 때까지 렌더링을 일시적으로 일시 정지할 수 있다. 기존에는 React에서 비동기 작업을 처리하기 위해 `callback`, `Promise` 와 같은 방법으로 동작했다. 이러한 접근 방식은 작동하지만 여러 비동기 작업을 처리할 때 복잡하고 유지 관리하기 어려운 코드로 이어질 수 있다.

2024-03-24

Next.js 이미지 최적화

Next.js에서는 기본적으로 `<Image>` 컴포넌트를 제공해준다.이 이미지 컴포넌트는 이미지를 자동으로 최적화시켜준다. 1.최신 이미지 형식을 사용, 각 디바이스에 대응한 크기의 이미지 2.layout shift 방지 3.lazy loading

2024-03-03

포트원 인증 결제 모듈 사용기 in Next.js 13

인증결제는 신용카드 결제시 PG사로 부터 결제에 대한 인증 결과 수신 이후 해당 인증키로 결제를 요청하는 결제 방식을 지칭한다. 국내에서 제일 많이 볼수 있는 결제방식이며 결제 주문페이지에서 결제가 요청되면 각 PG사의..

2024-02-25

Next 13: Error Handling

예상치 못한 런타임 오류를 우아하게 처리: error.js 파일 규약을 사용하면 중첩된 라우트에서 예상치 못한 런타임 오류를 우아하게 처리할 수 있다.

2024-02-18

운영, 개발 브랜치 나눠서 배포해보기

이번에 프로젝트 오픈전에 운영과 개발 서버를 나눠서 진행하면 좋을 것 같아서 혼자서 테스트로 배포해보았다. 배포해보는 김에 이렇게 나눠서 진행하면 좋은지에 대해 한번 생각해보기 위해 간단하게 작성해본다. 보통 개발 단계, 테스트 단계, 스테이징(준운영) 단계, 그리고 실제 운영 단계에서 발생할 수 있는 다양한 동작 및 문제를 분리하여 다룬다.

2024-01-28

상태 관리를 URL로 구현하기

이번에 프로젝트를 시작하면서 `페이지(page)`와 `페이지 수(size)`, 그리고 여러개의 `필터값`을 통해 인플루언서를 검색하는 페이지를 개발하게 되었다. 맨처음 개발에 들어갔을 때, 최대한 빨리 레이아웃과 API 연동을 완료한 결과물을 보여줘야할 상황이었기 때문에 내 나름대로 간단하게 구현하였다...

2023-12-16

Reflow/Repaint 알아보기

최근에 Reflow와 Repaint에 대해서 알게 되었는데, 이 두가지가 웹 성능에 영향을 미치는지 알게 되었다. 웹 개발자로써 Reflow와 Repaint에 대한 지식을 내 것으로 만들기 위해 이 포스팅을 작성하게 되었다.

2023-11-11

[DB]Index란?

- 쉽게 찾아볼 수 있도록 일정한 순서에 따라 놓은 목록 - Index는 원하는 데이터를 빠르게 찾기 위한 기술로 DB에서는 `SELECT`문에 활용 가능 - 데이터가 특정 기준으로 정렬되어 검색 속도를 향상 시킬 수 있음. - DB 테이블에 대한 검색 성능을 향상시키는 구조로 `SELECT`문에서도 `WHERE`,`JOIN`,`ORDER BY`, `GROUP BY`절등에 활용

2023-10-14

[JPA] 영속성(persistence)

영속성이란? 정의 : 데이터를 오랜 기간 유지하거나 저장하는 속성 in JPA : 객체를 데이터베이스에 저장하고,필요할 때 다시 불러올 수 있는 속성 1. 비영속성 : JPA가 아직 모르는 상태. 새로운 객체를 생성하고, 영속성 컨텍스트나 데이터베이스와는 관련이없는 상태

2023-10-07

[DB]MySQL > EXPLAIN

`EXPLAIN`은 MySQL 서버가 어떠한 쿼리를 실행할 것인가, 즉 실행 계획이 무엇인지 알고 싶을 때 사용하는 가장 기본적인 명령어이다. 실행 하고자하는 쿼리 위에 explain을 붙여 주면 된다

2023-09-22

[JPA] N+1 문제

연관 관계가 설정된 엔티티를 조회 할 경우, 조회된 데이터 갯수(n)만큼 연관관계의 조회 쿼리가 추가로 발생하는 문제. 만약 쿠폰이라는 엔티티를 조회하는데, 연관 관계 유저와 미션을 조회한다고 가정해보자. 쿠폰 한개 행을 조회할 때 유저와 미션을 조회하는 쿼리가 같이 발생하기 때문에 한 행을 조회할때 쿼리가 3번 나간다.

2023-08-31

[JPA] 이미지 순서 변경 API 만들다가 배운것들

영속성이란? 정의 : 데이터를 오랜 기간 유지하거나 저장하는 속성 in JPA : 객체를 데이터베이스에 저장하고,필요할 때 다시 불러올 수 있는 속성 1. 비영속성 : JPA가 아직 모르는 상태. 새로운 객체를 생성하고, 영속성 컨텍스트나 데이터베이스와는 관련이없는 상태

2023-08-24

[JPA] Querydsl DTO 조회

Querydsl DTO로 조회하는 방법은 4가지가 있다. - Projection.bean - Projection.fields - Projection.constructor - @QueryProjection

2023-08-19

Spring 이벤트 리스너에서 @TransactionalEventListener 사용했을 때 후 작업이 저장 안된 이슈

DB 수정 작업후 로그를 DB에 저장하면 저장이 되지않는 이슈 발생 메소드가 실행되는 트랜잭션의 설정이나 범위가 올바르게 구성되어 있지 않으면 데이터베이스 작업이 롤백됨 => 첫번째 DB에서 transaction이 끊겨서 로그가 저장되지 않음

2023-08-12