알루 코딩

※ 디자인패턴이란 뭘까? - 소프트웨어 설계의 주어진 콘텍스트 내에서 일반적으로 발생하는 문제에 대한 일반적이고 재사용 가능한 솔루션이다. - 소스나 기계어로 직접 변환할 수 있는 완성된 디자인이 아니다. - 오히려 다양한 상황에서 사용할 수 있는 문제를 해결하는 방법에 대한 설명 또는 템플릿이다. - 디자인 패턴은 프로그래머가 응용 프로그램이나 시스템을 디자인할 때 일반적인 문제를 해결하는 데 사용할 수 있는 공식화된 모범 사례이다. ※ 디자인패턴의 장점 최고의 솔루션 : 디자인 패턴은 여러번 수정 하면서 완성되었기 때문에, 디자인 패턴은 이미 잘 작동한다는 것을 알고 있다. 그래서 대부분의 개발자가 자주 사용한다. 재..

Symbol Type이란 2015년 ES6에서 새로 추가된 원시 타입이며, 이 타입의 목적은 유니크한 식별자를 만들기 위해서 사용된다. Symbol Type값을 생성하는 방법은? → 여러가지 타입의 값을 생성할 때를 우선 살펴보자. Symbol은 Shortcut이 없고 반드시 Symbol() 을 통해서만 값을 줄 수 있다. 1) Symbol Type은 유니크한 식별자를 위해 사용한다고 했는데, 값은 보이는게 같더라도 내부에서는 다른 값을 가진다. const sym1 = Symbol(); const sym2 = Symbol(); console.log(sym1 == sym2); // false 2) Symbol 에 description을 줄 수 있다. : symbol에 매개변수로 넣어주면..

자바스크립트는 싱글스레드이다. 그래서 하나의 일을 할 때, 하나밖에 못하는데, 만약 그 하나의 일이 오래 걸리는 일이면 어떻게 될까? 그 하나의 일이 오래걸리기에 다른 직업들은 그 하나의 일이 끝날때 까지 기다려야 한다. → 이러한 문제점을 해결하기 위해서 비동기로 어떠한 일을 수행하게 된다. ※ 만약 비동기 요청이 여러 개 있을 때, 하나의 요청이 다른 요청의 결과에 의존한다면? (예를 들어, 요청1의 응답을 이용해서 요청2를 수행해야 한다면?) 아래 코드에서처럼 둘 다 비동기 요청을 보내는데, 두 번째 요청이 첫 번째 요청의 결과가 필요할 수가 있다. 하지만, 둘 다 병렬적으로 요청을 보내기 때문에, response1을 가지기 전..

객체 지향 프로그래밍(OOP)는 Java 및 C++ 를 비롯한 많은 프로그래밍 언어의 기본이 되는 프로그래밍 패러다임이다. 객체 지향 프로그래밍은 여러개의 독립된 단위 '객체'들의 모임으로 컴퓨터 프로그램을 파악한다. => 객체지향 프로그래밍은 객체들의 모임이다. 객체 지향 프로그래밍이 나오기 이전에는 명령어의 목록을 나열(절차 지향) 하는 기능 구현을 목적으로 작성했지만, 이렇게 코드를 길게 작성하다 보면, 매우 알아보기 힘든 복잡한 코드가 만들어진다. 그래서, 하나의 문제 해결을 위한 독립된 단위인 "객체"로 만들었으며, 이 객체로 인해 알아보기 쉽고 재사용성이 높아졌다. [ OOP의 특징 ] 1) 자료 추상화(Abstractio..

즉시 실행 함수 표현(IIFE, immediately Invoked Function Expression) 은 정의되자마자 즉시 실행되는 Javascript Function을 말한다. 기본적인 형태는 아래와 같다. ( function () { // pass } )() 첫 번째() 소괄호 => 전역 선언 막고, IIFE 내부 안으로 다른 변수 접근 막는다. 두 번째() 소괄호 => 즉시 실행 함수를 생성하는 괄호, 이를 통해 자바스크립트 엔진은 함수를 즉시 해석 및 실행한다. [ IIFE의 주된 사용목적 ] IIFE를 사용하는 주된 이유는 변수를 전역(global scope)으로 선언하는 것을 피하기 위해서이다. 또한..

※ 공통점 둘 다 원시 자료형(primitive) 이다. undefined 타입은 undefined 값이 유일하며, null 타입은 null 값이 유일하다. (단, typeof null 을 찍어보면 object 라고 나오는데, 처음에 만들 때 잘못해서 이걸 고치면 너무나 많은 오류가 나와서 그대로 나뒀다고 한다. 그래서, 타입스크립트에서는 strict 키워드를 통해 찍어보면 object가 아니라고 한다.) 1) undefined - undefined 는 '아무 값도 할당받지 않은 상태'를 의미한다. - var 키워드로 선언한 변수는 호이스팅으로 올라간 후 undefined로 초기화된다. 그 이후 인터프리터가 해당 소스코드에 도달했을 때 할당한 값이 들어가게 된다...

- 클로저(Closure)는 함수와 그 함수가 선언된 어휘적 환경(Lexical Environment)의 조합을 말한다. 다시 말해서, 클로저는 내부 함수에서 외부 함수의 스코프(Scope)에 접근할 수 있게 해주는 기능이다. 자바스크립트에서는 함수가 생성될 때마다, 즉 함수 생성 시에 클로저가 만들어진다. 다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우 외부 함수(outerFunction)가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 엑세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있다. ... 무슨말이죠 이게? ... 예를 들어, 외부 함수에서 변수를 선언하고, 내부 함수에서 이 변수에 접근할 수 있게 해..

- this 키워드는 여러상황에서 각기 다른 것들을 참조한다. 1) 메소드에서 this 를 사용하면, 해당 객체를 가리킨다(참조한다) // // Method => object const audio = { title: 'ALLU', play() { console.log('play this', this); } } audio.play(); audio.stop = function () { console.log('stop this', this) } audio.stop(); 2) 함수에서 this를 사용하면, window 객체를 가리킨다. // Function => Window Object function playAudio() { console.log(this); } playAudio();..

- 어떠한 버튼을 클릭했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야 할까? [ Event Listener ] - 위와 같이 마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생한다. - 이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데 그 함수가 바로 이벤트 리스너 이다. [ addEventListener()] - 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다. - 밑에서부터는 해당 html 을 가지고 예제를 적용할 것이다. Title Email: Submit Submit2 1. 자바 스크립트 코드에서 프로퍼티로 등록 window.onload = function() { // 문..

- window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)를 나타낸다. 또한 window는 브라우저의 객체이지 javascript 객체가 아니다. - 이 window 객체를 이용해서 1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수도 있다. 2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다. (ex) - var 로 선언해서 window 객체의 프로퍼티를 만들어야 한다. let과 const는 블록 스코프이기에 window 객체 내부의 블록에서 선언된 것으로 전역 객체의 프로퍼티로 활용될 수 없다.(아래) - 브라우저에서 UI를 볼 수 있는 것은 HTML의 요소를 하나하나 분석해..