쁘띠코딩

Javascript 코드 디버깅하기 디버깅은 모든 프로그래머에게 필수적인 기술이며 JavaScript 개발자에게도 예외는 아닙니다. JavaScript는 복잡하고 동적인 애플리케이션을 만드는 데 사용할 수 있는 강력한 언어이지만, 오류가 발생할 때 디버깅하기 어려울 수도 있습니다. 오늘은 최신 웹 브라우저에 포함된 디버거와 타사 애플리케이션에서 제공하는 강력한 도구를 비롯한 디버깅 도구를 사용하여 JavaScript 코드를 디버깅하는 방법을 살펴보겠습니다. 최신 웹 브라우저에 기본으로 내장된 디버거 사용하기 대부분의 최신 웹 브라우저에는 개발자가 JavaScript 코드를 실시간으로 검사하고 디버깅할 수 있는 디버깅 도구(개발자 도구)가 내장되어 있습니다. 예를 들어 Chrome DevTools, Fir..

타입스크립트(TypeScript)는 자바스크립트의 상위 집합 언어로, 정적 타이핑을 지원하여 코드의 안정성과 가독성을 높이는 것이 가능합니다. 이번 포스팅에서는 타입스크립트로 구구단을 출력하는 간단한 예제를 작성해보겠습니다. 우선, 타입스크립트 환경을 구성해야 합니다. 타입스크립트를 사용하기 위해서는 TypeScript 컴파일러를 설치해야 합니다. 다음 명령어를 터미널에서 실행하여 TypeScript 컴파일러를 설치해줍니다. npm install -g typescript 이제 타입스크립트를 사용하여 구구단을 출력하는 코드를 작성해보겠습니다. function printMultiplicationTable(): void { for (let i = 1; i

자바스크립트와 타입스크립트는 모두 웹 개발 분야에서 매우 인기 있는 프로그래밍 언어입니다. 하지만 이 두 언어는 어떤 차이점이 있을까요? 이번 포스팅에서는 자바스크립트와 타입스크립트의 차이점과 장단점에 대해 알아보겠습니다. 자바스크립트는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다. 이 언어는 간단하고 직관적이며, 동적 타이핑 언어이기 때문에 타입을 선언하지 않아도 됩니다. 이러한 특징은 빠른 개발과 유연성을 제공하지만, 대규모 프로젝트에서는 유지보수성이 떨어지고 디버깅이 어려울 수 있습니다. 반면에, 타입스크립트는 자바스크립트에 정적 타이핑을 추가한 언어입니다. 이는 코드 실행 전에 변수의 타입을 검사하므로 더 안정적이고 유지보수하기 쉽다는 장점이 있습니다. 또한, 코드 자동 완성, ..

1. split - 문자열을 원하는 토큰 기준으로 나누어 배열로 리턴한다. 예를 들어 다음 문장을 배열에 넣고 싶다면: Apple,Tomato,Grape,Banana split을 사용하여 다음과 같이 호출하면 된다. const list = "Apple,Tomato,Grape,Banana"; const result = list.split(','); console.log(result); // [Apple, Tomato, Grape, Banana] 만약 이 배열을 다시 다른 토큰을 사용해 결합하고 싶다면 join을 사용해 문자열로 변환할 수 있다. const list = "Apple,Tomato,Grape,Banana"; const result = list.split(','); console.log(resul..

콜백 함수는 이름만 언뜻 들어보면 어렵게 느껴진다. 어떤 함수 내에서 호출하기 위해 그 함수를 호출할 때 인자로 넘겨지는 함수를 바로 콜백 함수라고 하는데, 이 콜백함수는 비단 자바스크립트 뿐 아니라 거의 모든 종류의 프로그래밍 언어에서 구현이 가능하다. 예를 하나 들어 보자. const merryChristmas = (name) => { console.log(name + ", Merry Christmas!"); } merryChristmas("Petit"); 위 함수는 매우 단순하다. 이름을 인자로 넘겨주면, 그 이름을 화면에 크리스마스 인사와 함께 뿌려준다. 그럼 새해 인사를 뿌려주는 함수를 하나 더 만들어보자. const happyNewYear = (name) => { console.log(name..

Favicon - 내 홈페이지를 좀더 예쁘게 꾸미는 방법 Favicon은 아주 최소한의 노력으로 홈페이지의 완성도를 올릴 수 있는 방법이다. 바로 브라우저 상단 탭에 내 홈페이지의 로고가 나오도록 하는 것. 이것은 비단 브라우저 탭 뿐 아니라 주소 창에서도 요렇게 보여진다. 파비콘을 삽입하는 방법은 매우 간단하다. index.html내의 파비콘 로고는 16x16, 32x32 등 정사각형으로 준비해준다. 다음 영상에서 파비콘 삽입 예시를 확인할 수 있다 HTML 삽입 미리보기할 수 없는 소스

로또 번호 생성 프로그램~ 광고 등을 통해 많이 보셨죠? 오늘은 로또 번호 생성 코드를 만들어보려고 합니다. 저는 javascript / html/ css를 사용해서 만들었어요 우선 HTML 코드입니다 번호 받기 number클래스로 지정된 div들이 7개의 로또 구슬이 될 거구요, 버튼을 클릭하면 이 구슬들에 랜덤으로 번호가 나타납니다. Javascript코드는 이렇게 될거에요~ button의 onclick이벤트 함수 안에서 구슬 엘리먼트 (number)들 안에 숫자를 표시해 주는 로직입니다. let element = document.getElementById("button"); element.onclick = () => { let result = []; while(1) { var num = parseI..

HTML/CSS UL, OL HTML에서 리스트를 작성하기 위해 사용되는 태그들이 있다. 바로 UL / OL / DL등이 그것인데, 각각 다음과 같은 의미를 가지고 있다. Unordered List (정렬되지 않은 목록) Ordered List (정렬된 목록) Description/Defined List (서술(정의) 목록) Unordered List는 목록이 다음과 같이 보여진다. 목록은 태그 안에 정해주어야 한다. List 1 List 2 List 3 List 1 List 2 List 3 만약 CSS 속성의 list-style-type 항목을 circle로 설정해 주면 이렇게 보인다. List 1 List 2 List 3 CSS를 사용해서 원하는 모양으로 바꾸어 주면 되고, 만약 원하지 않으면 해당 ..

CSS에서 색상 표기법은 여러 가지가 있다. 다음과 같이 배경색을 지정했다고 했을 때, 배경은 무슨 색이 나올까? 1. background: #ff0000; 2. background: #F00; 3. background: rgb(255, 0, 0); 4. background: red; 5. background: rgba(255, 0, 0, 1); 6. background: rgba(255, 0, 0, 100%); 7. background: rgba(255 0 0 / 1); 8. background: rgba(255 0 0 / 100%); 정답은 모두 빨강 이다. rgb의 값은 Red (빨강), Green(초록), Blue(파랑) 이렇게 세 가지로 구성되어 있는데, 이는 16진수 헥사코드에서도 동일한 구성..

Javascript has a special type named undefined. This means, someone defined the variable but didn't set the value yet. For example: var a; console.log(a); // undefined Do you think null == undefined is true? If you use == for comparing them, it's true. (false == false) but if you use === , then it says false. (undefined !== null) That means, they're basically different. Here's an example for unde..