소상공인 감자네

지금까지 우리가 만든 객체는 대부분 객체 리터럴(const user = { name: '...' }) 방식으로 한 번에 만들었다.하지만 만약 비슷한 구조를 가진 수백 개의 객체를 만들어야 한다면 매우 비효율적일 것이다. 클래스(Class) 는 이 문제를 해결해 줄 수 있다. 클래스는 객체를 만들어내는 '설계도' 또는 '틀'의 역할을 한다.한 번 클래스를 잘 만들어두면, 이 설계도를 바탕으로 수많은 객체를 찍어내듯 효율적으로 생성할 수 있게 된다. 1. 클래스(Class) 란?클래스는 특정한 종류의 객체를 생성하기 위한 템플릿 또는 설계도다. a. 클래스 선언과 네이밍 규칙 (파스칼 케이스) 클래스를 선언할 때는 반드시 class 키워드를 사용한다. 그리고 네이밍 규칙을 파스칼 케이스(Pascal Case..

웹 페이지에서 사용자의 행동(클릭, 키 입력, 마우스 이동 등) 이나 브라우저의 변화(페이지 로딩 완료 등) 를 '이벤트(Event)' 라고 부른다. 그리고 이 이벤트가 발생했을 때, 우리가 원하는 자바스크립트 코드를 실행하도록 연결하는 과정을 이벤트 처리(Event Handling) 라고 한다. 이번에는 이벤트 처리를 위한 가장 표준적이고 강력한 방법인 addEventListener 를 중심으로, 웹 상호작용의 기본 원리에 대해 알아보도록 하자. 1. 이벤트 처리의 기본구조과거에는 HTML 태그 안에 onclick="..." 과 같이 직접 자바스크립트 코드를 작성하는 방식도 있었지만, 이는 코드가 지저분해지고 유지보수가 어려운 점이 있다.현대 자바스크립트에서는 addEventListener 메서드를 사..

자바스크립트에서는 변수, 함수, 클래스 등의 이름을 짓는 규칙이 여러가지 있다.그 중 대표적인 세 가지 컨벤션에 대해 알아보도록 하자. 1. 카멜 케이스(Camel Case)카멜 케이스는 낙타의 등처럼 중간에 볼록 솟아오른 모양을 하고 있다고 해서 붙여진 이름이다.자바스크립트에서 가장 많이 사용되는 네이밍 방식이며, 거의 모든 상황에서 이 규칙을 따라야 한다. a. 특징 및 규칙- 첫 번째 단어는 소문자로 시작한다.- 두 번째 단어부터는 첫 글자를 대문자로 시작하여 단어를 구분한다.- ex) userName, totalCount b. 사용 대상- 변수 : let firstName = 'John';- 함수 : function getUserName () {...}- 객체의 메서드 : user.getUserI..

1. 요소의 내용 조작하기HTML 요소의 태그 사이에 들어가는 텍스트나 다른 HTML 태그를 조작하는 방법이다.두 가지 속성이 사용되며, 역할이 명확히 다르다.a. 텍스트만 변경 - textContenttextContent 는 요소 내부의 순수한 텍스트 내용만을 가져오거나 설정할 때 사용한다.보안상 가장 안전하며, 성능도 준수하다. - 용도 : 사용자에게 보여줄 단순한 텍스트나 숫자만 변경 시- 특징 : 새로운 HTML 태그가 삽입되면, 그것을 태그가 아닌 일반 텍스트로 처리/*HTML 예시기존 텍스트*/// 1. 변경할 태그 선택const messageDiv = document.querySelector('#message');// 2. 내용 설정 (순수한 텍스트만 삽입)messageDiv.textCont..

자바스크립트를 사용하면 변수, 함수, 반복문등을 사용하면서 코드를 순서대로 실행하는 것에 익숙해 진다.하지만 실제 자바스크립트는 단순한 순차 실행을 넘어, '특정 시점'에 실행을 예약하는 방식으로 동작하게 된다.이 '실행 예약'의 핵심 주인공이 바로 콜백 함수(Callback Function)이다. 1. 콜백 함수(Callback Function)란?콜백 함수는 다른 함수에 인수로 전달되는 함수이며, 전달받은 함수 내부에서 특정한 시점 또는 조건이 되었을 때 호출되는 함수이다. 이름 그대로 나중에 부른다는 의미를 담고 있다. 2. 비동기 처리(Asynchronous Operation)의 핵심자바스크립트는 기본적으로 단일 스레드(Single Thread)로 작동한다.즉 한 번에 하나의 작업만 순서대로 처..

