분류 전체보기

📱 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부터 시작) 자료 구조 연산 대부분의 자료 구조는 네 가지 기본 방법을 사용하며..

리액트 프레임워크 Next.js! Gatsby!

Next.js, Gatsby 알아보자 리액트 프레임워크 중 대표적인 것들을 비교해보자 https://nextjs.org/ https://www.gatsbyjs.com/ 공통점으로 리액트로 프로그램을 만들면 디폴트로 클라이언트 사이드 렌더링이 된다. 즉 유저가 웹 사이트로 이동한 후에 js를 다운 받고 리액트가 UI를 빌드하게 된다. -> 인터넷 문제가 있거나 js파일에 문제가 있거나 하면 유저는 빈 화면만 보게 된다. -> 리액트만 사용해 해결해도 되지만 이 프레임워크들을 서버사이드 렌더링을 통해 문제를 해결할 수 있다. CSR의 문제점 중 하나인 SEO에 대한 문제를 프레임워크를 쓴다면 사용자에게 보여질 콘텐츠를 포함하고 있는 HTML 문서를 응답으로 전달하므로 해결할 수 있다. 👍 Next.js N..

Flux란?

Flux란 애플리케이션의 데이터 흐름을 관리하는 패턴을 말한다. Flux에서 중요한 것은 데이터의 흐름이 단방향으로 흐른다는 것이다. Front-End에 사용되는 프레임워크의 대부분은 MVC(Model-View-Controller) 디자인 패턴을 채택했었다. 그런데 MVC 패턴이 한계 명확하게 보여지면서 Flux 아키텍쳐가 등장하게 되었다. ✅ 그럼 MVC 패턴을 먼저 살펴보자 기존의 어플리케이션 환경에서 보편적으로 사용되는 패턴은 MVC였다. Model에 데이터를 정의해 두고, Controller를 이용해 Model 데이터를 생성 / 조회 / 수정 / 삭제(CRUD)하고, 변경된 데이터는 View에 출력되면서 사용자에게 전달되며 그림처럼 model과 view가 양방향 통신이 가능하다. MVC 패턴의 문..