분류 전체보기 (399) 썸네일형 리스트형 [NextJS] 글꼴 최적화와 사용법 NextJS 에서의 글꼴 nextJS 에서는 글꼴(폰트)을 자동으로 최적화해주는 기본 글꼴을 제공한다. 보통 사용자가 직접 정의한 글꼴을 사용하는 경우에는 레이아웃 시프트가 발생할 수 있다. 즉, 사용자 정의 글꼴 브라우저에서 다운로드되어 표시되기 전 까지 기본 브라우저 글꼴로 대체되어 있다가, 사용자 정의 글꼴이 다운로드된 후에 글꼴이 적용되므로, 이 때 기본 글꼴과 다운로드 글꼴의 사이즈 차이로 인해 레이아웃이 재계산되어 반영되는 문제가 발생할 수 있다. 따라서 NextJS 에서는 이러한 레이아웃 시프트 문제를 최대한 방지하기 위해, 사용자 정의 글꼴에 대한 추가적인 네트워크의 요청이 없도록 빌드 시에 정적 자산(ex. HTML)과 함께 글꼴을 다운로드하고 함께 호스팅하여 사이트를 방문한 사용자의 입.. [javascript] HTML5 Web Speech API 로 TTS 만들기 보호되어 있는 글입니다. [자료구조] 단일 연결 리스트 | Add 구현하기(2). sub | 뒤로 노드 추가하기 [ 자료구조] 단일 연결 리스트 - Add 구현하기[1]. sub | 노드를 앞으로 추가하기 단일 연결 리스트란? 단일 연결 리스트는 리스트의 각 요소가 다음 요소를 가리키는 연결 리스트의 한 유형이다. 리스트는 노드를 요소로 가지고 있으며, 각 노드에는 데이터(data)와 다음 노드를 duklook.tistory.com 이전 시간에는 단일 연결 리스트에 노드를 추가하는 방법 중 노드를 앞으로 추가하는 함수에 대해서 정리해 보았는데, 오늘은 그 반대이자 일반적인 방식인 노드를 뒤로 추가하는 방식에 대해 정리하고자 한다. 노드를 뒤로 추가하는 add 함수 노드를 앞으로 추가하는 방법은 앞에서 알아 봤듯이 새로운 노드가 이전 노드를 참조하게 하는 방식으로 꼬리에 꼬리를 물도록 설계하는 것 이었다. add(d.. [ 자료구조] 단일 연결 리스트 - Add 구현하기[1]. sub | 노드를 앞으로 추가해보자 단일 연결 리스트란? 단일 연결 리스트는 리스트의 각 요소가 다음 요소를 가리키는 연결 리스트의 한 유형이다. 리스트는 노드를 요소로 가지고 있으며, 각 노드에는 데이터(data)와 다음 노드를 가리키는 참조(next) 를 담고 있다. 리스트에서 첫 번째 노드를 헤드(head)라 부르며, 마지막 노드는 null 에 대한 참조 담는다. 마지막 노드가 null 을 담고 있는 것은 [1 -> 2 -> 3] 이 있을 때 3을 담고 있는 노드의 다음 노드는 없기 때문이다. 단일 연결 리스트는 단방향 이므로 이전 노드에 대한 참조를 알지 못하는 것이 특징이다. 즉, 앞만 보거나, 뒤만 보거나 둘 중 하나의 방향만 가리킨다. 단일 연결 리스트의 시간 복잡도 단일 연결 리스트는 특정 위치의 노드에 직접 접근하려면 처음.. [javascript] 3d 스틸 박스 (작성중) HTML 삽입 미리보기할 수 없는 소스 [Javascript] HTML5 dragable API 를 사용하여 요소의 위치를 바꾸어 보자 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. Drag and Drop API API는 웹 애플리케이션에서 요소를 드래그하고 다른 위치로 놓는 기능을 구현하는 데 사용된다. 이 API는 기본적인 드래그 앤 드롭 동작을 처리하기 위한 이벤트 및 메서드를 제공하고 있으며, 현재도 계속해서 새로운 기능들이 추가되고 있다. 그래서 오늘은 이 API 를 활용해서 요소 끼리 위치를 바꾸는 간단한 기능을 구현해볼 생각이다. 기본 개념 코드 작성 이전에 우선적으로 필요한 환경 설정과 기본적인 메소드나 기능에 대해 알아 보자. 초기 셋팅 | 필수 우선 각 HTML 요소가 드래그를 가능하게 하려면 각 요소의 속성으로 draggable 을 true 로 지정 해줘야 .. [tailwindcss] NextJS & tailwindcss 에서 스크롤바 커스텀[간략 정리] tailwindcss 에서는 별도로 스크롤 바를 꾸밀 수 있는 유틸 클래스를 제공하지 않는다. 다만, NextJs 의 global.css 에서 별도로 스크롤바에 스타일을 적용할 수 있다. global.css 현재 불필요한 스타일 지정을 제거하고, global.css 파일을 살펴본다면 다음 형태와 같을 지도 모른다. @tailwind base; @tailwind components; @tailwind utilities; /* 생략 */ 위 옵션을 건드리지 말고, 다음과 같이 하단에 ::-webkit-scrollbar-* 를 지정하면 스크롤바를 커스텀 할 수 있다. /* 스크롤바 넓이 지정 */ ::-webkit-scrollbar { width: 5px; } /* 스크롤바 트랙 꾸미기 */ ::-webkit.. [개인 정리]프론트엔드 상태관리 라이브러리 비교(redux, recoil, zustand) 보호되어 있는 글입니다. 이전 1 ··· 19 20 21 22 23 24 25 ··· 50 다음
