쁘띠코딩

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..

로또 번호 생성 프로그램~ 광고 등을 통해 많이 보셨죠? 오늘은 로또 번호 생성 코드를 만들어보려고 합니다. 저는 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..

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..

Javascript에서 문자열을 출력할때 보통 다음과 같이 + 연산자를 사용하여 문자열을 출력한다. console.log("Test" + apple + "it"); 그런데 ES6에서는 + 연산 외에도 다음과 같이 ` 기호 를 사용해 문자열 출력이 가능하다. console.log(`Test ${apple} it`); 상황과 취향에 맞게 적당히 골라서 사용하면 된다. :-)

자바스크립트를 처음 시작할 때 다른 언어에는 없어서 헷갈렸던 "===" 이건 도대체 뭘까요? 보통 C언어나 Java에서는 보이지 않는 "==="는 생각보다 단순한 개념을 가지고 있습니다. 예제를 한번 볼까요? 다음 중 어떤 것이 거짓일까요? 10 == "10" 0 == false 1 == true 1 == 1 "apple" == "apple" null == undefined 네, 모두 참(True) 입니다. 타입을 엄격하게 지정하는 Java나 c와는 달리, 자바스크립트에서는 var / let/ const등을 통해 모든 타입의 변수를 선언합니다. 그래서 자바스크립트에서는 "===", "!==" 를 사용하는 것을 권장합니다. 그런 경우 위의 케이스에서 대부분의 비교문들이 거짓(False)이 되겠죠? "===..

안녕하세요, 쁘띠 코딩입니다. C나 Java등과는 다르게 자바스크립트의 경우에는 var 또는 let 을 이용해 다양한 타입의 변수를 선언할 수 있습니다. 그런데 이 변수들은 어떤 차이가 있을까요? 오늘은 자바스크립트 변수 타입에 대해 한번 알아보겠습니다. var는 function scoped 변수입니다. 즉 주어진 함수 내에서 사용할 수 있는 변수를 의미하는데요, 다음과 같은 함수가 있을 때, 이 함수 내에서 해당 변수를 호출하면 그 위치가 어디가 되었든 오류 없이 변수에 엑세스가 가능합니다. const functionScopedExample = () => { valueA = 5; console.log("value A: ", valueA); var valueA = 6; console.log("value ..