달과 함께하는 IT

개요 정규 표현식은 문자열 검색 및 치환 등의 작업에 사용되는 강력한 도구입니다. 그러나 정규 표현식 내에서는 특정 특수 문자들이 특별한 의미를 가지고 있습니다. 예를 들어: . : 어떤 문자와도 일치합니다. * : 앞의 문자나 그룹이 0번 이상 반복됩니다. + : 앞의 문자나 그룹이 1번 이상 반복됩니다. 그러므로, 이러한 특수 문자들을 문자 그대로 검색하려면 이스케이프 처리가 필요합니다. escapeRegExp 함수 이스케이프 처리는 특수 문자 앞에 역슬래시(\)를 붙여주는 것을 말합니다. /** * 정규 표현식에서 사용되는 특수 문자를 이스케이프합니다. * @param {string} string - 이스케이프 할 문자열. * @returns {string} 이스케이프된 문자열을 반환합니다. */ ..

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다. 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있습니다. 그런데 "쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요?"라는 의문이 들 수 있습니다. 쿠키 이외에도 다른 방식을 사용하는 이유는 다음과 같습니다. 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가..

Babel이란? 아래 예제는 ES6의 화살표 함수와 ES7의 지수 연산자를 사용하고 있다. // ES6 화살표 함수와 ES7 지수 연산자 [1, 2, 3].map(n => n ** n); IE와 다른 구형 브라우저에서는 이 두가지 기능을 지원하지 않을 수 있다. Babel을 사용하면 위 코드를 아래와 같이 ES5 이하의 버전으로 변환할 수 있다. // ES5 "use strict"; [1, 2, 3].map(function (n) { return Math.pow(n, n); }); 이처럼 Babel는 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다. Webpack이란? Webpack은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파..

SEO(검색엔진 최적화) 이슈 SPA는 일반적으로 서버 사이드 렌더링(SSR) 방식이 아닌 자바스크립트 기반 비동기 모델의 클라이언트 사이드 렌더링(CSR) 방식으로 동작한다. 클라이언트 사이드 렌더링(CSR)은 일반적으로 데이터 패치 요청을 통해 서버로부터 데이터를 응답받아 뷰를 동적으로 생성하는데 이때 브라우저 주소창의 URL이 변경되지 않는다. 이는 사용자 방문 history를 관리할 수 없음을 의미하며 SEO 이슈의 발생 원인이기도 하다. SPA의 SEO 이슈는 언제나 단점으로 부각되어 왔다. SPA는 정보 제공을 위한 웹페이지보다는 애플리케이션에 적합한 기술이므로 SEO 이슈는 심각한 문제로 취급할 수 없다고 생각할 수도 있지만 블로그와 같이 애플리케이션의 경우 SEO는 무시할 수 없는 중요한 ..

Next.js React를 기반으로 만들어진 Next.js의 경우 기존 리액트가 SPA 친화와 더불어 CSR을 중점적으로 제공함에 비해 SSR 및 사용자와 서버 친화적 데이터 패칭을 위해 CSR과 SSR 그리고 SSG를 같이 지원하는 ISR등의 여러 방식을 지원하기 위해 도입된 프레임워크이다. React는 라이브러리로 팀 그리고 개인마다 가지각색의 형식과 양식이 존재한다. Next는 Vue와 같이 어느정도 틀이 잡힌 프레임워크 기반으로 React에서 필수적으로 사용하는 라우터 , 데이터 패칭이 들어있고 폴더 , 형식에 맞춰서 코드를 작성하면 구현을 해 준다. 클라이언트 사이드 렌더링(CSR, Client-Side Rendering) 자바스크립트를 사용하여 브라우저(클라이언트 사이드)에서 렌더링하는 것을 ..

이벤트 버블링, 캡처링, 그리고 위임은 웹 개발에서 이벤트 처리와 관련된 중요한 개념들입니다. 이벤트 버블링(Event Bubbling): 이벤트 버블링은 HTML 요소들이 중첩된 구조에서 발생한 이벤트가 가장 내부의 요소부터 시작하여 부모 요소 방향으로 전파되는 메커니즘입니다. 즉, 내부 요소에서 발생한 이벤트가 외부로 전파되며, 이벤트 핸들러는 부모 요소에서부터 순차적으로 실행됩니다. 이벤트 캡처링(Event Capturing): 이벤트 캡처링은 이벤트 버블링과 반대로 부모 요소에서 시작하여 내부 요소 방향으로 이벤트가 전파되는 메커니즘입니다. 캡처링 단계에서 이벤트 핸들러는 최상위 부모 요소부터 내부로 내려가며 실행됩니다. 이벤트 위임(Event Delegation): 이벤트 위임은 동적으로 생성되..

시작하기 ES란? ECMAScript 즉 Javascript를 표준화하기 위한 규약 사용하는 이유 기존 Javascript로 활용하기 힘들거나 에러를 양산할 수 있는 문제들을 해결하기 위하여 개발자들의 토론 하에 범용성 높은 규칙을 만듬 ES5와 ES6이란 ES5는 2009년 발표된 ECMAscript 규약 이며 ES6는 2015년 발표된 ECMA 규격이다. 이전에 비해 ES6는 여러 항목들이 추가되었다. ES6에 추가된 대표적인 기능 Let, const와 블록 레벨 스코프 var의 단점을 보완하기 위한 let과 const 변수 선언 도입 템플릿 리터럴 대표적 특징들 const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할..

시작하기에 앞서 최근 시작한 프로그래머스 바닐라 JS 첫 주차를 수강하며 네이밍 규칙을 정리할 겸 번역한다. https://school.programmers.co.kr/learn/courses/14723 [스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS) 🎁 프론트엔드 개발을 위한 자바스크립트 스터디 모집 중! 이번 기수 일정이 맞지 않다면 오픈 알림 신청하고 최저가에 수강하세요! 오픈 알림 신청 프론트엔드 개발을 위한 자바스크립트 온라 school.programmers.co.kr 기본적으로 에어 BNB 네이밍 컨벤션을 알고 있다는 전재 하에 작성되었습니다. 1. Variables (변수) // bad var value = 'Robin'; // bad var val = ..

시작하기에 앞서 코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고 요점을 적어두고 다시 활용하기 위한 글입니다. CSS visivility에 관해 개인 프로젝트를 진행하다가 보면 배치한 컴포넌트와 모듈이 첫 시작때 배치 이동되면서 화면이 어그러지는 경우를 많이 보게된다. 이를 해결하기 로딩이나 스피너등으로 유저 이탈을 막는 경우가 있는데 최근에는 스켈레톤 UI (컴포넌트)를 많이 사용한다. 하지만 로딩이 길지않고 사이트 로딩자체의 시간이 아주 길지 않은 경우 => 일반적으로 유저가 빈 화면등을 보고 이탈하는 시간인 3초 이내 굳이 스켈레톤 리소스를 활용하는 것 보다 간단하게 CSS를 활용하는 방법을 찾아서 공유한다. // CSS body { visibility: ..

시작하기에 앞서 코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고 요점을 적어두고 다시 활용하기 위한 글입니다. JSON.parse() 와 JSON.stringify() JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용됩니다. 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포멧입니다. JSON은 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있습니다. 이중 자바스크립트 내장객체인 JSON.parse()와 JSON.stringify()를 이용해..