본문 바로가기

웹개발 - Front 관련

 (9)
[ Svelte 5 ] - 2. 상태 관리 Rune 정리 & Rune store subscribe 흉내 내보기 Topic =  Svelte5 Rune API 정리 해보기.   Rune 이란? Rune은 Svelte 5 부터 도입된 반응성 시스템을 제공하는 구문으로 상태, 상태 이벤트, 종속성 등의 기능을 함수 형태로 캡슐화 하여 제공하는 것 이다.  상태 - $state, $derived상태관리 Rune 으로 정의한 변수는 DOM 반응성을 갖게 되어 변경이 발생하면 자동으로 DOM 이 업데이트 된다.$state(), $derived() 를 통해 각각 상태, 파생된 상태를 정의할 수 있다.변수 값이 1 이었던 count 변수의 값이 2로 바뀌면 기존 DOM 에서 보이던 1 을 2 로 업데이트 해주어야 한다. 이때 변수를  $state() 를 통해 상태로 정의해두면, 해당 상태의 값이 바뀔 때 자동으로 DOM이 업데.. 2024. 11. 28. 23:45
[ Svelte5 ] - 1. 기본 Svelte 컴포넌트 구성 요소, HTML 템플릿 문법 Topic =  Svelte의 HTML 요소에 script 변수들을 바인딩하는 방법 정리해보기.  1. Svelte 컴포넌트 구성요소기본적인 Svelte의 구성요소는 다음과 같다 script 태그컴포넌트의 JS 로직과 상태를 정의하는 영역. 를 통해 ts 적용 가능.HTML 템플릿 영역 - main 태그 ( 생략 가능 )HTML 요소가 위치하는 영역으로 scipt 태그, style 태그 영역 외 영역이 HTML 템플릿 영역으로, 태그를 통해 명시적으로 HTML 템플릿 영역을 지정할 수도 있다.style 태그컴포넌트 내, 외부의 요소 스타일을 정의하는 영역기본적인 style 태그 내 스타일 속성은 해당 컴포넌트 내부에만 적용된다.전역 스타일 적용도 가능하다 ➡️ :global() 함수로 전역 스타일 속성.. 2024. 11. 26. 19:29
[메모] Svelte + SortableJS Dom 중복 업데이트 오류 오류 현상 실제로 값이 2개가 추가되는 것이 아닌, Sortable JS 의 DOM 업데이트와 Svelte의 반응성이 더해져 2개의 데이터가 추가되는 것 처럼 보이는 현상. [ 해결 코드 ]onAdd(event) { this.el.removeChild(event.item)}, [ Sortable 전체 코드 ]Sortable 객체 내부의 onAdd(event) {} 로직을 통해서 add 이벤트로 인해 요소가 추가되는 toList에 생성될 요소를 제거하는 로직을 추가해서 해결되었다. DOM 업데이트와 관련된 버그들 디버깅이 상당히 어려운 느낌이다. 강의 버전인 Svelte 3,4 버전과 현재 사용중인 Svelte 5 와 버전 차이로 인한 문제들은 많았는데, 자주 사용할 것 같은 라이브러리 관련 오류라 .. 2024. 11. 24. 20:45
[TIL] CSS / word-break [ 문자열 단어기준 / 글자기준 줄바꿈 속성 ] Topic = 한글 문자열 단어 기준 / 글자 기준 줄바꿈 속성 학습하기 CSS / word-break [ 속성 설명 ] word-break 속성은요소 내에서 줄 끝에 도달했을 때 단어가 어떻게 줄바꿈 처리 되는지 지정하는 데 사용된다. 오버프로를 방지하기 위해 브라우저가 분리해야 하는지 여부와 다양한 유형의 언어 및 텍스트 콘텐츠를 처리하는 방법을 제공한다. [ 속성 값 ] word-break: normal 🟨 normal ( 기본값 ) CJK ( 중국어, 일본어, 한국어 )는 글자 기준으로, CJK 이외의 문자는 공백 또는 하이픈과 같이 허용된 분리점 에서 줄바꿈 처리 한다. 영문의 경우 단어 기준으로 줄바꿈 처리가 되지만, 한글은 글자 기준으로 줄바꿈 처리가 되는 모습이다. 🟨 break-all 컨.. 2024. 3. 31. 12:51
[TIL] JavaScript - InterSectionObserver - 속성 및 기본 사용 편 Topic = 애니메이션 트리거링 → 웹 페이지 특정 요소가 뷰포트 or 비교 요소 에 있을 때 애니메이션을 실행하기. IntersectionObserver IntersectionObserver는 특정 대상 요소(target)와 root(뷰포트 or 비교 root 요소)가 서로 교차하는 영역을 관찰하여 대상 요소가 뷰포트 또는 비교 요소 root 에 교차되어 화면에 포함되는지의 여부를 비동기적으로 감지할 수 있는 기능이다. 해당 JS API를 통해서 무한 스크롤, 이미지 및 기타 요소들의 지연 로딩으로 애니메이션 처리 (애니메이션 트리거링), 고정 요소 구현, 웹페이지 요소 가시성 추적 등에 기능을 구현할 수 있다. Intersection Observer 사용하기 [ 1. 관찰자 생성 ] const io.. 2024. 3. 30. 10:58
JS Library - Swiper.js (1) 개념, 사용방법, 속성들 Topic = JavaScript 반응형 슬라이드 라이브러리 Swiper.js에 대해 학습해보기. Swiper.js 개념 Swiper.js란? Swiper.js는 모바일, 데스크탑에서 반응형 슬라이드 쇼 및 스와이퍼 기능을 간단한 HTML, CSS, JS 코드로 쉽게 구현할 수 있도록 해주는 오픈소스 라이브러리이다. 주요기능 터치 스와이프 - 모바일 기기에서도 직관적인 슬라이드 조작 가능 touchstart 및 touchmove 이벤트 발생 시 터치 위치 정보를 기록, 터치 종료 시 touchend 이벤트 발생. 계산된 정보를 기반으로 슬라이드 이동 방향 및 거리 결정. 기본적으로 부드러운 슬라이드 이동 애니메이션 적용. JS 코드로 다양한 옵션 설정을 통해 슬라이드 작동 방식 조정이 가능하다. brea.. 2024. 3. 1. 14:55
[TIL] CSS ( 1 ) 기초 - 선택자 ( Selector ) Topic = CSS 기초에 대해서 학습하기. CSS ( Cascading Style Sheets ) CSS란? HTML과 같이 CSS는 프로그래밍 언어가 아니고, 마크업 언어가 실제 표시되는 방법을 기술하는 Style Sheets - 스타일 언어이다. CSS는 실제 화면에 표시되는 요소의 색상, 크기, 폰트, 레이아웃 등의 표현을 지정해 콘텐츠를 꾸며주는 정적인 시각적 표현을 담당한다. == HTML 정보를 토대로 컴포넌트를 가공하는 역할을 한다. ✅ HTML에 CSS를 적용하기 위해선 HTML 파일 내 헤더 태그 안에 아래와 같이 CSS 경로를 Link 해주어야 한다. [ CSS의 구성 ] Rule Set ( Rule )은 HTML 페이지 안의 특정 요소들을 어떻게 랜더링 할 것인지 브라우저에게 알려.. 2024. 2. 18. 17:18
[TIL] HTML 기초 간단하게 학습하기 Topic = HTML 개념, 기초 학습 HTML 이란? HTML ( Hypertext Markup Language ) → 웹 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹 콘텐츠의 의미 구조를 형성 마크업 언어 HTML은 웹 페이지가 어떻게 구조화 되어 있는지 브라우저에 콘텐츠를 표시하는 방법을 알려주는 마크업 언어이다. 구조 형성 요소 ( Element )을 통해 웹 페이지가 무엇으로 이루어져 있는지, 속성 ( Attribute ) 을 통해 어떻게 구성되어 있는지에 대한 구조를 형성한다. [ 기본적인 html 구조 형성 예제 ] → HTML Element의 구조에 대해서 아래 추가로 작성. 제목1 본문1 ☑️ HTML의 요소는 대소문자를 구분하지 않는다. , , , , 등과 같이 사용할 수 있지.. 2024. 2. 17. 14:43

티스토리툴바