Multi Developer SuHo

안녕하세요!! 이번에는 자바스크립트 DOM을 사용한 댓글을 구현하였습니다. 코드의 내용은 주석으로 설명하였습니다. HTML 코드 댓글 쓰기0 JS 코드 // 댓글의 형태가 객체// 생성자 함수// /* { uid: "", content : "", date : "" }*/// 유저의 정보를 담는 객체const user = { uid : "soon",}; const commentList = document..

안녕하세요~ 저번 내용 이어서 DOM의 사용목적과 DOM의 문법들을 살펴보겠습니다. 우선 DOM에 대한 개념을 알고 학습하시는걸 권장드립니다. 목차1. DOM의 사용목적2. DOM의 문법2-1. DOM객체의 요소 선택 2가지 방법2-2. getElementById( )2-3. getElementById( ) 특징2-4. getElementById( ) 사용 코드2-5. querySelector( ) 2-6. querySelector( ) 특징2-7. querySelector( ) 사용 코드3. 요소의 속성값 3-1. 요소의 속성값 코드3-2. 요소의 내용 추가3-3. innerText 3-4. innerHTML3-5. 요소의 이벤트 속성 3-6. onclick 이벤트 속성3-7. onclcik 이벤트 속..

안녕하세요~ 자바스크립트에서  DOM 대해 간단한 개념을 알아보고 DOM의 구조와 DOM에 접근하여 요소를 생성하는 간단한 메서드에 대해 알아봅시다~  목차1. DOM (Document Object Model)1-1. DOM이란 무엇인가?1-2. DOM의 구조1-3. 요소 생성 createElement( ) 메서드1-4. createElement( ) 메서드를 이용한 요소 생성 코드 서론먼저  본론으로 들어가기전 자바스크립트에서 DOM이라고 들어보셨나요?  처음 들었을 때는 DOM이 뭐지? 생각하실 수 있습니다.  DOM(돔) 이라고 하면 감이 전혀 안오시는게 정상입니다. DOM에 대한 개념과 DOM의 구조를 보면서 이해해보는 시간을 가져보겠습니다.  본론1. DOM(Document Object Mode..

안녕하세요!! 오늘은 자바스크립트에서 class(클래스)와 , this bind, ES6 부터 사용되는 화살표 함수와 , 메서드 축약형을 간단하게 알아보는 시간을 가져보겠습니다.더보기더보기더보기📁목차🗒1. 클래스(class)1-1. 클래스란 1-2. 클래스의 목적1-3. 클래스의 상속1-4 클래스의 상속 예시 코드 🗒2. 메서드 축약형2-1. 메서드 축약형이란?2-2. 메서드 축약형 예시코드 🗒3-1. 화살표 함수3-2. 화살표 함수란?3-2. 화살표 함수 예시 코드 🗒4.this bind4-1. this bind란?4-2. this bind 예시코드서론이번에는 자바스크립트에 클래스가 무엇인지, 그리고 클래스의 상속, ES6 이후 사용된  화살표 함수( =>) 사용 코드와 this bind에 대..

안녕하세요~ 자바스크립트 재귀함수와, 생성자 함수, this 키워드에 대해 알아보겠습니다.  더보기목차 📒1. 재귀 함수1-1. 재귀함수란?1-2. 재귀 함수를 사용하는 이유1-3. 재귀 함수의 목적1-4. 재귀 함수 예시 코드2. 생성자 함수2-1. 생성자 함수란?2-2. 생성자 함수 예시 코드3. this 예약어3-1. this 예약어란?3-2. this 예약어 예시 코드 서론 먼저 본론으로 들어가기 전 재귀함수에 대해 들어보셧나요? "재귀 함수" 단어만 들으셨을 때는 좀 어렵게 느끼실 수 있습니다. 예시 코드를 보면서  이해하는 시간을 가지고 , 생성자 함수와 this 키워드에 대해서도 간략히 알아봅시다. 본론 1. 재귀함수 1-1. 재귀 함수란 재귀 함수는 함수의 내용에서 다시 함수 이름으로 함..

안녕하세요~ 이번엔 간단한 자바스크립트에서 TDZ(Temporal Dead Zone) 에 대해 알아보겠습니다. TDZ가 무엇이고 간단한 코드들에 대한 예시를 들면서 설명해보겠습니다~  목차1. TDZ(Temporal Dead Zone)1-1. TDZ란?1-2. TDZ 특징1-3. TDZ 발생 코드  서론먼저 TDZ(Temporal Dead Zone)에서  Dead Zone? 만 보시면 이상현상이 발생하는 영역으로 해석할 수 있습니다. 그럼 TDZ가 무엇인지, 왜 발생하는지 간단한 코드를 통해 이해하는 시간을 가져보겠습니다. 본론1. TDZ(Temporal Dead Zone) 1-1. TDZ(Temporal Dead Zone)이란? 선언하고 초기화 이전에 식별자를 참조할 수 없는 영역을 개발자가 만든 것...

안녕하세요~ 이번에는 자바스크립트에서 실행 컨텍스트 (Excution Context) 에 대해 알아보겠습니다. 실행 컨텍스트가 무엇인지, 실행 컨텍스트에 대한 예시 코드를 작성해보면서 이해하는 시간을 가지게 되겠습니다.더보기목차 📒1. 실행 컨텍스트1-1. 실행 컨텍스트란?1-2. 실행 컨텍스트 구조1-3. 실행 컨텍스트 예시 코드서론 🗒앞서 설명하기전 "실행 컨텍스트" 키워드에 접근해 봅시다.  "실행" 말 그대로 실행하는 것으로 해석이 되고, "컨텍스트"는 번역하면 "맥락"이라고 나옵니다. 그럼 이 키워드를 조합하면 "실행하는 맥락" 이라고 해석이 되겠습니다. 그럼 본격적으로 실행 컨텍스트(Exction Context)을 살펴보시죠   본론 🗒1. 실행 컨텍스트 (Exction Context) ..

안녕하세요~ 이번엔 자바스크립트에서 함수에 대해 알아보겠습니다.  함수가 무엇이고, 함수를 왜 사용하는지, 함수를 이용한 간단한 예시코드를 보면서 설명해볼게요!!목차🗒︎1. 함수 1-1. 함수의 개념 1-2. 함수를 왜 사용할까? 🤔1-3. 함수의 기본구조 1-4. 함수의 선언과 호출1-5. 함수를 사용한 예시코드서론안녕하세요 ~ 먼저  본론으로 들어가기전 함수가 무엇인지 떠오르시나요? 중학교, 고등학교 때 배우던 다양한 함수들이 있지만 프로그래밍에서 함수는 다르게 사용되고 있습니다. 함수의 천천히 접근해보면서 함수라는 것에 대해 알아볼 필요가 있겠죠?본론1-1. 함수  1-2. 함수의 개념 자바스크립트에서 함수는 특정 작업을 수행하기 위해 작성된 코드 블록으로, 필요할 때 여러 번 호출하여 재사용할..

안녕하세요~ 이번에는 자바스크립트 배열(Array)에 대해 알아보겠습니다. 배열을 알아보고 push( ), lengh( ), splice( )메서드와 메서드가 동작하는 기능에 대해 간단히 알아보겠습니다. 목차1. 배열1-1. 배열의 개념1-2. 배열을 사용하는 이유1-3. 배열의 문법1-4. 배열을 사용한 예시 코드2. 배열 메서드 2-1. push( )2-2. push( ) 메서드를 사용한 예시코드2-3. length( )2-4. length( ) 메서드를 사용한 예시코드 2-5. splice( )2-6. splice( ) 메서드를 사용한 예시코드 서론먼저 자바스크립트에서 배열에 입문하기전 배열에 대해 생각해보신적 있으신가요?  뭔가 나열하는 것처럼 생각하실 수도 있으십니다. 그럼 자바스크립트에서 배열..

안녕하세요~ 오늘은 자바스크립트에서 중요한 객체에 대해 알아보겠습니다. 객체의 특징과 값 호출을 통해 자바스크립트에서 객체를 어떻게 활용해야 하는지 한번 살펴보시죠더보기목차1. 객체1-1. 객체란?1-2. 객체의 특징1-3. 객체를 이용한 값 호출서론먼저 "객체" 라고 다른 언어인 C, C++ Java 에서 들어보신 적 있으신가요?  다른 언어를 학습하신 분께서는 들어보셨을 겁니다.    본론1. 객체 1-1. 객체란자바스크립트 객체는 실제 세상의 사물이나 개념을 코드 안에 표현하는 데 사용되는 데이터 구조입니다. 쉽게 말하면 여러 값들을 하나의 단위로 묶어서 관리할 수 있는 데이터 구조 라고 보시면 더 편합니다.  객체에 대해 개념만 간단하게 알고 넘어가도록 하겠습니다. 객체에 대한 내용은 더 학습해보..