혹시 기술블로그 보다보면 이런식으로 코드표현된거 본적 있지 않으신가요? 본적이 없다고 하더라도- 깃헙에 ReadMe파일을 작성할때 코드를 예쁘게 보여주고 싶은 경우- 기술블로그에 코드를 올리고 싶은데 밋밋해 보일때- 코드리뷰할 때 특정 부분만 캡쳐해서 공유하고 싶을때이럴때 사용하기 좋은 라이브러리가 있는데요,VSCode의 확장프로그램CodeSnap입니다!Crtl + Shift + X 단축키로 확장프로그램 창을 연 후,CodeSnap입력후 찾아서 설치하시면 됩니다.설치 후, 코드캡쳐 방법1. 캡처할 코드를 드래그 합니다.2. 우클릭 후 하단의 CodeSnap을 선택한다.3. (1)번을 눌러 이미지를 저장하거나, (2)번을 우클릭하여 복사할 수 있다.

자바스크립트(JavaScript)는 동적인 웹 페이지를 작성하기 위해 사용되는 언어입니다.모든 웹브라우저에서 지원하며, 웹 페이지를 보다 상호작용적으로 만들 수 있게 해줍니다. HTML이나 CSS와 달리, 자바스크립트는 웹 페이지에서 동적으로 콘텐츠를 업데이트하거나 사용자 이벤트에 반응할 수 있습니다. 동적 웹 페이지 작성 언어: 자바스크립트는 사용자가 웹 페이지와 상호작용할 수 있도록 해줍니다.브라우저 호환성: 대부분의 웹 브라우저는 자바스크립트를 기본적으로 지원합니다.자바스크립트의 주요 특징들을 알려줘 인터프리터 언어: 코드를 한 줄씩 해석하여 실행하는 방식의 언어입니다.동적 타이핑(Dynamic Typing): 변수의 타입이 고정되지 않고, 실행 시점에 결정됩니다.객체 기반 언어: 객체를 중심으로 ..

자바스크립트의 Math 내장 객체안녕하세요, 친구들! 오늘은 자바스크립트의 강력한 내장 객체 중 하나인 Math 객체에 대해 알아볼 거예요. 숫자와 관련된 다양한 작업을 쉽게 할 수 있게 도와주는 이 객체를 통해 코딩을 더욱 재미있게 만들어봐요! 🚀1. Math.min(val1, val2, val3, val4)Math.min 메서드는 주어진 숫자 중 가장 작은 값을 반환해요.let result = Math.min(10, -10, 20, 50, -30);console.log(result); // -30 2. Math.max()Math.max 메서드는 주어진 숫자 중 가장 큰 값을 반환해요.let result = Math.max(10, -10, 20, 50, -30);console.log(result); ..

자바스크립트의 문자열 객체안녕하세요:)오늘은 자바스크립트에서 자주 사용하는 **문자열 객체(String)**에 대해 배워볼 거예요. 문자열 객체는 텍스트 데이터를 쉽게 다루고 조작할 수 있게 해주는 다양한 메서드를 제공해요. 함께 알아볼까요? 🚀 .split([separator[,limit]])split 메서드는 문자열을 지정한 구분자(separator)로 나눠서 배열로 반환해요.let url = 'https://www.naver.com';let splitArr = url.split("://");console.log(splitArr); // ['https', 'www.naver.com'] .charAt(index)charAt 메서드는 지정한 인덱스에 해당하는 문자를 반환해요.let url = 'http..

자바스크립트의 배열 객체안녕하세요, 친구들! 오늘은 자바스크립트에서 자주 사용하는 **배열 객체(Array)**에 대해 배워볼 거예요. 배열 객체는 데이터를 쉽게 다루고 조작할 수 있게 해주는 다양한 메서드를 제공해요. 함께 알아볼까요? 🚀배열 객체 생성배열 객체를 생성하는 방법은 아주 간단해요. 예를 들어볼까요?let arr = [10,20,30];이렇게 하면 숫자 10, 20, 30이 들어있는 배열이 생성돼요. .push()push 메서드는 배열의 끝에 새로운 요소를 추가해요.let arr = [10, 20, 30];arr.push(40);console.log(arr); // [10, 20, 30, 40] .shift()shift 메서드는 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환해요.l..

자바스크립트의 표준 내장 객체란?안녕, 친구들! 오늘은 자바스크립트에서 꼭 알아야 할 표준 내장 객체에 대해 얘기해볼 거야. 이 객체들은 자바스크립트 엔진에 기본적으로 내장되어 있어서 언제 어디서나 사용할 수 있어! 😎표준 내장 객체란?표준 내장 객체는 자바스크립트 엔진에 항상 존재하는 객체들이야. 덕분에 우리가 코드를 작성할 때 정말 유용하게 쓸 수 있어. 대표적인 표준 내장 객체에는 다음과 같은 것들이 있어:ObjectFunctionArrayStringBooleanNumberMathDateRegExp 이 모든 걸 한 번에 기억하는 건 어려워. 그래서 필요할 때마다 문서를 참고하면 돼! 📚https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference..

오늘은 웹 페이지에서 일어나는 여러 가지 이벤트에 대해 얘기해볼게.자바스크립트로 페이지를 더 인터랙티브(interactive)하게 만들려면 이벤트를 잘 이해하고 활용하는 게 중요해.이벤트란?**이벤트(event)**란 브라우저에서 발생하는 상호작용을 말해. 예를 들어 사용자가 마우스를 클릭했을 때, 더블 클릭했을 때, 키보드 버튼을 눌렀을 때, 스크롤을 했을 때 등등이 있어. 이런 상호작용이 발생하면 자바스크립트에서는 이벤트가 발생했다고 표현해. 이벤트는 크게 세 가지로 구분할 수 있어:이벤트 타겟(event target),이벤트 타입(event type),이벤트 핸들러(event handler).이벤트 타겟이벤트 타겟은 이벤트가 일어난 문서 객체를 의미해.예를 들어, 버튼을 클릭했다면 그 버튼이 이벤트..

안녕! 반가워, 나는 평범한 컴공 대학생이야.오늘은 웹 개발의 기초 중 하나인 DOM에 대해 알려줄게. 혹시 웹 페이지를 꾸밀 때 HTML과 CSS만 써봤다면, 이제는 자바스크립트를 통해 페이지를 동적으로 제어하는 방법도 알아두면 좋아!이를 위한게 바로 Documents Object Model => DOM이야!DOM이 뭐야?**DOM(Documents Object Model)**은 웹 페이지를 자바스크립트로 제어하기 위한 모델이야. 웹 브라우저에 표시되는 HTML 태그들을 자바스크립트가 이해할 수 있게 객체로 변환한 거라고 생각하면 돼. 이를 통해 자바스크립트가 웹 페이지의 요소들을 선택하고, 수정하고, 삭제할 수 있는 거지.다시 말해서, 웹 브라우저가 HTML 문서를 파싱해서 객체 형태로 변환한 결과물..