개요 자바스크립트는 웹 개발의 초기 단계부터 중요한 역할을 수행해온 스크립트 언어로 오늘날에는 다양한 실행 환경에서 그 활용 범위를 넓혀가고 있다. 본문에서는 자바스크립트가 주요하게 작동하는 환경 - 브라우저, Node.js, 그리고 Visual Studio Code - 을 다루며 각각에서 자바스크립트가 어떠한 역할을 수행하는지 살펴보고자 한다. 이 세 환경은 자바스크립트를 통해 구현되는 기능과 개발 방식에 있어서 서로 다른 독특한 특성을 제공한다. 브라우저 환경에서 자바스크립트는 사용자와 웹 페이지 간의 상호작용을 동적으로 만들어 내어 보다 풍부한 웹 경험을 가능하게 한다. Node.js 환경에서는 자바스크립트가 서버 측 애플리케이션 개발에 적극 활용되어 웹 개발의 전통적인 범위를 넘어서는 확장성을 제..

왜 중요한가 웹 페이지를 생동감 있고, 반응적으로 만드는 데 필수적인 언어다. 사용자와의 상호작용을 원활하고 매력적으로 처리하여 웹 경험을 향상시킨다. 브라우저 환경뿐만 아니라 Node.js와 같은 서버 사이드 환경에서도 높은 호환성을 보여주며, 이를 통해 플랫폼에 구애받지 않고 다양한 분야에서 사용될 수 있다. 이는 자바스크립트가 단순한 클라이언트 사이드 언어를 넘어 서버 사이드 애플리케이션 개발에도 활용될 수 있음을 의미한다. Node.js Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org V8, SpiderMonkey와 같은 다양한 자바스크립트 엔진을 통해 거의 모든 주요 브라우저에서 ..

JSON Server는 개발 단계에서 프로토타이핑이나 모의(Mocking) API를 신속하게 생성하기 위한 도구이다. 실제 백엔드 서비스 없이 프론트엔드 애플리케이션 개발에 필요한 RESTful API를 모방할 수 있다. 빠른 설치 JSON Server 설치는 Node.js와 npm이 설치된 React 개발 환경에서 간단하게 이루어진다. 글로벌 설치를 원한다면 터미널에 다음을 입력한다. npm install -g json-server React 프로젝트 내에서만 사용하려면 해당 디렉토리로 이동 후 다음 명령어를 실행한다. npm install json-server --save-dev 이후 package.json에 실행 스크립트를 추가하여 쉽게 서버를 시작할 수 있다. "scripts": { "start-..

ESLint는 소스 코드의 문법적 오류를 검출하고, 일관된 코딩 스타일을 유지하기 위한 정적 코드 분석 도구이다. ESLint는 코드를 작성하는 과정에서 설정된 규칙을 기반으로 코드를 분석하고, 위반 사항을 식별하여 개발자에게 알린다. 이러한 프로세스는 개발자가 코딩 규약을 준수하고, 오류 가능성을 줄이며, 유지 보수성을 향상시킬 수 있도록 돕는다. 코드 일관성 프로젝트에 일관된 코딩 스타일을 적용함으로써 가독성과 유지보수성을 향상시킨다. 들여쓰기 규칙(indent): 코드 블록 내의 들여쓰기 수준을 지정하기 위해 ESLint의 indent 규칙은 사용된다. 예를 들어, indent 규칙이 "error", 2로 설정된 경우, 들여쓰기는 2개의 공백으로 일관되게 적용되어야 한다. 이는 소스 코드 내의 블록..

이전 글에서 Grid Container에 대하여 알아보았습니다. 지금부터는 Container의 자식 요소인 Item을 알아봅시다. 아이템의 시작/끝 위치 지정 기존의 코드를 다시 가져와, item들을 어떻게 조작할 수 있는지 알아봅시다. grid-row-start item의 행 시작의 라인 번호를 지정합니다. 이 때, 라인 번호는 사진처럼 개발자 도구에서 Grid를 키게 되면 직관적으로 보이게 되어 작업하는데 수월할 수 있습니다. 이 포스팅에서는 예시로 item-3(c라고 적혀있는 item)의 위치를 변경해보겠습니다. .item-3 { grid-row-start: 2; } grid-row-end 행 마지막의 라인 번호를 지정합니다. .item-3 { grid-row-end: 4; } 행 시작과 마지막 라..

Grid Container 1. 그리드 템플릿 그리드는 행과 열로 정해집니다. 행에 몇 개의 Item이 들어갈 지, 열에 몇 개의 Item이 들어갈 지 결정합니다. 이 때, 그리드 트랙이 정의됩니다. (그리드 트랙이란, 그리드에 그려진 두 라인 사이의 공간입니다.) 1-1. grid-template-rows .container { grid-template-row: 150px 150px; } 그리드의 행에 놓일 아이템들의 크기와 갯수를 정할 수 있습니다. 1-2. grid-template-columns .container { grid-template-columns: 150px 150px 150px 150px; } 그리드의 열에 놓일 아이템들의 크기와 갯수를 정할 수 있습니다. 응용하면 아래와 같습니다. A..

CSS Grid를 공부하면서 알게 된 정보들을 정리하는 글입니다. 들어가기에 앞서.. Grid란? Grid(그리드)란 수평선과 수직선이 교차에서 만들어진 집합체입니다. 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용합니다. 이전에는 파이어폭스의 개발자 모드에서만 그리드를 적용한 모습을 보여주어 설치가 필수적이었습니다. 하지만 2021년 6월경에 크롬 브라우저도 Grid와 Flex의 적용된 모습을 개발자 모드에서 보여주는 기능이 지원되었습니다. 따라서 본인이 편한 환경에서 구현하시면 될 것 같습니다. Grid의 장점 1) 고정 가능한 크기 그리드를 레이아웃에 맞게 원하는 크기로 만들 수 있습니다. 또한, 유연하게 크기를 설정할 수 있도록 fr이라는 단위를 사용해 그리드를 작성..