우리가 알고 있던 함수는 대부분 이름을 가지고 있다.예를 들어,function sum(a,b){ return a + b;} 이런식으로 이름을 가진 함수를 기명 함수(Named Function) 라고 한다. 하지만 자바스크립트를 하다보면 이름 없이 정의된 함수들을 작성하고 만나게 될 것이다.바로 익명 함수(Anonymous Function) 인데, 익명 함수는 자바스크립트의 많은 동적인 기능의 기반이 된다. 1. 익명 함수란?익명 함수는 말 그대로 이름이 없는 함수이다.자바스크립트에서 함수는 다른 언어와 달리 일급 객체로 취급이 된다.이 뜻은 함수를 일반적인 값처럼 다룰 수 있다는 의미인데, - 변수를 저장할 수 있다. (함수 표현식)- 다른 함수의 인수로 전달할 수 있다. (콜백 함수)- 다른 함수의 ..

화살표 함수(Arrow Function)는 2015년에 등장한 ES6(ECMAScript 2015)의 핵심기능으로,전통적인 함수보다 코드를 훨씬 짧고 읽기 쉽게 만들어 준다.게다가 자바스크립트에서 가장 까다로운 개념 중 하나인 this의 동작 방식까지 단순화 시켜주는 강력한 도구이다. 1. 화살표 함수(Arrow Function)?화살표 함수는 기존의 function 기워드 대신 => (화살표) 기호를 사용하여 함수를 정의하는 방식이다.주로 익명 함수(이름이 없는 함수)를 필요로 할 때 코드를 간결하게 만들기 위해 사용된다. a. 기본 문법전통적인 함수 선언 방식과 화살표 함수 방식을 비교해서 알아보면구분일반 함수(Function Expression)화살표 함수(Arrow Function)코드const ..

배열(Array)을 반복해서 원하는 값을 찾거나 수정하는 작업을 하다 보면,객체(Object)도 같은 기능을 사용하면 참 좋겠다는 생각이 들 때가 있다. 코딩을 하다보면 배열보다는 객체를 이용해 데이터를 사용하는 일이 훨씬 많기 때문이다.for...in 문은 이런 상황에 객체를 이용해 작업할 수 있게 해주는 도구이다. 객체의 키(Key) 를 확인하여 값(Value)을 찾아내는 작업을 할 수 있다. 1. for...in 의 기본 구조for...in 은 for...of 와 비슷해 보이지만 목적이 완전히 다르다. for...of 는 배열에 무엇이 있는지 알아내야 할 때 주로 사용하고 for...in 은 객체에 어떤 이름(키)의 속성(값)이 있는지 알고 싶을 때 사용한다. 주 사용처가 배열과 객체라는 차이점도 ..

while 문은 조건에 따라 유연하게 반복문을 처리하고for 문은 인덱스(i)를 통해 배열의 요소를 처리한다. 하지만 조금 간단하게 조건이나 인덱스가 아닌 순수 배열 안에 담겨있는 값을 간단하게 접근할 수 있게 도와주는 구문이 있다. 바로 for ... of 인데 이는 배열(Array), 문자열(String) 등 순서가 있는 데이터에서 값(Value)에 직접 접근하게 도와준다. 1. for ... of 의 기본 구조for ... of 반복문은 문법이 매우 간단하다.반복에 필요한 변수와 데이터 소스만 명시하면 된다.for ( let 요소 of 반복가능한데이터) { // 반복 가능한 데이터의 "값"이 요소 변수에 할당 // 이 "값"을 이용해 실행할 코드를 작성} a. 요소(값)let 요소 의 변수에 반..

자바스크립트 반복문에서 가장 많이 쓰이는 핵심 이 바로 for문.while 반복문은 특정 조건에 특화되어 많이 사용되고,for 문은 일반적으로 가장 많이 쓰이는 반복문이라고 불 수 있다. while문과 달리 for 문은 정확히 몇 번 반복할지 횟수를 정하는 차이가 있다. 1. for 문의 기본 구조for 문은 반복에 필요한 세 가지 핵심 정보를 괄호 () 안에 순서대로 명시한다.이 정보들은 각각 세미콜론 ; 으로 구분된다.for( 초기식; 조건식; 증감식; ){ // 조건식이 참(true)일 때 반복해서 실행할 코드 블록}for(let i=0; i a. 초기식반복문이 시작될 때 딱 한 번만 실행된다.주로 반복 횟수를 셀 카운터 변수를 선언하고 초기값을 할당한다.기본적으로 i (index)를 사용하며, ..