HOME
[Next.js] document is not defined 오류 해결 방법
[Next.js] document is not defined 오류 해결 방법
2024.05.08Next.js는 서버 사이드에서 HTML을 생성하고 클라이언트에 전달한 후, 클라이언트에선 각 요소에 이벤트 핸들러를 달아서 실행 가능하도록 만든다(이를 Hydration이라고 부름)하지만 서버 사이드에서 HTML을 생성하는 시점엔 document 객체가 존재하지 않으므로 에러가 발생하는 것. document는 DOM(객체처럼 HTML을 조작할 수 있는 모델)에 접근할 때 사용하는 객체이며, 브라우저 환경에서만 접근할 수 있다.때문에 클라이언트에서 React 컴포넌트가 마운트된 후 document 객체에 접근하도록 해야 한다. react-no-ssr 같은 라이브러리를 사용하거나 useIsMounted 같은 커스텀훅을 사용하면 위 문제를 해결할 수 있다. 💡 useIsMounted 같은 커스텀 훅은 보통..
[TS] @ts-ignore, @ts-expect-error 타입스크립트 주석 차이점
[TS] @ts-ignore, @ts-expect-error 타입스크립트 주석 차이점
2024.05.08@ts-ignore, @ts-expect-error 두 주석 모두 타입스크립트의 타입 오류를 처리하는 방법을 제공하지만 @ts-expect-error는 개발자가 오류를 인식하고 있으며, 추후 수정할 의도가 있음을 명시적으로 나타낸다. 반면, @ts-ignore 주석은 단순히 오류를 무시한다. 코드 유지보수를 위해 가능한 @ts-expect-error 주석을 사용하는게 좋다. @ts-ignore특정 코드 라인에 타입 오류가 있더라도 컴파일러가 이를 무시하도록 지시해결 방법을 찾지 못했거나 일시적으로 오류를 무시하고 싶을 때 사용 @ts-expect-error코드에서 타입 오류가 예상되는 경우, 이를 명시적으로 선언하면서 오류를 무시할 때 사용예상한 오류가 실제로 발생하지 않으면 해당 주석이 더이상 필요하지..
[JS] 다국어를 고려하여 문자열의 첫 글자를 대문자로 만들기
[JS] 다국어를 고려하여 문자열의 첫 글자를 대문자로 만들기
2024.05.08다국어를 고려하지 않았을 때💡 charAt은 인덱스에 해당하는 문자열을 반환하고, charCodeAt은 유니코드(0~65535) 값을 반환한다function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1);}capitalizeFirstLetter('hello world') // Hello world 다국어를 고려했을 때💡 로마자(라틴 문자)에선 점이 있는 소문자 i와 점이 없는 대문자 I가 짝을 이룬다. 반면 터키어, 아제르바이잔어에선 점 없는 문자ı, I와, 점 있는 문자 i, İ가 짝을 이룬다. Istanbul을 터키어 알파벳으로 적으면 İstanbul이 되는데 첫 글자가 바로 점 있는 ..
[React] 객체를 prop으로 받을 때 Default Parameter 지정
[React] 객체를 prop으로 받을 때 Default Parameter 지정
2024.05.08문제💡 기본값으로 지정한 options 객체에 size, color 속성을 모두 유지해야 하는 상황 컴포넌트 특정 Prop의 기본값을 객체로 지정하고, 컴포넌트를 사용하는 곳에서 객체를 넘기면 기본값으로 지정한 객체를 덮어쓴다. 아래 예시에선 options 프롭에 size, color 속성을 갖는 객체를 기본값으로 지정했지만 컴포넌트를 사용하는 곳에서 size 속성만 갖는 객체를 넘기므로 options 프롭은 { size: 5 }가 된다.// 컴포넌트 정의function Child({ options = { size: 100, color: 'black' } }) { // options 프롭 기본값을 { size: 100, color: 'black' } 으로 설정}// 컴포넌트 사용return ;// 프..
[HTML/CSS] 요소 왼쪽/위쪽 변부터 클릭 지점까지 거리 구하기
[HTML/CSS] 요소 왼쪽/위쪽 변부터 클릭 지점까지 거리 구하기
2024.05.08// left = clientRect.x, top = clientRect.yconst { height, width, top, left } = element.getBoundingClientRect();// event.clientX, event.clientY는 마우스 이벤트 속성const x = event.clientX - left;const y = event.clientY - top; mouseEvent.clientX, mouseEvent.clientY : 브라우저 화면 왼쪽 최상단을 기준으로 이벤트가 발생한 지점까지 얼마나 떨어져 있는지 나타내는 좌표. 브라우저 화면이 기준이므로 스크롤해도 값이 변하지 않음.clientRect.x, clientRect.left : 화면 좌측부터 해당 엘리먼트의 왼쪽 변까..
[HTMl/CSS] 엘리먼트의 모든 CSS 스타일 속성 / 값 조회하기
[HTMl/CSS] 엘리먼트의 모든 CSS 스타일 속성 / 값 조회하기
2024.05.08인자로 넘긴 요소에 적용된 모든 CSS 속성 조회Window.getComputedStyle(element, [pseudoElt]) const styles = getComputedStyle(element);// {0: 'accent-color', 1: 'align-content', 2: 'align-items', ...}console.log(styles); 인자로 넘긴 CSS 속성에 대한 값 조회CSSStyleDeclaration.getPropertyValue(property) const styles = getComputedStyle(element);// 'normal' (align-items에 대한 속성 값 normal 반환)styles.getPropertyValue('align-items'); // '..
[HTML/CSS] backdrop-filter vs filter 속성 비교
[HTML/CSS] backdrop-filter vs filter 속성 비교
2024.05.08TL;DRbackdrop-filter : 속성을 적용한 요소의 배경에만 효과가 적용됨. 콘텐츠는 영향 안받음Tailwind : backdrop-blur-smCSS : backdrop-filter: blur(4px);filter : 속성을 적용한 요소 전체(자식요소 포함)에 효과가 적용됨. 주로 이미지 태그에 사용함Tailwind : blur-smCSS : filter: blur(4px);💡 콘텐츠가 없거나 배경색이 지정되어 있지 않으면 효과 적용 안되므로 주의 Blur 배경 구현두 속성 모두 적용되는 효과는 동일하나 filter 속성은 자식 요소를 포함한 요소 전체에 적용되므로 Blur 효과가 들어간 배경을 구현하려면 background 추가 요소를 별도로 만들어야 한다 — 참고글 .bac..
[HTML/CSS] Tailwind CSS 다이나믹 클래스 사용시 주의할 점
[HTML/CSS] Tailwind CSS 다이나믹 클래스 사용시 주의할 점
2024.05.08Tailwind CSS는 클라이언트 사이드 런타임을 포함하지 않는다. 이는 클래스 이름을 빌드 타임에 추출하여 정적인 CSS 파일만 브라우저로 전송하는 것을 의미한다. 즉, 브라우저에선 Tailwind CSS 관련 자바스크립트 코드를 실행하지 않는다. 때문에 Tailwind CSS는 런타임에 동적으로 변경되는 값에 의존할 수 없다. 런타임에 동적으로 값을 변경해야 하는 경우 Emotion 같은 CSS-in-JS 라이브러리 등을 활용해야 한다.Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sor..
[DevTools] 1Password에서 SSH 키 관리하기
[DevTools] 1Password에서 SSH 키 관리하기
2024.05.081Password 8 버전부터 SSH & Git 관리 기능을 사용할 수 있다. 현재 Ed25519와 RSA 두가지 타입을 지원하며, 기존 SSH 키를 불러와서 저장할 수도 있다. 참고로 *.pem 파일을 1Password에 불러와서 저장한 후, 개인키를 다시 다운로드해서 사용할 땐 pem 확장자를 추가해야 한다. 1Password의 SSH & Git 관리 기능을 사용하면 SSH 개인키를 로컬에 저장하지 않고도 SSH 인증을 진행할 수 있다. ~/.ssh/config 파일에 일일이 SSH 키 경로를 명시해야 하는 번거로움도 덜 수 있다. 1Password에서 생성한 SSH 키는 공개키와 핑거 프린트(Finger Print)를 함께 생성하기 때문에 GitHub 같은 서비스에서 공개키 자동완성 기능도 사용할 ..
[Algorithm] 퀵 정렬(Quick Sort) 알고리즘 톺아보기
[Algorithm] 퀵 정렬(Quick Sort) 알고리즘 톺아보기
2024.05.07퀵 정렬 알고리즘 개념퀵 정렬은 분할 정복 알고리즘(문제를 더 작은 2개의 문제로 분리해서 해결한 후 결과를 모아서 원래 문제를 해결하는 방법)의 하나로 찰스 앤터니 리처드 호어(Charles Antony Richard Hoare)기사가 개발했다. 가장 자주 사용하는 정렬 알고리즘으로 빠른 수행 속도가 특징이다. 기본적인 퀵 정렬은 아래 3단계를 반복하며 정렬한다. 기준(Pivot; 피벗) 요소 선택 — 주로 배열의 중간 요소를 기준으로함기준 요소보다 작은 요소는 왼쪽으로 이동, 기준 요소보다 큰 요소는 오른쪽으로 이동이동시킨 왼쪽 / 오른쪽 요소들에 대해 1~2번 작업 반복 구현Basic Quick Sort💡 구현하기 쉽지만 항상 새로운 left / right 배열을 생성해 비교한 요소를 추가하므로 ..
[Algorithm] 분할 정복 / 병합 정렬 알고리즘
[Algorithm] 분할 정복 / 병합 정렬 알고리즘
2024.05.07분할 정복 (Devide & Conquer)개념분할 정복은 “큰 문제를 작은 문제 단위로 쪼개면서 해결해나가는 방식"이다. 미국 수학자 폰노이만이 1945년에 개발한 알고리즘이다. 퀵소트, 병합 정렬이 분할 정복 방법을 통해 구현한다.예전엔 테이프를 이용해 데이터를 저장했다. 테이프 드라이브에 저장된 데이터는 항상 처음부터 순차적으로 읽어야 하기 때문에 데이터를 정렬하기 어려웠다. 이런 테이프 드라이브의 문제점을 극복하기 위해 병합 정렬 알고리즘이 탄생했다. 분할 : 문제를 더 이상 분할할 수 없을 때까지 동일 유형의 여러 하위 문제로 나눈다정복 : 가장 작은 단위의 하위 문제를 해결하며 정복한다조합 : 하위 문제에 대한 결과를 원래 문제에 대한 결과로 조합한다 예시분할 정복은 구조는 동일하지만 더 작은..
[Algorithm] 정렬 알고리즘 기본 (버블/선택/삽입)
[Algorithm] 정렬 알고리즘 기본 (버블/선택/삽입)
2024.05.06💡 예시의 모든 input은 [10, 7, 9, 5, 1]로 통일. 버블 / 선택 / 삽입 정렬 모두 최악의 경우 O(n²) 시간복잡도를 갖는다. 알고리즘 성능이 좋지 않아 거의 쓰진 않지만, 적은 데이터를 정렬할 땐 유용. 버블 정렬 | Bubble Sort거품이 일어난 것처럼 배열의 각 요소들이 순차적으로 정렬돼서 버블 정렬이라고 부른다. 두 요소를 묶어서 비교한 후 큰 숫자를 오른쪽으로 밀어낸다. i번째 정렬을 마칠때마다 “뒤에서 i번째” 자리의 순서가 확정된다. 시간 복잡도 (삽입 정렬과 동일)Worst Case(정렬이 전혀 안됐을 때) : O(n²) — 중첩 반복문을 사용하므로Best Case(이미 정렬됐을 때) : O(n) 장단점 (삽입 정렬과 동일)Stable 정렬 : 중복 데이터는 순서를..