-
[React] 크롤링이란 ? (Feat.SEO ⚡)
개요 🔔 정보의 바다라고 불리는 웹 사이트는 지금 이 시간에도 무수히 많은 정보가 쏟아져 나오고 있다. 이처럼 방대한 양의 정보(데이터) 를 사용자에게 보다 쉽게 전달하기 위해 우리 (프론트엔드 as 개발자) 는 페이지들을 인덱싱 하여 화면에 렌더링 해 준다. 만약, 가공되지 않은 데이터를 누군가가 인덱싱 & 저장 하여 관리하지 않는다면, 사용자는 해당 컨텐츠에 접근할 수 있는 방법이 존재하지 않을 것이다. 그래서 등장한 개념이 크롤링 이고, 이를 보다 쉽게 사용하기 위해 소프트웨어로 감싼것을 크롤러 라고 한다. 위키 백과 👇https://namu.wiki/w/%ED%81%AC%EB%A1%A...
-
[React] Zero-Runtime CSS in JS (Feat.최적화)
개요 🔔 해당 포스팅에서는 프론트엔드 직군에서 빼 놓을 수 없는 최적화 에 대한 관계가 있는, CSS 에 대해 정리 해 보고자 한다. Zero-Runtime 🚫 Zero-Runtime 이란, 특정 기술이나 라이브러리를 사용할 때 런타임 코드가 최소화 되거나 필요하지 않은 상태를 의미한다. 런타임 ❓ 런타임이란, 프로그램이 실행되고 있는 동안의 시간을 의미한다. 런타임은 프로그램이 실행되고 종료될 때 까지 계속되며 컴퓨터의 하드웨어와 상호작용하는 작업을 수행하는 동안의 모든 활동을 포함한다. JavaScript 에서의 런타임은, 브라우저에서 실행되는 경우 브라우저의 JavaScript 엔진을 의...
-
[React] Vite 앱에서 .env 환경변수 관리하기 (Feat. Firebase 🔥)
개요 🔔 프로젝트를 진행하다보면 주로 사용하는 파이어베이스나, 소셜 로그인 등의 기능을 구현할 때가 있다. 이 때, 사용되는 App key 는 고유한 암호와 같은 역할을 하는데, 소스코드를 Github 에 올릴 때 App Key 도 포함하여 같이 올리는 경우가 빈번히 있다. 실제 현업에서는 이를 .env(환경변수) 파일에 정의하여 위와 같은 Key 를 보안상의 이유로 인해 숨겨야 한다고 한다. React 환경에서 .env 파일에 정의하여 사용하는 형태로 구현했지만, Vite 환경이라 그런지 에러가 발생하더라. 그리하여 해당 포스팅 에서는 Vite 환경에서 .env 파일을 사용하여 App Key 와 같은...