[JS] 클로저란?

클로저란? 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 뜻한다. 자바스크립트만의 고유한 개념이 아니라, 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성이다. 클로저의 핵심은, 스코프를 이용하여 변수의 접근 범위를 닫는 폐쇄성이다. 스코프를 이해해야 클로저를 이해할 수 있다. https://is-this-it.tistory.com/134 [JS] 스코프(Scope)란? 스코프란? 식별자 접근 규칙에 따른 유효 범위를 말한다. 변수, 함수, 클래스 등의 식별자에 접근할 수 있는 범위가 존재하는데, 이 범위는 중괄호(블록)-Block Scope- 또는 함수-Function Scope-에 의해 is-this-it.tistory.com 클로저 스코프 체인 모든 클로저에는 세가지 스코프(범위..

[JS] 스코프(Scope)란?

스코프란? 식별자 접근 규칙에 따른 유효 범위를 말한다. 변수, 함수, 클래스 등의 식별자에 접근할 수 있는 범위가 존재하는데, 이 범위는 중괄호(블록)-Block Scope- 또는 함수-Function Scope-에 의해 나눠진다. 특이사항으로, 자바스크립트에서 화살표 함수는 블록 스코프로 취급된다. 규칙 1. 안쪽 스코프에서 바깥쪽 스코프로만 접근 할 수 있다. (반대는 불가능) 2. 스코프는 중첩이 가능하다. 3. 가장 바깥 쪽의 스코프를 전역 스코프(Global Scope), 그 외의 스코프는 모두 지역 스코프(Local Scope)다. 4. 지역 변수는 전역 변수보다 우선 순위가 높다. 변수 선언 키워드 - var, let, const var 키워드로 선언한 변수는 블록 스코프를 무시하고 스코프..

[JSX] 조건에 따른 JSX 작성 패턴 - if, switch, object 구조

리액트에서 JSX 작성 중에 조건문이 필요할 때 주로 삼항연산자를 사용하고, case가 다양할 때에는 switch문을 사용하는 편이다. 삼항 연산자가 워낙에 간편하다 보니 if 문을 사용한적이 없는 것 같은데, 아래처럼 사용할 수 있다. 1. JSX 내에서 if 문 function Component() { return ( {(() => { if (someCase) { return ( someCase ) } else if (otherCase) { return ( otherCase ) } else { return ( catch all ) } })()} ) } 2. JSX 내에서 switch 문 function Component() { return ( {(() => { switch (status) { case..

[JS] 연속된 정수 배열을 만드는 다양한 방법

기본적인 사용자 지정 함수 function getNumberArray (N) { let a = Array(N), b = 0; while(b < N) a[b++] = b; return a; } getNumberArray(10); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ES6+ API을 활용한 1줄 짜리 방법들 - 0으로 시작하는 기본 수열 Array.from(Array(10).keys()) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] [...Array(10).keys()] // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] Array.apply(null, {length: 10}).map(Number.call, Number) // [0, 1, 2, 3, 4, ..

서버사이드렌더링이란? SSR, Server Side Rendering

SSR, Server Side Rendering이란? SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(Client-side rendering)보다 페이즈를 구성하는 속도는 늦어지나, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점이 빨라진다. 또한, 검색 엔진 최적화(SEO, Search Engine Optimization)에도 유리하다. SSR 동작 방식 사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML ..

자바스크립트 스크롤 애니메이션 넣기 - Intersection Observer API

Intersection Observer API Intersection Observer API: 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰할 수 있게 한다. 예시 let observer = new IntersectionObserver((e) => { e.forEach((el) => { console.log(el.intersectionRatio); // 화면에 포함된 퍼센트 if (el.isIntersecting) { console.log(el.intersectionRatio); el.target.style.opacity = el.intersectionRatio; } else { el.target.style.opacit..

[npm/yarn] 다운로드 가능한 패키지 버전별 확인 방법

// npm npm view 패키지이름 versions --json npm show 패키지이름 versions // yarn yarn info 패키지이름 versions

[Svelte] 스벨트 라우팅 컨벤션

스벨트 라우팅 컨벤션 Route은 src 폴더 안의 routes 폴더 안에 작성 (/src/routes) Route 파일은 +page.svelte 식의 이름으로 작성 /Routes 폴더 내 폴더는 URL 주소에서 경로 segment를 결정 동적 라우팅은 segmemt 폴더 아래 [somethingId] 식으로 폴더를 생성하여 그 안에 +page.svelte를 작성

[Svelte] 스벨트, 스벨트킷이란?

Svelte란? UI를 만들기 위한 컴포넌트 프레임워크 브라우저에서 UI를 그리고 처리하는 React 또는 Vue와는 다르게, 빌드 타임에 앱을 자바스크립트 코드로 변경 즉, Virtual DOM을 기반으로 작동하지 않고, 앱의 상태가 바뀔 때 DOM을 직접 바꾸는 기존의 바닐라 자바스크립트처럼 작동 SvelteKit이란? Svelte를 이용하여 고성능 웹앱을 만드는 프레임워크 Routing, SSR, 인증, 번들 최적화 등의 기능 제공 Backend 기능이 합쳐진 풀스택 웹 프레임워크 SvelteKit의 특징 File-based routing: 파일 자체가 라우터 기능을 함 Pre-rendering: SEO에 유리 API routes Data fetching Optimized production bui..

dialog 태그로 손쉽게 모달창 만들기

HTML의 dialog 태그를 이용하면 많은 스크립트를 작성하지 않고 손쉽게 모달창을 만들 수 있다. 모달 열기 버튼 모달창 내용 모달 닫기 버튼