소상공인 감자네

자바스크립트에서 this 는 '현재 실행 중인 컨텍스트(문맥)를 참조하는 객체' 를 가리킨다.this가 누구를 가리키는지 결정하는 규칙은 단 네 가지이며, 이는 함수가 '어떻게' 호출되었는지에 따라 결정된다. 1. this 의 기본 개념this는 함수가 실행될 때, 그 함수를 누가(어떤 객체가) 실행하고 있는지를 알려주는 재활용 가능한 객체 참조자다. - 필요성함수 코드를 여러 객체가 공유할 수 있도록 해준다.this.name 이라고 코드를 작성한다면, user1이 실행할 때는 user1.name을,user2가 실행할 때는 user2.name을 참조하게 된다. 2. this 를 결정하는 4가지 규칙규칙1 : 기본 바인딩 (독립 호출) 어떤 객체에도 속하지 않은 함수가 단순히 함수() 형태로 호출될 때 적..

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

웹사이트가 동작할 때, 화면에 보이는 정보(사용자 목록, 상품 정보, 게시글)는 대부분 서버라는 곳에서 가져온다. 이때 서버와 자바스크립트가 데이터를 효율적으로 주고받기 위해 사용하는 공통 언어 규약이 바로 JSON(제이슨) 이라고 한다. JSON은 이름에서 알 수 있듯이 자바스크립트 객체 표기법을 기반으로 만들어졌다. 매우 가볍고, 사람이 읽기 쉬우며, 거의 모든 프로그래밍 언어에서 쉽게 처리할 수 있다는 장점 덕분에 웹의 핵심 데이터 포맷으로 자리 잡게 되었다. 1. JSON 이란?a. JSON의 정의JSON은 데이터를 표현하는 하나의 문자열(String) 형식이다.가장 중요한 점은 JSON은 JavaScript 객체처럼 생겼지만, 실제로는 데이터를 담고 있는 일반 텍스트(Text) 라는 점이다. 이..

Promise를 사용하여 복잡했던 비동기 코드(콜백 지옥)를 .then().then().catch() 형태의 깔끔한 체인으로 정리할 수 있다.Promise는 분명 혁신적이었지만, 여전히 then과 콜백 함수를 사용해야 한다는 불편함이 남아있다. 자바스크립트는 개발자들의 이런 불편함을 해소하기 위해 ES2017에서 async와 await 라는 마법 같은 문법을 도입했다. async/await은 Promise 문법을 '더 읽기 쉬운' 형태로 포장한 것으로, 비동기 코드를 작성하면서도 마치 코드가 위에서부터 아래로 순서대로 실행되는 동기 코드처럼 보이게 해준다. 1. async 와 await 의 역할 분담async 와 await 는 반드시 짝을 이루어 사용해야 한다.키워드역할사용 위치async선언: "이 함수..

자바스크립트의 비동기 처리 작업을 순서대로 처리해야 할 때 코드가 오른쪽으로 깊어지는 콜백 지옥(Callback Hell) 문제가 생긴다.콜백 지옥은 코드의 가독성을 해치고 유지보수를 어렵게 만들기 때문에, 이 문제를 해결하기 위해 **ES6(2015)**에서 Promise(프라미스) 라는 강력한 객체를 도입하게 되었다. 이번에는 Promise가 무엇이며, 이 객체가 어떻게 복잡한 비동기 코드를 깔끔하고 체계적으로 정리해 주는지 자세히 알아보자. 1. Promise 란?Promise는 단순히 말해 "비동기 작업이 미래에 완료될 것인지, 실패할 것인지에 대한 약속(Promise)" 을 나타내는 객체다. Promise 객체는 비동기 작업이 완료될 때까지 그 상태를 추적하고,작업이 성공하면 성공 결과를, 실패..

지금까지 작성했던 대부분의 코드는 위에서부터 아래로, 순서대로 실행되었다. 이를 동기적(Synchronous) 처리라고 한다.하지만 웹에서 발생하는 모든 일이 이렇게 순식간에 끝나는 것은 아니다.❌ 서버에서 데이터를 받아오는 데 5초가 걸린다면?❌ 아주 복잡한 계산을 하는 데 10초가 걸린다면?만약 자바스크립트가 이 5초나 10초 동안 아무것도 하지 않고 멈춰 있다면, 웹 페이지는 얼어붙고 사용자(고객)는 '페이지가 멈췄다'고 생각하게 될 것이다.비동기 처리는 이 문제를 해결하기 위해, "오래 걸리는 작업은 일단 맡겨두고 다음 코드를 먼저 실행" 이라고 자바스크립트 엔진에게 알려주는 메커니즘이다.이번에는 자바스크립트가 어떻게 멈추지 않고 여러 작업을 처리하는지, 그 비동기의 기본 원리를 가장 쉬운 함수인..

웹 페이지에서 사용자의 행동(클릭, 키 입력, 마우스 이동 등) 이나 브라우저의 변화(페이지 로딩 완료 등) 를 '이벤트(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)로 작동한다.즉 한 번에 하나의 작업만 순서대로 처..