오랜만에 티스토리 코드를 보수하다가 페이지 로드 이벤트에 대해 알아보게 되었다. 작동 방식이 잘 구분되지 않아 헷갈렸던 부분이 DOMContentLoaded와 window.onload였는데, 이번 기회에 정리해보려고 한다.핵심 정리DOMContentLoaded는 HTML 문서가 모두 로드되었을 때 실행되며, CSS나 이미지 로딩이 끝나지 않아도 실행할 수 있다.window.onload는 HTML뿐만 아니라 이미지, CSS, 폰트 파일 등 모든 리소스가 완전히 로드된 후 실행된다.빠른 실행이 필요하면 DOMContentLoaded를, 모든 요소가 준비된 후 실행하려면 window.onload를 사용한다.DOMContentLoaded: HTML이 준비되면 실행DOMContentLoaded 이벤트는 HTML ..

크론(Cron) 표현식이란 특정한 시간이나 주기로 작업을 예약할 때 사용한다. 이번에 깃허브 액션을 사용하면서 관련 개념들을 공부할 겸 정리해 보았다.크론 표현식의 기본 구조크론 표현식은 공백으로 구분된 5개 또는 6개의 필드(연도 추가 시)로 구성되며, 각 필드는 다음과 같은 의미를 갖는다. 필드는 가장 왼쪽이 분이며 그 다음이 시, 일, 월, 요일, 연도에 해당한다.필드설명허용되는 값분 (Minute)작업이 실행될 분0 - 59시 (Hour)작업이 실행될 시0 - 23일 (Day of the Month)작업이 실행될 날짜1 - 31월 (Month)작업이 실행될 달1 - 12 또는 Jan, Feb, Mar 등요일 (Day of the Week)작업이 실행될 요일0 - 6 (0 또는 7이 일요일) 또는 ..

티스토리와 같은 블로그에서 글을 쓰다보면 키워드에 지난 글 링크를 걸어야 할 때가 많다. 보통 이럴 때는 다음과 같은 과정을 거치게 된다. 키워드와 관련된 지난 글을 찾는다. 지난 글의 링크를 복사한다. 에디터로 돌아와 지난 글의 링크를 건다. 그런데 이는 키워드가 많아지면 상당히 귀찮은 일이 되며, 또 지난 번에 어떤 글을 썼는지 모두 기억하고 있기도 쉽지가 않다. 이를 자동으로 매칭할 수 있는 방법은 없을까? 다음 자바스크립트 코드를 사용하면 블로그 콘텐츠의 내용을 글자별로 뽑아 자동으로 링크를 걸 수 있다. 이를 위해서는 키워드와 이에 해당하는 링크를 매핑시켜줘야 하는데, 한 번 설정한 다음에는 각 본문에 처음으로 등장하는 해당 키워드가 링크 태그로 바뀌게 된다. document.addEventLi..

티스토리와 같은 블로그 플랫폼에서는 이미지를 많이 사용하는 경우가 빈번하기 때문에 레이지 로딩(LazyLoading)을 필수적으로 구현해두는 것이 좋다. 이번 글에서란 레이지 로딩이란 무엇이며 이를 사용하는 이유와 더불어 이를 구현하는 코드를 정리해보려고 한다. 레이지 로딩이란? 레이지 로딩이란 사용하지 않는 리소스(예: 이미지)를 식별하여 필요할 때만 로드하는 방식이다. 그렇다면 레이지 로딩을 사용하는 이유는 무엇일까? 예를 들어, 블로그 이미지 하단에 있는 이미지는 굳이 처음부터 로딩할 필요가 없다. 레이지 로딩을 사용하는 이유는 누군가는 블로그 하단까지 글을 읽지 않을 수도 있으며, 또 당장 필요한 리소스가 아니기 때문이다. 이러한 문제점을 해결하기 위해 레이지 로딩은 중요한 리소스만을 먼저 불러온..

JSX란 무엇이며 어떻게 사용할까요? 리액트 프로젝트를 시작하며 새롭게 생성된 파일을 열어보면 익숙하면서도 다소 생소한 구문으로 작성된 것을 확인할 수 있습니다. 이를 JSX라고 하는데요. JSX란? JSX는 JavaScript XML을 의미하며, 자바스크립트를 확장한 문법입니다. 리액트에서 요소를 생성하고 제어하는 데 사용합니다. 먼저, 간단한 예시를 살펴보도록 하겠습니다. // JSX를 사용한 코드 return ( Let's get started! ); // JSX를 사용하지 않은 코드 return React.createElement( 'div', {}, React.createElement('h2', {}, "Let's get started!"), React.createElement(Expense, ..

리액트 신규 프로젝트 생성 리액트로 신규 프로젝트를 생성하는 방법은 다음과 같습니다. 먼저, 리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js를 다운로드하여 설치합니다. 다음으로 커맨드 창을 열고 다음 명령어로 새로운 리액트 프로젝트를 시작합니다. npx create-react-app my-app cd my-app npm start 아래와 같이 브라우저에 새로운 리액트 앱이 실행되면 성공입니다. 리액트 작동 방식의 이해 create-react-app을 통해 리액트 프로젝트를 시작했다면 다양한 파일들이 자동으로 생성된 것을 볼 수 있습니다. 참고로 create-react-app은 리액트 프로젝트를 간편하게 시작할 수 있는 라이브러리입니다. 즉, 다른 방식으로도 리액트 프로젝트를 시작할 ..

리액트란? 리액트(React.js)는 자바스크립트 라이브러리로 보다 편리한 웹 개발을 위해 만들어졌습니다. 페이스북, 디스코드, 페이팔, 넷플릭스 등에서 대규모 애플리케이션을 리액트로 개발하여 운영 중인데요. 리액트는 반응형 웹 유저 인터페이스를 만드는 데 용이하며 확장성이 좋습니다. 리액트와 컴포넌트 리액트는 재사용 가능한 컴포넌트(component)를 통해 각 요소를 구현합니다. 컴포넌트란 무엇일까요? 컴포넌트는 리액트의 핵심 개념으로 자바스크립트 함수입니다. 컴포넌트를 통해 관심사를 분리할 수 있으며 이를 원하는 곳에서 재사용할 수 있습니다. 각 컴포넌트는 하나의 정확한 역할을 수행하는데요. 이렇게 컴포넌트를 분리하면 유지 보수와 관리가 용이합니다. 정리하자면 리액트의 모든 UI는 개별 컴포넌트(빌..

조건부 삼항 연산자란 무엇이며 또 어떻게 사용할까요? 조건부 삼항 연산자는 자바스크립트에서 세 개의 피연산자를 사용할 수 있는 유일한 연산자로 보통 if 문을 간결하게 표현하기 위해 사용합니다.조건부 삼항 연산자 예시조건부 삼항 연산자는 어떻게 사용할까? 다음은 삼항 연산자를 사용한 함수의 예시입니다. 아래에서는 isWin이 true일 경우 10이 출력되고, false일 경우 0이 출력됩니다.function getScore(isWin) { return (isWin ? 10 : 0);}console.log(getScore(true)); // 10console.log(getScore(false)); // 0조건부 삼항 연산자 사용 방법조건부 삼항 연산자는 condition ? exprIfTrue : e..