최신 글
-
(번역) CSS content-visibility를 이용해 렌더링 성능 향상 시키기
원문: https://nolanlawson.com/2024/09/18/improving-rendering-performance-with-css-content-visibility/기존 번역문: https://velog.io/@superlipbalm/improving-rendering-performance-with-css-content-visibility💡기존 번역문을 좀 더 읽기 쉽게 바꾸고 설명을 추가한 번역문입니다. 최근에 emoji-picker-element(이모지를 선택할 수 있게 해주는 웹 컴포넌트)에서 흥미로운 성능 이슈가 발견되었습니다.19,000 개의 커스텀 이모티콘이 있는 페디버스 인스턴스를 사용 중인데 ... 이모티콘 선택기를 열면 페이지가 최소 1초 동안 멈추고 그 후에도 한동안 전반..
2024.11.04
-
매크로 태스크 큐(Macro Task Queue), 애니메이션 프레임 큐(Animation Frame Queue), 마이크로 태스크 큐(Micro Task Queue)
자바스크립트 런타임의 큐에는 매크로 태스크 큐(태스크 큐), 애니메이션 프레임 큐, 마이크로 태스크 큐가 있습니다. 이 큐간의 우선순위는 위 사진과 같이 마이크로 태스크 큐가 가장 우선순위가 높고 애니메이션 프레임 큐, 매크로 태스크 큐의 순서대로 순위가 매겨져 있습니다. 매크로 태스크 큐 (Macro Task Queue)매크로 태스크 큐 또는 태스크 큐라고 불리우는 큐입니다. 자바스크립트의 콜 스택이 모두 비워져 이벤트 루프가 작동 시 매크로 태스크 큐에 태스크가 있다면 해당 태스크를 콜 스택으로 옮겨 실행합니다. 매크로 태스크 큐의 특징은 이벤트 루프 1번 수행시 1개의 태스크만 실행된다는 것입니다. 매크로 태스크 큐에는 setTimeout, setInterval, DOM, I/O, Network r..
2024.10.29
-
전역 에러 바운더리와 지역 에러 바운더리 (feat.Sentry)
API 에러 발생시 먼저 지역 Error Boundary인 API 에러 바운더리에 에러가 전달된다.API 에러 바운더리가 에러를 처리하면 해당 에러 Sentry로 전달 → 전역 에러 바운더리는 관여하지 않음API 에러 바운더리가 에러를 처리하지 않고 throw하면 → 전역 에러 바운더리가 캐치지역 에러 바운더리가 throw한 에러는 전역 에러 바운더리가 캐치하게 되고 해당 에러를 Sentry로 전달한다.
2024.10.22
-
Next.js에서의 GSAP 사용
1. DOM 요소일때단일 요소일 경우 useRef를 사용import React, { useRef } from 'react';import { gsap } from 'gsap';import { useGSAP } from '@gsap/react';const AnimatedComponent = () => { // ref 생성 const boxRef = useRef(null); useGSAP(() => { // ref가 가리키는 요소에 애니메이션 적용 gsap.from(boxRef.current, { opacity: 0, y: 50, duration: 1, ease: "power3.out" }); // useGSAP이 자동으로 cleanup을 처리하므로 ..
2024.10.22
-
Jenkins로 nest.js CI/CD 적용하기 - Jenkins 설치
최근 개발 중인 백오피스 앱에 Jenkins를 활용해 CI/CD(지속적 통합 및 지속적 배포)를 적용하여 배포 자동화를 구현했습니다. 이 앱은 Nest.js를 기반으로 개발되었지만, CI/CD 파이프라인 설정은 Node.js 기반 앱 전반에 적용할 수 있도록 구성되었습니다.예를 들어, npm run build와 같은 명령어를 사용해 배포를 자동화하기 때문에, Node.js로 개발된 다른 프로젝트에도 쉽게 적용할 수 있습니다. 1. Java 설치먼저 서버에 Java를 설치해야합니다.Jenkins는 Java 기반의 애플리케이션이므로 Java가 설치되어 있지않다면 Java를 먼저 서버에 설치합니다.설치하기 전에 서버에 설치 가능한 자바 버전들을 확인합니다.// 설치할 수 있는 자바 버전 확인yum list |..
2024.08.13
-
다중 포인터 패턴(Multiple Pointers)
다중 포인터 패턴(Multiple Pointers Pattern)은 배열이나 연결 리스트와 같은 선형 자료 구조에서 두 개 이상의 포인터를 사용하여 반복적인 처리를 최적화하는 알고리즘 설계 기법입니다. Example정수의 정렬된 배열을 받아들이는 sumero라는 함수를 작성합니다. 이 함수는 합이 0인 첫 번째 쌍을 찾아야 합니다.합이 0이 되는 두 값이 있을 경우 해당 값들을 포함하는 배열을 반환합니다.쌍이 존재하지 않는 경우 undefined 배열을 반환합니다.sumzero ([-3, -2, -1,0,1,2,3]) // [-3,3]sumzero ([-2,0,1,3]) // undefined sumzero ([1,2,3]) // undefinedSolutionfunction sumZero(arr) { ..
2024.06.27
-
[빈도수 세기 패턴] 애너그램(Anagram) 찾기
애너그램(Anagram)은 하나의 단어나 문구의 문자를 재배열하였을 때 다른 단어나 문구가 나오는 것을 의미합니다. 애너그램에서 중요한 점은 원래 단어나 문구에서 사용된 문자의 수와 종류가 정확히 일치해야 한다는 것입니다. 예를 들어, "listen"은 문자를 재배열하여 "silent"로 만들 수 있으므로 이 둘은 애너그램 관계에 있습니다. 문제두 개의 문자열이 주어졌을 때, 두 번째 문자열이 첫 번째 문자열의 애너그램인지 확인하는 함수를 작성합니다. 애너그램은 다른 글자의 글자를 재배열하여 형성된 단어, 구 또는 이름입니다. (예시: cinema -> iceman) 문자열에 소문자만 포함되어 있다고 가정해도 됩니다.예시validAnagram('', '') // truevalidAnagram('aaz',..
2024.06.27
-
빈도수 세기 패턴 (Frequency Counter)
빈도수 세기 패턴(Frequency Counting Pattern)은 배열이나 문자열과 같은 데이터 구조에서 각 요소의 출현 빈도를 계산하여 문제를 해결하는 알고리즘 기법입니다. 이 패턴은 다양한 문제에서 사용될 수 있으며, 주로 중복 요소를 찾거나 두 데이터 구조의 유사성을 비교하는 데 유용합니다. 예를 들어, 아나그램 판별, 유니크 요소 찾기, 중복 요소 제거 등이 있습니다. - ChatGPT 예를 들어 여기 두 배열이 있다. 첫 번째 배열의 각 요소의 제곱이 두 번째 배열에 포함되어야 하며, 두 배열의 요소 빈도가 동일해야 한다.Example[1, 2, 3], [4, 1, 9] // true[1, 2, 3], [1, 9] // false, 빈도가 동일해야 한다.[1, 2, 1], [4, 4, 1] ..
2024.06.26
-
revalidatePath();
revalidatePath()는 Next.js에서 제공하는 캐시 관련 함수입니다. 해당 함수에 넘겨진 페이지의 캐시를 재검증하여 페이지의 변경된 부분만 새로고침 없이 업데이트합니다. Next.js에서는 서버 컴포넌트 페이지와 클라이언트 컴포넌트 페이지가 있습니다. 클라이언트 페이지에서는 useState를 이용해 변경된 상태를 페이지에 바로바로 재렌더링할 수 있지만, 서버 컴포넌트인 SSR과 SSG는 초기에 한번 렌더링되고 난 후 재렌더링이 되지않습니다. 이때 서버 컴포넌트에 새로고침 없이 변경된 부분을 적용해야할때(새로운 컨텐츠를 추가한 뒤, 서버 컴포넌트 페이지에서 모든 컨텐츠들을 다시 로드 해야할때) revalidatePath()가 사용됩니다. 서버 컴포넌트는 클라이언트 컴포넌트에서 사용하는 useS..
2024.03.04
-
useFormStatus();
useFormStatus()는 요소의 submit에 대한 상태 정보를 제공하는 react-dom Hook입니다. const { pending, data, method, action } = useFormStatus(); useFormStatus()는 요소 안에서 사용해야합니다. 또한 'use client' 선언이 된 클라이언트 컴포넌트에서만 사용이 가능합니다. 이는 useFromStatus()가 부모인 요소의 submit 상태에 따라 비동기적으로 클라이언트 사이드의 UI를 변경할 것이기때문입니다. 'use client'; import { useFormStatus } from "react-dom"; import action from './actions'; export default function App()..
2024.03.04
-
SQLite 데이터베이스
SQLite는 경량 데이터 베이스입니다. 클라이언트와 서버간의 통신없이 모든 데이터를 로컬에 저장합니다. 그렇기때문에 서버를 구축할 필요가 없습니다. 또한 독립적인 데이터베이스여서 외부의 종속성이 없습니다. 그러므로 다양한 언어와 다양한 시스템에서 사용 가능합니다.트랜잭션도 지원하기 때문에 데이터의 안정성 또한 보장됩니다. 자바스크립트에서 SQLite의 사용SQLite의 쿼리문은 db.prepare("쿼리")로 작성합니다.그 후 데이터를 하나만 가져올 경우엔 prepare뒤에 .get(), 데이터를 여러개 가져올 경우엔 .all()을 사용합니다.데이터를 insert하거나 update할때는 prepare뒤에 .run()을 사용합니다.db.prepare('SELECT * FROM meals').all();d..
2024.02.28
-
슬러그(slug)란?
웹 개발에서 'slug'라는 용어는 URL의 일부로 사용되어 페이지의 내용을 설명하는 읽기 쉬운 키워드를 말합니다. 일반적으로 URL 끝에 있으며 해당 페이지를 고유하게 식별할 수 있도록 해주는 부분입니다. 그렇기 때문에 보통 유니크한 값으로 설정하여 다른 페이지와 중복이 없도록 합니다. 예를 들어, 블로그 게시물에 대한 URL이 'http://www.example.com/posts/my-first-blog-post'라면, 여기서 'my-first-blog-post'부분이 'slug'입니다. 이는 해당 페이지의 내용을 간략하게 나타내며, 검색 엔진 최적화(SEO)에도 도움을 줍니다. 이러한 슬러그(slug)의 어원은 인쇄 산업에서 유래되었습니다. 전통적인 인쇄에서, 'slug'는 조판을 위해 사용되는 금..
2024.02.26
-
Image 컴포넌트를 이용한 이미지 최적화
기본 html인 요소인 와 다르게 지연 로드(Lazy Load)가 됨. 웹페이지 접속시 로드되는게 아니라 화면에 보여질 때 해당 이미지 로드 가능.srcset속성을 자동으로 생성해주어 뷰포트와 접속기기에 따라 알맞은 이미지를 제공해줌.사용자의 브라우저에 가장 알맞은 이미지 포맷으로 변환하여 이미지를 제공해줌. (이미지 원본은 .png이지만 크롬으로 접속시 .webp로 변환하여 제공) 주의해야할 점은 을 사용했을때는 의 src 속성에 logoImg.src를 넣어 주었지만, Next.js의 를 사용할때는 src 속성에 logoImg.src가 아닌 이미지 요소 전체인 logoImg를 넣어줘야 width, height를 설정하지 않아도 되게 된다는 것이다. 왜냐하면 기본적으로 Next.js의 컴포넌트는 과다한..
2024.02.26
-
모바일 safari 브라우저에서 더블탭시 확대 막기
아이폰 사파리에서 버튼 등의 요소를 두번 터치시에 브라우저가 확대되는 기능으로 인한 불편을 막기 위해 css의 'touch-action:manipulation;'을 사용하여 더블탭시 확대를 방지합니다. .button-medium { touch-action:manipulation;} "패닝 및 핀치 줌 제스처는 활성화하되, 두 번 탭하여 줌과 같은 추가적인 비표준 제스처는 비활성화합니다." - mdn web docs mdn docs의 설명과 같이 touch-action:manipulation;을 사용시 기본적인 확대/축소 기능은 살린 채로 더블 탭시 확대되는 제스처를 비활성화 할 수 있습니다.
2024.02.26
-
탄소 해적
탄소 해적이라는 말이 있다고한다.현재 세계는 기후 온난화로 인해 파리에서 기후협약을 맺고 탄소 줄이기등을 실천사항으로 밀고 있다. 이를 위해 기업들은 너도나도 앞다퉈 탄소중립을 실천한다고 하고 해당 로고를 자랑스럽게 제품에 표시해둔다. 탄소중립은 기업이 탄소를 배출하는 만큼의 나무를 심음으로써 발생한 탄소를 상쇄해 중립을 이룬다는 것인데, 이로써 해당 기업은 친환경적인 기업이 되는 것이다. 하지만 실상은 다르다. 기업들은 탄소를 배출한 만큼 나무를 심어야하지만 빠르고 쉽게 해결하기위해 기존의 삼림들의 일부분을 탄소중립을 위해 구매한다. 지구의 허파라고 불리는 아마존이 대표적인데, 아마존의 일부를 국토로 소유하고 있는 페루에서는 기업들에게 삼림의 일부를 탄소배출권을 위해 판매했다. 해당 삼림은 대대로 원주..
2024.02.20
-
React에서 Fragments를 사용하는 이유
1. React.createElement컴포넌트, App.js등에서 return 할때는 하나의 요소만 반환할 수 있는데, 그 이유는 return하는 부분의 JSX 코드를 들여다보면 알 수 있다.return( React.createElement('h2', {}, 'Hi there!') React.createElement('p', {}, 'This does not work :-('));위의 코드는 JSX에서 return하는 부분의 코드를 자세하게 들여다 본 것인데, 우리는 보통 return을 아무렇지 않게 쓰지만 실제로는 반환되는 요소는 React.createElement로 생성된다. return시에는 1개의 요소만 반환할 수 있어 React.createElement가 두개가 있는 위와 같은 코드는 작동하지..
2023.09.04
-
SSL 인증서 (보안서버 인증서)
SSL(Secure Socket Layer)인증서 란? 우리가 접속하는 웹 브라우저와 서버간 암호화 통신을 하게 해주는 인증서로 즉 웹 상에서 고객이 입력한 정보가 웹 서버로 이동하는 구간을 암호화 해서 전달 합니다. 이로써 중간에 정보를 가로채는 공격을 막아 주는 역할을 합니다. 정보통신망법 및 개인정보보호법에 따라 개인정보를 취급하는 웹사이트라면 필요 최소한의 보안 조치로써 보안서버인증서(SSL)를 반드시 설치해야 합니다. 보호조치가 되어 있지 않을 경우와 보호조치가 되지않았고 개인정보가 분실,도난,유출,변조,훼손시 각각 3천만원 이하의 과태료, 2년이하 징역 또는 1천만원이하의 벌금에 처해질 수 있음. SSL구조 기존의 http 프로토콜이 전달 되는 구조는 아래와 같다. 하지만 이렇게 전달하게 될 ..
2022.11.24
-
타입스크립트 필수 문법
1. 변수에 타입 지정하기 let 이름 : string = 'kim'; 변수에 문자만 들어올 수 있도록 타입을 'string'으로 지정 2. 배열에 타입 지정하기 let 이름 : string[] = ['kim', 'park']; 배열안의 값은 문자만 들어올 수 있도록 배열 타입을 'string'으로 지정 3. 객체에 타입 지정하기 let 이름 : {name:string} = {name:'kim'}; 객체내의 값은 문자만 들어올 수 있도록 객체 타입을 'string'으로 지정 4. 타입스크립트 객체에 해당 속성이 들어올지 아닐지 불확실할때 let 이름 : {name?:string} = {}; 'name'속성 뒤에 ?를 넣어 해당 속성은 옵션 값임을 선언, 해당 속성이 안들어오더라도 오류가 발생하지 않음 5..
2022.11.24
-
DNS, 도메인, A레코드, CNAME
DNS (Domain Name System) 인터넷을 구성하고 있는 IP 주소는 IPv4의 경우 192.168.0.1 같이 숫자로 구성된다. 이런 숫자는 아무런 의미도 없기 때문에 외우기 힘들다는 단점이 있다. 따라서 naver.com 같은 문자열로 서버 주소를 표현하게 되었다. 다만 실제 컴퓨터 통신에서는 naver.com이라는 문자열 주소를 192.168.0.1 같은 IPv4 주소로 변환해주는 서비스가 필요하다. 이런 서비스를 DNS 서비스라고 한다. DNS는 Domain Name System의 약자로 naver.com 같은 문자열 주소를 IP 주소로 해석해주는 네트워크 서비스를 말한다. DNS 또는 Domain Name System은 사람이 읽을 수 있는 도메인 이름(예: www.google.com..
2022.11.24
-
출력 버퍼링 함수
PHP 출력 버퍼링 함수란 PHP의 좋은 점 중 하나는 PHP의 모든 출력을 버퍼에 담을 수 있다는 점입니다. 즉 출력이 직접 그 내용을 전송하기 전까지 브라우저로 전송되지 않게 할 수 있습니다. 이 함수는 header()나 setcookie()함수와 같이 내용이 전송되기 전에 호출되어야 하는 함수와 같이 사용됩니다. 출력 버퍼링 함수는 완전 동기 함수기때문에 출력 버퍼링이 종료되기전까지 다른 모든 작업이 중지되고, 출력 버퍼링 작업의 완료를 기다립니다. ob_start() 버퍼링을 시작하는 이 함수는 PHP 실행기에게 (헤더를 제외한) 스크립트의 모든 출력을 내부 버퍼에 저장하고, 브라우저에게는 전송하지 않습니다. ob_get_contents() 이 함수는 내부 버퍼의 내용을 문자열로 리턴해 줍니다. ..
2022.08.31
-
http의 기본 포트 80, https의 기본 포트 443
많은 사용자들이 url에 포트 번호가 존재한다는 것을 잘 모른다. 또 url에 포트 번호를 딱히 적지 않아도 접속이 잘 되는걸 볼 수 있다. 그 이유는 포트 번호를 생략하더라도 기본 포트로 약속된 번호들이 있어 해당 포트를 이용해 접속하기 때문이다. 1. 서론 인터넷 프로토콜은 http와 https가 있는데, 각각 80번과 443번 포트를 기본 포트로 사용하고있다. 이는 IANA (Internet Assigned Numbers Authority)와 관련이 있는데, IANA에서는 1990년 3월에 그 당시 알려져있던 모든 포트 번호를 기술한 문서(RFC 1060)을 만들었다. 아래와 같이 문서의 79번 다음에는 80번이 아닌 81번이 기술되어있었다. 그 당시에 80번 포트는 공식적으로 비워져있었던 것이다...
2022.08.25
-
가비아에서 로드밸런서 세팅하기
로드밸런서란? "서버의 부하를 다수의 서버로 분산시켜 증가하는 트래픽에 대응할 수 있는 네트워크 서비스입니다." 프로젝트에 포함된 즉석당첨 이벤트로 인해 다른 프로젝트 대비 트래픽이 많이 발생될 것이 예상되었다. 이로 인한 서버 다운을 막는 방안은 크게 2가지가 있는데, 단일 서버만으로 서버 자체의 용량을 크게 구축하여 트래픽을 감당하는 것과 다중 서버를 로드밸런서를 이용해 트래픽을 나눠주는 방법이다. 첫번째는 로드밸런서를 대여하는 추가비용이 들지않는다는 장점이 있지만 가비아에서 처음 서버 대여후에는 서버의 용량이나 SSD냐 HDD냐의 옵션 등을 다시 선택할 수 없고 그로인해 처음 세팅시에 트래픽을 임의로 예상하여 세팅해야 하기때문에 실제 트래픽보다 서버 용량을 적게 세팅하거나 크게 세팅하여 서버 다운이..
2022.08.25
