Language/Javascript24 동기(Sync) & 비동기(Async) 동기(Sync)와 비동기(Async)에 대한 개념 일반적으로 "동기로 실행된다"라고 함은, 먼저 실행된 코드의 결과가 나올 때까지 대기하는 것을 말합니다. 놀이기구를 생각하면 쉽습니다. 정원이 30명인 놀이기구가 있다고 가정합니다. 놀이기구를 한번 태우는데 약 5분이 걸린다고 가정하면 놀이기구를 막 태우기 시작한 시점에서는 대기자 모두 놀이기구에 탑승했던 사람들이 다 내리기 전까지는 탑승을 할 수 없습니다. 이것은 놀이기구 탑승/하차가 동기적으로 관리된다고 볼 수 있습니다. 일반적으로 "비동기로 실행된다" 라고 함은, 실행된 순서와 관계 없이 결과가 나오는 것을 말합니다. 맛집을 생각하면 쉽습니다. 정원이 최대 30명인 맛집이 있다고 가정합니다. 입장 순서는 선착순이고 퇴장 순서는 다 먹은 사람이 바로 .. 2022. 12. 12. JavaScript란? JavaScript가 존재하기 이전의 웹 생태계 이 당시엔 웹 브라우저가 존재했지만, HTML과 CSS로 아주 간단한 스타일만 적용하는 게 일반적이었습니다. CSS 또한 지금처럼 화려하게 적용할만한 기능이 없었고, 현재의 워드프로세서보다 더 적은 기능으로 텍스트를 꾸미고 간격을 조정하는 게 전부였습니다. HTML이라는 단어 그대로 Hyper Text를 이용해 각 문서(페이지)간 이동이 원활하게 꾸며둘 수 있는 순수한 Markup Language로서 이용이 되었습니다. 순수하게 문서를 웹으로 볼 수 있는 수준으로 이용한 것입니다. JavaScript 탄생 비화 자바스크립트는 이런 정적인(Static) 문서를 조금 더 동적(Dynamic)으로 표현할 수 있도록 만들어졌는데, NetScape라는 웹 브라우저를.. 2022. 12. 12. Javascript 기본문법 변수 // 기본적인 변수할당 let 변수이름 = 값 // 변수가 고정된 값을 가지고 있을 때 const 변수이름 = 값 // 과거엔 썼지만 지금은 쓰지 않는 키워드 var 변수이름 = 값 데이터 타입 // 숫자 console.log(10)// 10을 출력 const myAge = 37 const yourAge = 25 console.log(myAge)// 37을 출력 console.log(yourAge)// 25를 출력 // 문자열 // 큰따옴표("")나 작은따옴표('')로 데이터를 감싸야 한다 const firstName = 'Jungmin' const lastName = 'Kim' console.log(firstName)// Jungmin을 출력 console.log(lastName)// Kim을 출.. 2022. 11. 21. [혼공스] Ch.09 클래스 클래스의 기본 기능 추상화 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것을 추상화라고 합니다. 좀 더 포괄적인 사전적 의미로는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념과 기능을 간추려내는 것을 추상화라고 합니다. 이렇게 추상화를 활용해서 함수를 만들면 객체를 하나하나 만들 때와 비교해서 오탈자의 위험이 줄어듭니다. 코드를 입력하는 양이 크게 줄어듭니다. 속성과 메소드를 한 함수 내부에서 관리할 수 있으므로 객체를 더 손쉽게 유지보수 할 수 있습니다. 단점으로는 객체별로 메소드를 생성하므로 함수라는 기본 자료형보다 무거운 자료형이 여러 번 생성됩니다. 클래스 선언하기 객체들을 정의하고 그러한 객체를 활용해서 프로그램을 만드는 것을 객체 지향 프로그래밍(Object Oriented Pro.. 2022. 11. 4. [혼공스] Ch.08 예외 처리 구문 오류와 예외 구문 오류(syntax error) 프로그램 실행 전에 발생하는 오류입니다. 괄호의 작을 맞추지 않았다든지, 문자열을 열었는데 닫지 않았다든지 할 때 발생합니다. 이러한 구문 오류가 있으면 웹 브라우저가 코드를 분석조차 하지 못하므로 실행 되지 않습니다. 예외(exception) 또는 런타임 오류(runtime error) 프로그램 실행 중에 발생하는 오류입니다. 자바스크립트에서는 SyntaxError라고 출력되는 오류 이외의 모든 오류(TypeError, ReferenceError, RangeError)가 예외로 분류됩니다. 기본 예외 처리 조건문을 사용해서 예외가 발생하지 않게 만드는 것을 말합니다. 고급 예외 처리 try catch finally 구문을 사용해서 예외를 처리하는 방.. 2022. 11. 3. [혼공스] Ch.07 문서 객체 모델 문서 객체 조작하기 DOMContentLoaded 이벤트 문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용합니다. 기본적으로는 head 태그 내부에 script 태그를 배치하면 body 태그에 있는 문서 객체(요소)에 접근할 수 없습니다. head 태그 내부의 script 태그에서 body 태그에 있는 문서에 접근하려면 화면에 문서 객체(요소)를 모두 읽어들일 때까지 기다려야 합니다. DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트입니다. document.addEventListener('DOMContentLoaded', () => { //문장 } 문서 객체 가져오기 HTML 문서에 있는 head 요소와 title 요소 등은 다음과 같은.. 2022. 11. 3. 이전 1 2 3 4 다음