Multi Developer SuHo

안녕하세요~  이번에는 replace( ) 와 map ( ), split( ) 메서드에 알아보고 각각 메서드가 무슨 역할을 하는지 살펴보겠습니다.  그럼 간단한 목차보면서 오늘의 할일을 살펴보시죠  📒 목차1. replace( ) 메서드1-1. replace( ) 메서드란?1-2. replace( ) 메서드 문법1-3. replace( ) 사용한 예시 코드2. map( ) 메서드2-1. map( ) 메서드란?2-2. map( ) 메서드 문법2-3. map( ) 사용한  예시 코드3. split( ) 메서드3-1. split( ) 메서드란?3-2. split( ) 메서드 문법3-3. split( ) 사용한 예시 코드🧑‍💻 서론 이번에 알아볼 내용중 replace( ) , map( ), split( )..

안녕하세요~ 오늘은 자바스크립트로 페이지네이션(PageNation)을 구현해보겠습니다.  📑목차1. 페이지네이션(PageNation)1-1. 페이지네이션이란?1-2. 페이지네이션 구조 1-3. 페이지네이션 실습 코드 서론 본론으로 들어가기 앞서 혹시 페이지네이션이라고 들어보신 적 있으신가요? 아니면 페이지네이션 화면을 보셨던 적이 있으실까요? "페이지네이션" 키워드만 들었을 때는 와닿지 않을 수 있습니다. 그럼 웹 사이트 마다 이런 화면을 보신적 있으신가요? 이 화면은 저의 티스토리에서 캡쳐한 화면입니다. 이런 화면으로 다음 페이지에 대한 내용이 나타나도록 나눠서 구현한 것이 페이지네이션(PageNation)입니다. 그럼 이러한 기능을 구현하기 위해 본론으로 넘어가볼까요?  본론1-2. 페이지네이션 구..

안녕하세요  오늘은 비동기 작업에서 발생한 콜백지옥과 콜백지옥을 해결할 Async Await 에 대해 알아보겠습니다.  목차1. 콜백지옥1-1. 콜백지옥이란?1-2. 콜백지옥 예시 코드1-3. 콜백지옥 해결방법1-4. ES8 에서 추가된  Async Await  문법을 사용한 콜백지옥 해결 코드 서론먼저 "콜백지옥" 이라는 단어를 들었을 때 어떤 생각이 떠오르시나요?  "지옥" 이라고 붙으면 뭔가 불길하고 부정적으로 느껴지시죠?  프로그래밍에서도 "콜백지옥" 도 마찬가지로 코드의 구조가 그렇게 썩 좋지 않다고 생각하시면 됩니다. 그럼 본론으로 넘어가시죠본론1. 콜백지옥 1-1. 콜백지옥이란? 비동기 작업을 처리할 때 발생하는 문제로, 콜백 함수가 너무 많이 중첩되어 코드의 가독성이 떨어지고 유지보수가 어..

안녕하세요 이번엔 자바스크립트에서 1급 객체에 대한 개념과 종류들을 간단하게 알아보는 시간을 가져보겠습니다. 목차1. 1급 객체1-1. 1급 객체란?1-2. 1급 객체의 조건 내용1-3. 1급 객체의 종류서론먼저 1급 객체가 무엇이고, 1급 객체의 조건 내용과 1급 객체의 종류들을 살펴보겠습니다. "1급 객체"라고 하면 뭔가 급이 나누는 것 같게 느끼시나요?  그럼 1급 객체에 대해 알아봅시다~ 본론 1. 1급 객체 1-1. 1급 객체란? 변수에 할당할 수 있고, 함수의 인자로 전달되거나 반환될 수 있는 객체, 즉, 프로그래밍에서 1급 객체는 값처럼 사용할 수 있는 제한이 없는 객체를 뜻한다. 1-2. 1급 객체의 조건 내용 3가지 다른 함수의 매개변수로 전달해서 사용할 수 있다. 다른 함수의 retur..

안녕하세요~  Promise 객체 문법이 끝나고 클로저(Closure)가 무엇이고, 클로저의 특징과 문법들을 예시 코드들을 보면서 살펴보겠습니다.  목차1. 클로저1-1. 클로저란?1-2. 클로저의 특징1-3. 클로저의 문법 코드1-4. 클로저의 목적1-5. 클로저 함수와 클로저 함수가 아닌 코드 서론오늘은 자바스크립트에서 클로저(Closure)가 무엇이고, 클로저의 특징과 문법들을 간략하게 알아보겠습니다. "클로저" 라는 단어를 들어보신적 있으신가요? 대부분 처음듣거나 비동기 학습이 끝나기 전에는 들어보신적이 없으실 겁니다.  그럼 본론으로 짚어가면서 클로저(Closure)에 대한 내용을 학습해보도록 하겠습니다.   본론 1. 클로저 1-1. 클로저란?함수가 선언될때의 어휘적 위치를 기억하고 해당 변수..

안녕하세요~  오늘은 Promise에 대해 알아보고 Promise 객체에 대한 상태와 Promise 를 사용한 코드를 살펴보겠습니다.목차1.  Promise(프로미스)1-1. Promise(프로미스) 란? 1-2. Promise(프로미스) 를 왜 사용할까?1-3. Promise(프로미스) 객체 상태 3가지1-4. Promise Chaininig (프로미스 체이닝) 이란?1-5. Promise Chaininig (프로미스 체이닝) 사용 코드1-6. Promise 사용한 코드  서론먼저 Promise를 알기 전에 비동기 처리에 대한 학습이 필요합니다.  비동기 처리에 대한 이해가 충분히 되었다면 Promise에 대한 내용을 학습할 준비가 되어 있습니다.  본론1.  Promise(프로미스) 1-1. Prom..

안녕하세요 요즘 빈번하게 글이 올라와서 죄송합니다ㅠㅠ 작업하면서 포스팅 하는 것을 깜빡했네요. 지금이라도 달려보겠습니다. 오늘은 자바스크립트 동기와 비동기 프로그래밍에 대한 내용을 살펴보겠습니다 목차1. 자바스크립트는 싱글 스레드 언어이다1-1. 블로킹(Blocking) 이란?1-2.동기(Synchronous) 프로그래밍이란?1-3. 동기(Synchronous)  코드 예시2. 비동기(Asynchronous) 프로그래밍이란?2-1. 비동기(Asynchronous) 코드 예시 서론 자바스크립트에서 동기와 비동기 프로그래밍에 대해 알아보고, 이해를 돕기 위해 간단한 예시 코드들을 준비했습니다.  본론으로 넘어가시죠  본론1. 자바스크립트는 싱글 스레드 언어 자바스크립트는 한 번에 한 가지 작업만 수행할 수 ..

안녕하세요!! 이번에는 자바스크립트 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..