Blog (14 posts)
Framer Motion 페이지 전환 구현 중 발생한 이슈와 해결
개요 최근 블로그에 Framer Motion을 사용해 페이지 전환 효과를 추가하는 작업을 진행했습니다. 처음에는 간단하게 Layout 컴포넌트에 AnimatePresence…
CSR에서 동적 OG 적용하기
개요 최근 회사에서 가볍고 빠른 성능의 사이트를 개발해야 하는 요구가 생겨 Vite와 Svelte를 사용한 SPA를 만들게 되었습니다. 이 사이트는 동적 라우팅을 통해 경로에 따라 백오피스에서 설정한 커스텀 페이지를 보여주어야 했습니다. 문제는 동적 경로에 따라 OG 메타태그를 적용해야 한다는 사실이었습니다. 그동안 "CSR = SEO…
SPA 404 이슈 해결
개요 이 글은 실무에서 정적 사이트 배포 환경을 구성하면서 겪은 SPA 관련 404 오류 이슈에 대한 해결 과정을 다룹니다. SPA란? SPA(Single-page application)란 단일 HTML 문서로 이루어진 웹사이트를 의미합니다. 기존의 여러 HTML 파일을 사용하던 방식과 달리, SPA는 하나의 HTML…
마크다운 플러그인에 GFM 적용하기
이 블로그에서는 gatsby-plugin-mdx 플러그인을 사용해 마크다운을 파싱 및 렌더링하고 있습니다. 이 플러그인에 remarkGfm을 적용하며 발생한 이슈입니다. GFM이란? GitHub Flavored Markdown의 줄임말로, 기본적인 마크다운 문법의 확장입니다. Github…
클로저(Closure)
요약 클로저란 자 신이 정의된 렉시컬 환경을 기억하는 함수입니다. 클로저는 상태(state)를 유지하고 이것이 외부 요인에 의해 의도치 않게 변경되지 않도록 안전하게 은닉(information hiding)하기 위해 사용합니다. 클로저 클로저(Closure)란 자신이 정의된 렉시컬 환경을 기억하는 함수입니다. 위 예제에서 볼 수 있듯이, inner…
실행 컨텍스트(Execution Context)
요약 실행 컨텍스트란 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 관리하는 영역입니다. 코드의 실행 순서는 실행 컨텍스트 스택에 의해, 스코프와 식별자는 실행 컨텍스트의 렉시컬 환경에 의해 관리됩니다. 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드를…
함수(Function)
요약 프로그래밍에서 함수란 코드의 재사용을 위해 특정한 동작을 수행하는 코드를 묶어 하나의 실행 단위로 만든 것을 말합니다. 함수를 정의하는 방법으로는 크게 함수 선언문과 함수 표현식이 있습니다. 함수 선언문: function…
데이터 타입(Data Type)
요약 데이터 타입이란 프로그래밍에서 여러 종류의 데이터를 식별하기 위한 분류입니다. JavaScript는 동적 타입 언어로, 변수의 타입이 고정되지 않으며 모든 타입의 값으로 할당 및 재할당이 가능합니다. JavaScript…
표현식(Expression)과 문(Statement)
요약 문(statement)이란 토큰(token)으로 구성된 프로그램의 최소 실행 단위이다. 선언문, 할당문, 조건문, 반복문 등, 문을 통해 컴퓨터가 어떤 작업을 수행하도록 명령할 수 있다. 문의 집합이 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 작업을 프로그래밍이라 한다. 표현식(expression…
호이스팅(Hoisting)
요약 호이스팅이란 JavaScript의 특징으로, 함수나 변수의 선언을 코드의 최상단으로 끌어올린 것처럼 동작하는 방식을 말합니다. 호이스팅은 JavaScript…
this
요약 JavaScript에서 this는 함수가 호출되는 방식에 따라 달라집니다. 전역 컨텍스트: 전역 객체를 가리킵니다. 함수 단순 호출: 엄격 모드라면 undefined…
즉시 실행 함수(IIFE)
요약 IIFE란 정의되자마자 즉시 실행되는 JavaScript 함수를 말합니다. 함수 표현식을 감싸는 큰 괄호(그룹 연산자)와, 이 함수를 실행시키는 괄호(호출 연산자)로 구성되어 있습니다. (예: (function() {...})();) IIFE…
화살표 함수(Arrow Function)
요약 화살표 함수란 ES6부터 추가된 새로운 형태의 함수 표현식입니다. 기존의 function 키워드를 이용한 함수 표현식에 비해 간결하고 직관적인 함수 정의가 가능합니다. 화살표 함수의 특징은 this를 갖지 않는다는 점입니다. 기존 함수는 자신이 호출된 위치에 따라 this…
시맨틱 마크업(Semantic Markup)
…