티스토리

minhi-!

검색하기

블로그 홈

minhi-!

ihnim.tistory.com/m

minhi 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

MODULE_NOT_FOUND 에러 해결하기 MODULE_NOT_FOUND 에러 연결 리스트 코드 작성 후 테스트를 위해 test.js를 실행시켰더니 아래와 같은 에러가 발생하였다.123456789101112131415PS C:\Users\minha\Desktop\boj-javascript> node test.jsnode:internal/modules/cjs/loader:1080  throw err;  ^ Error: Cannot find module 'C:\Users\minha\Desktop\boj-javascript\test.js'    at Module._resolveFilena.. 공감수 1 댓글수 1 2024. 10. 28.
클래스 ② 클래스 고급 앞서 클래스란 무엇인지, 그리고 클래스 내부의 생성자와 메소드는 어떻게 정의하는지 알아보았다. 클래스는 객체를 안전하고 효율적으로 생성하기 위함이라고 하였는데, 앞서 배운 내용만으로는 단순히 객체를 생성하는 함수에 그치지 않는다고 생각될 것이다. 이번 글에서 클래스가 어떻게 객체를 안전하고 효율적으로 생성하는지 알아보자. 상속 상속이란 클래스의 선언 코드를 중복해서 작성하지 않도록 함으로써 코드의 생산 효율을 올리는 문법으로, 어떤 클래스가 가지고 있는 속성과 메소드를 다른 클래스에게 물려줄 수 있도록 한다. 이때 속성과 메소드를 물려주는 클래스를 부모 클래스, 물려받는 클래스를 자식 클래스라고 한다.class 자식 클래스 이름 extends 부모 클래스 이름 {} 자식 클래스의 생성자는 필요할 경우 부.. 공감수 1 댓글수 0 2024. 10. 28.
클래스 ① 클래스 기본 클래스 객체 ① 객체 기본에서 객체란 키와 값으로 구성된 속성을 가지는 자료형이라고 하였다. 이러한 객체를 정의하고 활용하여 프로그램을 만드는 것을 객체 지향 프로그래밍이라고 하며 이때 클래스를 사용하면 객체를 보다 효율적으로 생성할 수 있다. 클래스란 객체를 정의한 설계도로, 다음과 같은 형태로 생성한다.class 클래스 이름 {} 이러한 클래스를 기반으로 생성한 객체는 인스턴스라고 하며 다음과 같은 형태로 생성한다.new 클래스 이름() 즉 클래스는 객체를 만드는 틀, 인스턴스는 각각의 구체적인 객체 정도로 이해할 수 있고 일반적으로 클래스의 첫 글자는 대문자를 가진다. 생성자 앞서 인스턴스를 new 클래스 이름() 으로 생성한다고 하였는데, 이때 이 클래스 이름() 함수를 생성자라고 한다. 생성자는.. 공감수 4 댓글수 4 2024. 10. 28.
예외 처리 ② 예외 처리 고급 앞서 프로그래밍 언어 오류에 해당하는 구문 오류와 예외에 대해 알아보았다. 이번 글에서는 특히 예외를 처리하는 상황에서 사용할 수 있는 고급 기능을 살펴보고자 한다. 프로그래밍 언어에서 예외가 발생하면 예외 객체를 통해 발생한 예외와 관련된 정보를 확인할 수 있다. 그런데 JavaScript는 다른 프로그래밍 언어에 비해 예외가 거의 발생하지 않는 프로그래밍 언어이고 이는 프로그램에 수많은 버그를 일으킬 수 있는 요소가 되기도 한다. 때문에 개발자가 예외를 강제로 발생시켜야 하는 경우도 빈번하게 존재하는데, 이때 throw 키워드를 사용할 수 있다. 예외 객체 앞서 try catch finally 구문에서 catch의 괄호 안에 exception을 입력하였다. 이때 exception이 바로 예외 객체로,.. 공감수 0 댓글수 0 2024. 10. 27.
예외 처리 ① 구문 오류와 예외 프로그래밍 언어에는 크게 두 가지 종류의 오류가 있다.프로그램 실행 전에 발생하는 오류프로그램 실행 중에 발생하는 오류프로그램 실행 전에 발생하는 오류를 구문 오류, 프로그램 실행 중에 발생하는 오류를 예외 또는 런타임 오류라고 한다. 구문 오류 괄호를 닫지 않거나 문자열을 닫지 않는 등이 구문 오류에 해당한다. 구문 오류가 발생하면 웹 브라우저가 코드를 분석할 수 없으므로 프로그램이 실행되지 않는다. JavaScript에서 SyntaxError로 출력되는 오류가 구문 오류에 해당한다. 구문 오류는 웹 브라우저가 어느 위치의 어떤 부분이 문제인지 구체적으로 알려주므로 이를 수정함으로써 해결할 수 있다. 예외 console.log를 console.rog로 작성하는 등이 예외에 해당한다 예외가 발생하면 예외.. 공감수 1 댓글수 0 2024. 10. 27.
문서 객체 모델 ② 이벤트 활용 문서 객체 모델 ① 문서 객체 조작하기에서 addEventListener(), removeEventListener() 메소드를 사용해이벤트를 연결하고 제거하는 방법에 대해 알아보았다. 이번 글에서는 이벤트 관련하여 더 자세히 알아보자. 이벤트 모델이벤트 연결 방법이벤트를 연결하는 방법인 이벤트 모델로는 표준 이벤트 모델, 고전 이벤트 모델, 인라인 이벤트 모델이 있다.body 문서 객체에 keyup 이벤트를 연결하는 상황을 예로 들어보자.표준 이벤트 모델document.body.addEventListener('keyup', (event) => {}) 이전 글에서 배운 addEventListener() 메소드를 사용해 이벤트를 연결하는 것을 표준 이벤트 모델이라고 한다.고전 이벤트 모델document.bo.. 공감수 7 댓글수 8 2024. 10. 26.
문서 객체 모델 ① 문서 객체 조작 HTML 페이지에 있는 html, head, body, title, h1, div, span 등을 HTML에서는 요소, JavaScript에서는 문서 객체라고 부른다.즉 문서 객체를 조작한다는 것은 h1, div, span과 같은 HTML 요소를 조작한다는 의미로, 문서 객체를 조합하여 만든 전체적인 형태를 문서 객체 모델이라고 한다.* * 문서 객체 모델의 넓은 의미는 웹 브라우저가 HTML 문서를 인식하는 방식, 문서 객체 모델의 좁은 의미는 문서 객체의 집합으로, 간단히 이해하면 HTML 문서가 곧 문서 객체 모델인 것 같다. DOMContentLoaded 이벤트 DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽어들인 뒤 발생하는 이벤트로,문서 객체를 조작할 때는 DOMCo.. 공감수 0 댓글수 0 2024. 10. 2.
객체 ③ 객체와 배열 고급 이번 글에서는 앞서 배운 객체 개념을 바탕으로 보다 심화된 내용을 알아보자. 속성 존재 여부 확인하기객체.키로 객체 내 특정 속성 값에 접근할 수 있는데,이때 해당 속성 자체가 존재하지 않으면 undefined를 반환한다. 이를 이용해 객체 내 특정 속성의 존재 여부를 확인할 수 있다.const book = { name: '혼자 공부하는 자바스크립트', author: '윤인성', publisher: '한빛미디어'}if (book.name !== undefined) { console.log('name 속성이 있습니다.')} else { console.log('name 속성이 없습니다.')}if (book.price !== undefined) { console.log('price 속성이 있습니다... 공감수 0 댓글수 1 2024. 9. 30.
객체 ② 기본 자료형과 객체 자료형 기본 자료형과 객체 자료형 앞서 자료와 변수 ① 기본 자료형에서는 기본 자료형에 대해, 객체 ① 객체 기본에서는 객체 자료형에 대해 알아보았다. JavaScript에서의 자료는 기본 자료형과 객체 자료형으로 구분할 수 있는데 기본 자료형으로는 숫자, 문자열, 불이 있고 이 셋을 제외한 나머지는 전부 객체 자료형에 해당된다. 이때 객체는 키와 값으로 구성된 속성을 가지는 자료형으로, 특히 함수 자료형을 가지는 속성은 메소드라고 부른다. 앞서 배운 배열, 함수 또한 객체 자료형으로, 속성과 메소드를 가질 수 있다.> const a = []undefined> a.sample = 1010> a.sample10> typeof(a)"object"> function b () {}undefined> b.sample =.. 공감수 1 댓글수 1 2024. 9. 27.
객체 ① 객체 기본 앞서 반복문 ① 배열에서 배열이란 여러 변수를 한꺼번에 모아 사용하는 자료형이라고 했다. 이때 typeof 연산자를 이용해 배열의 자료형을 확인해보면 object, 즉 객체 자료형이 나온다. 즉 배열은 객체의 한 종류라는 것인데, 과연 객체란 무엇일까? 객체 객체는 키와 값으로 구성된 속성을 가지는 자료형으로, 중괄호를 사용해 생성하고 내부의 값을 쉼표로 구분한다. 이때 이 내부의 값을 속성이라 하고, 하나의 객체는 다양한 자료형의 속성을 가질 수 있다. 다음은 객체의 예시이다.const book = { name: '혼자 공부하는 자바스크립트', author: '윤인성', publisher: '한빛미디어'} 속성 속성은 객체 내부의 값으로, 키와 값으로 구성된다. 속성 값에 접근하기 객체 내 속성 .. 공감수 0 댓글수 0 2024. 9. 22.
함수 ② 함수 고급 콜백 함수 JavaScript에서는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있고, 이렇게 매개변수로 전달되는 함수를 콜백 함수라고 한다. 0번째 함수 호출1번째 함수 호출2번째 함수 호출 함수를 매개변수로 가지는, 즉 콜백 함수를 사용하는 주요 메소드로는 forEach(), map(), filter()가 있다. forEach(), map(), filter() 모두 배열이 가지고 있는 메소드로, 다음과 같은 형태로 사용된다.배열.메소드(function (value, index, array) {}) 즉 콜백 함수는 function (value, index, array) {}와 같은 형태를 가지는데, 이때 value, index, array 중 필요한 매개변수만 선택적으로 순서에 맞춰 입력하면 되고 .. 공감수 1 댓글수 2 2024. 9. 22.
함수 ① 함수 기본 익명 함수 함수는 코드의 집합을 나타내는 자료형으로, 함수의 기본 형태는 이름이 없는 함수인 익명 함수이다.function () {} 함수가 실행되었습니다.f () { console.log('함수가 실행되었습니다.')}더보기나는 위 예제 코드가 뭔가 어색하게 느껴졌었는데, 함수도 하나의 자료형임을 떠올려보면 함수 자료형의 변수를 선언한 것일 뿐이니 이상할 거 없는 코드이다. 선언적 함수 하지만 일반적으로는 이름이 있는 함수를 많이 사용하는데, 이를 선언적 함수라고 한다.function 함수명 () {} 위 코드는 익명 함수를 다음과 같이 사용한 경우와 동일하다.let 함수명 = function () {} 함수가 실행되었습니다.f func () { console.log('함수가 실행되었습니다.')} 익.. 공감수 1 댓글수 3 2024. 9. 17.
반복문 ② 반복문 JavaScript에서 사용할 수 있는 반복문에는 for in 반복문, for of 반복문, for 반복문, while 반복문이 있다. for in 반복문for (const 반복 변수 in 배열 또는 객체) { 문장} for in 반복문은 배열의 인덱스를 기반으로 반복할 때 사용하고, 배열의 인덱스를 반복 변수로 사용한다.0번째 요소: 101번째 요소: 202번째 요소: 30 for of 반복문 for in 반복문은 배열의 인덱스를 반복 변수로 사용하기 때문에 반복문 내부에서 요소에 접근하려면 배열[인덱스]의 형태를 사용해야 하고, for in 반복문을 안정적으로 사용하기 위해선 위 기본형에 몇 가지 코드를 추가해야 한다. for in 반복문의 이러한 약점을 해결하기 위해 등장한 것이 for of 반복.. 공감수 0 댓글수 1 2024. 9. 17.
반복문 ① 배열 배열과 요소 배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형으로, 대괄호를 사용해 생성하고 내부의 값을 쉼표로 구분한다. 이때 이 내부의 값을 요소라고 하고, 하나의 배열은 다양한 자료형의 요소를 가질 수 있다.** 예를 들어 [10, '10', true, function () {}, {}, [10, 20]]과 같은 형태의 배열도 가능하다. 배열 요소에 접근하기배열[인덱스] 배열을 생성할 때도 대괄호를 사용하지만, 요소에 접근할 때도 대괄호를 사용한다. 배열명 뒤에 대괄호를 입력하고 대괄호 사이에 인덱스를 입력하면 인덱스에 해당하는 요소에 접근할 수 있다.> const numbers = [10, 20, 30]undefined> numbers[0]10> numbers[1]20> number.. 공감수 1 댓글수 1 2024. 9. 16.
조건문 ③ 연산자를 이용한 조건문 JavaScript에서 사용할 수 있는 조건문 중 연산자를 사용한 조건문에 대해 알아보자. 조건부 연산자불 값을 리턴하는 표현식 ? 표현식이 true일 때의 결과 : 표현식이 false일 때의 결과 JavaScript에서 3개의 항을 갖는 연산자는 조건부 연산자가 유일해 조건부 연산자를 삼항 연산자라고 부르기도 한다. 아래는 조건부 연산자를 사용한 조건문의 예시이다. 짧은 조건문 논리합 연산자를 사용한 짧은 조건문불 값을 리턴하는 표현식 || 표현식이 false일 때 실행할 문장 JavaScript는 표현식의 값이 true가 확실할 경우 추가 연산을 진행하지 않고, 논리합 연산자는 두 개의 항 중 하나만 true여도 true를 리턴한다. 즉, 논리합 연산자의 좌변이 true면 우변을 실행하지 않고 이는.. 공감수 1 댓글수 1 2024. 9. 14.
조건문 ② switch 조건문 JavaScript에서 사용할 수 있는 조건문 중 switch 조건문에 대해 알아보자. switch 조건문switch (표현식) { case 표현식의 값 1: break case 표현식의 값 2: break default: break}이때 default 구문은 생략할 수 있다. 일반적으로 switch 조건문은 특정 표현식의 값을 기준으로 조건을 분기할 때 사용하고, 특정 표현식의 범위를 기준으로 조건을 분기하는 것은 불가능하지는 않지만 어렵다. 아래는 switch 조건문을 이용해 특정 표현식의 범위를 기준으로 조건을 분기하는 예시이다. 이 글은 혼자 공부하는 자바스크립트 (윤인성 저)를 바탕으로 공부한 내용을 작성한 글입니다. 공감수 0 댓글수 0 2024. 9. 14.
조건문 ① if 조건문 JavaScript에서 사용할 수 있는 조건문 중 if 조건문에 대해 알아보자. if 조건문if (불 값을 리턴하는 표현식) { 표현식이 true일 때 실행할 문장} if else 조건문if (불 값을 리턴하는 표현식) { 표현식이 true일 때 실행할 문장} else { 표현식이 false일 때 실행할 문장} 중첩 조건문if (불 값을 리턴하는 표현식 1) { // 표현식 1이 true일 때 실행할 조건문 if (불 값을 리턴하는 표현식 2) { 표현식 2가 true일 때 실행할 문장 } else { 표현식 2가 false일 때 실행할 문장 }} else { // 표현식 1이 false일 때 실행할 조건문 if (불 값을 리턴하는 표현식 3) { 표현식 3이 true일 .. 공감수 0 댓글수 0 2024. 9. 14.
입력과 출력 JavaScript에서 사용할 수 있는 입력 방법과 출력 방법의 일부를 알아보자. 입력 문자열 입력prompt(메시지 문자열, 기본 입력 문자열) 불 입력confirm(메시지 문자열) 출력 개발자 도구 출력 웹 브라우저의 주소창에 about:blank를 입력하고 개발자 도구의 Console 탭에 들어가면 입력과 출력을 즉각적으로 확인할 수 있다. 경고창 출력alert(출력 문자열) 콘솔 출력console.log(출력 문자열) 이 글은 혼자 공부하는 자바스크립트 (윤인성 저)를 바탕으로 공부한 내용을 작성한 글입니다. 공감수 1 댓글수 1 2024. 9. 14.
자료와 변수 ③ 상수와 변수 앞서 자료와 변수 중 자료에 대해 알아보았으니 이번 글에선 변수에 대해 알아보자.상수'항상 같은 수'라는 의미로, 한 번 값을 할당하면 변경할 수 없다. 상수는 const 키워드를 사용해 선언하며 선언 시 할당된 값은 이후 변경될 수 없다.이때 특정한 이름의 상수는 한 파일에서 한 번만 선언할 수 있고 선언 시 반드시 값을 함께 지정해주어야 한다.변수'변할 수 있는 수'라는 의미로, 값을 계속 변경할 수 있다. 변수는 let 키워드를 사용해 선언하며 선언 시 할당된 값은 이후 변경될 수 있다.이때 특정한 이름의 변수는 한 파일에서 한 번만 선언할 수 있고 선언 시 값을 함께 지정해주지 않아도 된다.변수에 사용할 수 있는 연산자는 다음과 같다.복합 대입 연산자: +=, -=, *=, /=, %=증감 연산자.. 공감수 0 댓글수 0 2024. 9. 14.
자료와 변수 ② 자료형 변환 앞서 자료와 자료형에 대해 알아보았으니 이번 글에선 자료형 간의 변환에 대해 알아보자. 숫자 자료형으로 변환하기 다른 자료형을 숫자 자료형으로 변환할 때는 Number() 함수 또는 숫자 연산자를 사용할 수 있다. Number() 함수는 문자열 자료형을 숫자 자료형으로, 불 자료형 true는 1, false는 0으로 변환한다.> Number("10")10> Number(true)1> Number(false)0 문자열 자료형 또는 불 자료형에서 0을 빼거나, 1을 곱하거나, 1로 나누면 각 자료형을 숫자 자료형으로 변환할 수 있다.> "10" - 010> true - 01> false - 00더보기더보기다른 자료형을 숫자 자료형으로 변환하다보면 NaN 값을 만나게 되는데, 이때 NaN 값은 자료형은 숫자 .. 공감수 0 댓글수 0 2024. 9. 14.
자료와 변수 ① 기본 자료형 이번 글에선 자료와 변수 중 먼저 자료에 대해 알아보자. 자료와 자료형 프로그램이 처리할 수 있는 모든 것을 자료라고 하고 프로그래밍 언어는 자료를 쉽게 다룰 수 있도록 자료를 형태에 따라 구분하여 관리하는데,이때 자료를 형태에 따라 구분해놓은 것을 자료형이라고 한다.JavaScript에서는 다양한 자료형을 제공하는데, 특히 숫자, 문자열, 불 자료형이 가장 기본적이다.숫자 자료형 JavaScript에서는 숫자를 입력해 숫자 자료형을 생성한다.다른 프로그래밍 언어에서 int, float과 같이 소수점이 없는 숫자의 자료형과 소수점이 있는 숫자의 자료형을 구분했던 것과 달리,JavaScript에서는 소수점이 없는 숫자와 소수점이 있는 숫자를 숫자 자료형 하나로 구분한다.> 1010> 10.2310.23숫자.. 공감수 0 댓글수 0 2024. 9. 14.
JavaScript 기본 JavaScript의 구체적인 내용을 학습하기에 앞서, JavaScript의 기본 개념 중 중요한 부분과 내가 자주 헷갈려하는 부분을 정리해보았다.표현식과 문장 표현식은 값을 만들어 내는 간단한 코드를, 문장은 하나 이상의 표현식이 모인 것을 의미한다.코드를 읽어 들이는 기본 단위는 문장으로, 문장과 문장은 줄바꿈 또는 세미콜론으로 구분하고 줄바꿈과 세미콜론 모두 사용할 수도 있다.키워드와 식별자 키워드는 JavaScript가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어를, 식별자는 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어를 의미한다.식별자를 만들 때는 반드시 다음의 규칙을 준수해야 한다.키워드를 사용할 수 없다.숫자로 시작할 수 없다.공백 문자를 포함할 수 없다.특수 문자는 _와 $만 .. 공감수 0 댓글수 1 2024. 9. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.