[TIL] 기술부채 청산하기 - 2월 셋째 주

TIL 느낌으로 이번 주 어려웠던 점들을 돌아보며 미처 공부하지 못한 부분들을 보고 넘어가려고 합니다.

(모든 내용을 다 보고 정리하기보단 짧게 개념 위주로 훑어보고 기억을 상기시키는 용도로 시리즈를 매주 이어가볼 예정입니다 ㅎㅎ)

 

 

Svelte편

svelte 애니메이션?

지난 주에 wordle 챌린지를 진행하며 애니메이션 구현에 대해 고민하였습니다.

svelte는 애니메이션을 간편히 사용할 수 있도록 디렉티브를 제공합니다.

animate:flip(First, Last, Invert, Play의 약자)는 시작 위치와 마지막 위치를 계산하고 애니메이션을 적용하여 변환하는 동작을 합니다.

(이에 대해서는 다음에 기회가 되면 사용해볼 계획입니다.)

이는 DOM이 추가되거나 제거될 때 동작합니다.

따라서 wordle에 사용된 애니메이션의 경우 DOM이 추가되거나 삭제되는 것이 아니라

기존의 DOM에서 애니메이션이 추가되는 형태이므로 커스텀으로 구현해야 했습니다.

 

context:module

가끔 코드를 작성하다보면 같은 컴포넌트로 생성된 인스턴스 간에 코드를 공유할 필요성이 생깁니다. (컴포넌트 쉐어?)

script태그에 context="module"을 붙여주게 되면 위와 같은 상황에서 코드를 공유할 수 있습니다.

또한 이는 코드를 내보낼 때도 유용합니다.

context="module"로 선언한 script 내에서 export된 코드는 부모 컴포넌트에서 사용 가능합니다.

위와 같은 방식은 컴포넌트를 재사용하였을 때 관리를 효율적으로 해줄 수 있을 것 같습니다.

왠지 여러 개의 모달을 관리할 때 편리할 것 같네요.

wordle 챌린지의 모달창 띄울 때 적용해봐야겠습니다.

 

bind

아직 스벨트에 익숙하지 않아서, 많이 쓰인다고 하는 위 개념을 이제서야 알게 되었습니다.

bind는 주로 양방향 바인딩을 하기 위해 사용되며, 저는 input의 value에 따라 값을 업데이트할 때 사용하였습니다.

자식 컴포넌트에 props로 내릴 때에도 사용할 수 있다고 하네요.

 

:$

반응성 구문은 속한 컴포넌트가 실행되면 무조건 다 실행됩니다.

따라서 항상 실행이 안되도록 하려면 조건문을 걸어줘야 합니다.

 

class 문법

<div class={active? 'active' : ''}>

저는 위의 방식으로 스벨트를 사용했으나, 스벨트에서는 인라인으로 속성을 바인딩할 수 있습니다.

<div class:active >

훨씬 간편하네요!

마찬가지로 style도 설정할 수 있습니다.

<div style:color="red">

이건 앞으로 유용하게 쓸 수 있겠네요

 

 

use:action

컴포넌트가 생성되거나 마운트 해제된 후 호출되는 메서드를 action으로 지정할 수 있습니다.

리액트의 useEffect와 유사하네요.

action = (node: HTMLElement, parameters: any) => {
	update?: (parameters: any) => void,
	destroy?: () => void
}

아래와 같이 사용됩니다.

<script>
	function foo(node) {
		// the node has been mounted in the DOM

		return {
			destroy() {
				// the node has been removed from the DOM
			}
		};
	}
</script>

<div use:foo></div>

또한 이는 매겨변수를 지정해주어서 매개변수가 변경될 때마다 업데이트할 수 있습니다.

<script>
	export let bar;

	function foo(node, bar) {
		// the node has been mounted in the DOM

		return {
			update(bar) {
				// the value of `bar` has changed
			},

			destroy() {
				// the node has been removed from the DOM
			}
		};
	}
</script>

<div use:foo={bar}></div>

 

이벤트 전파

on:~~로 이벤트를 할당할 수 있으며,

값을 지정하지 않으면 해당 컴포넌트는 이벤트를 상위 컴포넌트로 이벤트를 전파합니다.

상위 컴포넌트를 이를 이용할 수 있습니다.

이벤트 위임을 구현할 때 꽤 유용할 것 같네요!

 

 

Sveltekit

React의 NextJS와 같이 Svelte의 SSR, SSG 등 다양한 기능을 제공하는 프레임워크입니다.

아직 베타버전이긴 하지만 라우팅, 동적 라우팅, 레이아웃 지정, 엔드 포인트 등 다양한 기능을 제공합니다.

공식 문서를 쭉 훑어봤는데 편리한 기능들을 많이 지원하네요.

또한 vite를 기반으로 하기 때문에 svelte+vite에 관심 있는 저에게는 더더욱 흥미롭네요

다음 프로젝트는 스벨트킷으로...!

 

 

RxJS편

반응형 프로그래밍 철학과 함수형 프로그래밍에 대해 최근 관심 있게 공부하고 있습니다.

https://www.learnrxjs.io/

Introduction - Learn RxJS

를 보며 오퍼레이터가 어떤 것이 있는지, 예시가 무엇인지 훑어보고 있는데 아직 어렵네요..

Wordle 챌린지 하면서 하나씩 도입해봐야겠습니다.

 

 

 

기타 용어 지식

CDN (Content Delivery Network)

CDN이라는 용어를 자주 접하게 되는데, 정확한 뜻을 모르고 단지 감으로만 짐작하고 있었습니다.

CDN이 사용자와 가장 가까운 캐시 서버에서 정보를 찾아 보내주는데, 사용자와 서버 사이의 물리적인 거리를 줄여 콘텐츠 로딩 시간을 최소하는 기술입니다.

캐싱과 비슷한 원리이며, 넷플릭스, 유튜브 등 대용량 데이터를 주고받아야 하는 분야에서 필수적으로 쓰이고 있는 콘텐츠 전송 기술입니다.

이미지 출처: https://docs.microsoft.com/ko-kr/azure/cdn/cdn-overview

BFF (Backend for Frontend)

저는 처음 들어보는 단어였습니다. (아직 식견이 짧군요 ㅠㅠ)

최근 MSA의 여러 패턴 중 하나로, 말 그래도 프론트엔드를 위한 백엔드 서버입니다.

아래 그림이 개념을 잘 보여주는 것 같네요 ㅎㅎ

이미지 출처: https://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html