전체 글

[AI와 함께] 로그인 개선하기

Next.js 로그인 로직 리팩토링: 67줄에서 7줄로목차배경문제점 분석리팩토링 과정최종 결과향후 개선사항배경프로젝트의 로그인 시스템을 개선하는 과정에서, "비로그인 상태에서 특정 페이지 접근 시 로그인 후 원래 페이지로 돌아가기" 기능을 추가하게 되었습니다.이 기능을 구현하면서 기존 로그인 로직의 문제점들이 발견되어, 전면적인 리팩토링을 진행했습니다.기술 스택Framework: Next.js 13 (Pages Router)Language: TypeScriptState Management: RecoilStyling: styled-componentsAuthentication: 카카오 OAuth + 자체 기업 로그인문제점 분석1. 로직 분산 문제로그인 관련 로직이 여러 파일에 흩어져 있었습니다.로그인 처리가..

[AI와 함께] 어드민 개선하기1

Next.js 관리자 시스템 리팩토링: 공통 로직 구분과 인증 시스템 개선프로젝트 개요Next.js 관리자 시스템에서 발생한 주요 문제점들을 해결하기 위해 두 가지 핵심 영역에서 리팩토링을 진행했습니다.🎯 해결하고자 했던 문제들공통 로직 중복 문제50개 이상 페이지에 동일한 인증 코드 반복필터, 테이블 컴포넌트 중복 구현유지보수 포인트 과다인증 시스템 문제로그인/로그아웃 후 UI 즉시 반영 안됨localStorage와 쿠키 혼용으로 인한 보안 취약점불필요한 데이터 저장 및 중복 저장공통 로직 구분🔍 문제 상황기존 시스템에서는 거의 모든 페이지에 동일한 인증 로직이 반복되어 있었습니다.페이지별 중복 인증 코드:// src/pages/board/banner/index.tsx (기존)import { Get..

📱 iOS에서만 발생한 무한 렌더링 이슈, 그리고 그 원인(next/image, webp)

❗ 문제 상황데스크탑과 안드로이드에서는 정상적으로 열리는 페이지가 iOS 기기에서만 무한 렌더링 또는 앱 크래시 현상을 일으키는 이슈가 발생했다.사파리 브라우저에서 해당 URL에 접속하면 아래와 같은 현상이 발생했고,동일 URL을 React Native WebView 기반의 앱에서 열면 앱이 강제로 리로딩되며 메인 페이지로 튕기는 현상이 발생함.이는 우리가 새롭게 오픈한 중요 서비스의 메인 페이지였기 때문에, 빠르게 원인을 찾아야만 했다. 🕵 원인을 추적하기 시작했다전날까지만 해도 해당 페이지는 정상 작동했기 때문에, 최근의 코드 변경이 원인일 수 있다고 판단했다.바로 어제 배포한 코드로 롤백했지만, 여전히 동일한 문제가 발생......!!!!!의심이 가는 부분을 중심으로 _app.tsx, layou..

[SQL] 데이터 모델링, 엔터티, 식별자

데이터 모델링 중복, 비유연성, 비일관성 개념적 데이터 모델링 - 추상화 수준 높고, 업무중심적, 포괄적 논리적 데이터 모델링 - 속성, 관계 등을 정확하게 표현 물리적 데이터 모델링 - 실제로 쓸 수 있도록 성능, 저장 고려 외부 스키마 - 개개인 사용자가 보는 개인적 DB 스키마 개념 스키마 - 모든 사용자 관점을 통합한 전체 스키마 내부 스키마 - 물적적 장치에서 데이터가 실제적 저장 ERD 작성 순서 : 그리고 배치하고 관계설정하고 관계명 기술하고 참여도 기술하고 필수여부 기술 엔터티 엔터티 : 업무에 필요하고 유용한 정보를 저장, 관리하기 위한 집합적인 것 특징 : 유일한 식별자에 의해 식별 가능, 두 개 이상의 인스턴스 집합, 업부 프로세스에 이용, 반드시 속성 필요, 다른 인터테와 1개 이상..

[SQL] REPLACE, NVL, ISNULL, NULLIF, NVL, COALESCE

REPLACE 함수 REPLACE(a,b,c) a에 b값을 c로 치환하고 c값이 없으면 a에서 b의 값 삭제 예를들어 tab1이라는 테이블이 있고 C1 칼럼에 A(줄바꿈)A 로우와 B(줄바꿈)B(줄바꿈)B 로우가 있다고 가정하자 SELECT SUM(CC) FROM ( SELECT (LENGTH(C1) - LENGTH(REPLACE(C1, CHR(10))) +1) CC FROM TAB1) C1의 길이는 줄바꿈 포함해 3,5 LENGTH(REPLACE(C1, CHR(10))) 는 줄바꿈을 제거한 문자의 길이 2,3 NVL, ISNULL, NULLIF, 오라클 NVL이고 sql은 ISNULL NVL(표현식1, 표현식2) - 표현식 1이 null이면 표현식2 반환 NULLIF(표현식1, 표현식2) - 표현식1과..

[SQL] START WITH, CONNECT BY, PRIOR, ORDER SIBLINGS BY

START WITH, CONNECT BY, PRIOR, ORDER SIBLINGS BY table TAB1 C1 C2 C3 1 A 2 1 B 3 1 C 4 2 D SELECT C3 FROM TAB1 START WITH C2 IS NULL CONNECT BY PRIOR C1 = C2 ORDER SIBLINGS BY C3 DESC result C3 A C B D START WITH C2 IS NULL : 시작점을 정의. 여기서 시작점은 C2가 NULL인 행. CONNECT BY PRIOR C1 = C2 : CONNECT BY 절은 부모와 자식 사이의 계층 구조를 정의 여기서는 현재 행의 C1 값이 이전 행의 C2 값과 일치하는 경우 연결된다. ORDER SIBLINGS BY C3 DESC : ORDER SI..

[SQL] 중첩집계함수, SQL 실행순서, 이너조인, 아우터조인

중첩 집계 함수 중첩된 집계 함수 - 하나 이상의 집계 함수가 서로 중첩되어 사용되는 경우를 의미 SELECT 메뉴ID, 사용유형코드, AVG(COUNT(*)) AS AVGCNT FROM 시스템사용이력 GROUP BY 메뉴ID, 사용유형코드; AVG(COUNT(*))와 같은 구문에서는 COUNT 함수가 먼저 실행되어 각 그룹에서 레코드 수를 계산하고, 이후 AVG 함수가 이 레코드 수의 평균을 계산하려고 시도하는데 이는 각 그룹에 대한 평균을 계산하기 위해 이미 계산된 값들에 대해 또 다른 집계 함수를 적용하려고 하기 때문에 문제가 발생 중첩된 집계 함수를 사용하려는 경우에는 서브쿼리를 활용하여 중첩된 집계 함수를 방지할 수 있음 SQL 실행순서 FROM -> WHERE -> GROUP BY -> HAV..

자바스크립트 Object.defineProperty()

Object.defineProperty() Object.defineProperty(obj, prop, descriptor) - 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정하고 수정된 객체를 리턴 obj - 속성을 정의할 객체. prop - 새로 정의하거나 수정하려는 속성의 이름 또는 [Symbol] descriptor - 새로 정의하거나 수정하려는 속성을 기술하는 객체. 속성 서술자(descriptor)는 데이터 서술자(data descriptors)와 접근자 서술자(accessor descriptors) 두 가지 형식을 취할 수 있습니다. 데이터 서술자는 값을 가지는 속성을 기술할 때 사용합니다. configurable속성의 값을 변경할 수 있고, 객체에서 삭제할 수도 있으면 tru..

누구나 자료구조와 알고리즘 #1

자료 구조가 중요한 까닭 좋은 코드 품질은 코드 유지 보수성(가독성, 조직, 코드 모듈성), 효율성 등을 가지고 있다 자료 구조란 데이터(가장 기초적인 수와 문자열로 이뤄짐)를 조직하는 방법 데이터 조직이 코드의 실행 속도에 미치는 영향이 크다 데이터를 어떻게 조직하는가에 따라 프로그램은 수십 수백 배 더 빠르게 혹은 더 느리게 실행 될 수 있다 그러므로 다양한 자료 구조를 알고, 각각의 자료 구조가 개발중인 프로그램의 성능에 어떤 영향을 미칠지 확실히 이해해야 한다. 배열 배열 : 단순히 데이터 원소들의 리스트 배열의 크기 - 배열의 데이터 원소의 개수 배열의 인덱스 - 특정 데이터가 배열의 어디에 알려주는 숫자(인덱스는 0부터 시작) 자료 구조 연산 대부분의 자료 구조는 네 가지 기본 방법을 사용하며..