Web Front-end
[JS/Basic/배열/Array] 자바스크립트의 배열
자바스크립트에는 "key - value"쌍을 이루는 강력한 객체리터럴이 있습니다. 하지만, 개발을 하다보면 첫 번째, 두 번째, 세 번째 등 "순서"가 중요한 순간이 있습니다. 그리고, 정렬을 위해서도 순서는 중요하게 됩니다. 순서가 있는 데이터들의 집합을 다룰 때, 객체를 이용하면 손해입니다. 왜냐하면, 객체는 순서를 보장하지 않고 순서와 관련된 메서드가 보장되어있지 않습니다. 그리고, 배열은 프로그래밍 언어라면 무조건 갖고있다고 생각해도 무방합니다. 배열 (Array) 배열은 선언방법은 기본적으로 2가지 입니다. new 연산자를 이용하는 방법 대괄호를 이용하는 방법 const arr = []; const arr1 = new Array(); 배열의 접근방법 배열은 "인덱스"를 통해서 , 접근이 가능합니..
[JS/Event/Pattern] 자바스크립트 이벤트 버블링(Event Bubbling)과 이벤트 위임(Event Delegation)
자바스크립트의 이벤트 자바스크립트는 사용자와의 "상호작용"을 이벤트로 정의하여 가지고 있습니다. 대표적으로 "마우스 이벤트" , "키 이벤트", "폼 이벤트", "스크롤 이벤트" 등등 이 있습니다. 대표적인 이벤트들은 아래 예제코드로 간단하게 작성해봤습니다. // 마우스 이벤트 중 ,하나인 클릭 $root.addEventListener("click",() =>{}); // 키보드 이벤트 중 하나인, 키다운 $keyBoard.addEventListener("keydown",()=>{}); //폼 이벤트 중 하나인 submit $loginButton.addEventListener("sumbit",()=>{}); //폼 이벤트 중 하나인 , change $result.addEventListener("chang..
[JS/Basic/객체] 자바스크립트의 클래스
JavaScript에서 객체를 구현하는 방법은 아주 많습니다. 객체 리터럴을 이용해서 선언 Factory 함수를 이용해서 객체 리터럴로 반환 생성자 함수를 이용해서, 객체를 선언한 뒤, new로 할당 위의 3가지 방법 외에도 , ES6에서 정의된 방법이 1개가 있습니다. 어쩌면 가장 친숙한(?) 방법일지도 모릅니다. 바로 Class 문법입니다. 각각의 방법마다 차이점은 있긴 합니다! 하지만, 그건 OOP 디자인패턴을 다루면서 더욱 자세히 하겠습니다.(Prototype에 대한 심화설명 + 다양한 패턴에서 Prototype의 쓰임, TypeScript의 등장 등등) Class Constructor(생성자)와 new를 이용해서, 객체를 생성합니다. method를 정의해서 사용할 수 있습니다. 사실 Game이라..
[JS/Basic/객체] 자바스크립트 객체(new,factory,ProtoType)
OOP는 "학문"으로써 취급받을만큼 연구도 많이되었고, 현업에서 가장 많이 쓰는 형태입니다. 따라서, OOP에 대한 이야기를 하면 진짜 끝이 없기 때문에, 이번 글은 "자바스크립트에서 OOP를 어떻게 구현했는지"에 초점을 마추려고 합니다. 잠깐! 객체는 어떤 "사물"을 컴퓨터의 세계에 나타내기 위한 방법이라고 했습니다. 이번 글에서는 게임 속의 캐릭터를 나타내는 예시로 쭉 가겠습니다 :) 객체 만들기 JS에서는 객체를 {} (중괄호 리터럴)으로 선언을 합니다 . 그리고 안의 값을 Property라고 하고 Property는 key와 value라고 했습니다. "게임 캐릭터"에 필요한 Property는 무엇이 있을까요? 닉네임 ID 직업 State(스텟, 힘,지력, HP,MP ,방어력 등등 ) 위의 값으로 작..
[JS/Basic/자료형] 자바스크립트 원시타입,참조타입
JavaScript에서는 자료형을 "메모리에 저장하는 방식"에 따라서, 원시타입과 참조타입으로 나눌 수 있습니다. (네? 뜬금없이 무슨 메모리 이야기냐구요? 컴공이면 당연히 알아야하는거 아닌가요?) 사실, 저희가 짜는 Code의 모든 변수와 로직들은 폰노이만 컴퓨터 구조에서는 메모리에 저장되어집니다. (그게 캐시 메모리일 수도, RAM 일수도, 심지어 가상메모리 공간일 수도 있습니다.) 메모리 관리기법, 컴파일러의 역할, JS 엔진의 역할 등을 말하면 이 글은 천페이지를 넘길 수 있기 때문에 복잡한 이야기는 각설하고 하나만 기억하면 됩니다! "JS에서는 원시타입과 참조타입이 있다." 원시타입은 문자열, 숫자,참/거짓, undefined,Symbol,null이 있습니다. 그 외에는 다 참조값입니다. 참조타..
[JS/Basic/연습문제] 자바스크립트 객체 연습문제
https://ko.javascript.info/object 객체 ko.javascript.info 아래의 문제는 JavScript 객체편에 있는 문제를 스스로 풀어본 것 입니다. 문제는 위 링크를 참조해주세요 :) 객체가 비어있는지 확인하는 방법 객체가 비어있다면, key 값이 아무것도 없을겁니다. 즉 , 순회를 했을 때, undefined가 반환된다면 비어있는거죠! 반대로 이야기하면 순회를 했을 때, 어떠한 값이 있다면 비어있지 않다는 뜻입니다. 순회가 시작되면 바로 return false를 해준다면 더 효율적 일 것 같습니다! const schedule = {} function isEmpty(schedule){ for (let key in shedule){ return false; } return ..
[JS/Basic/객체] 자바스크립트 객체
프로그래밍에서 "객체"는 아주 많이 나오는 개념입니다. 오늘은 JavaScript에서 객체를 어떻게 구현했는지 알아보죠! 객체(Object) 객체는 {} 중괄호 안에 "키 : 값"의 쌍으로 구현되는 자바스크립의 "자료형" 입니다. 중괄호로 선언하는 방법 외에도, new Object()라는 방법도 있지만, 대부분 객체 리터럴(중괄호)를 이용합니다. 중괄호를 이용해 선언한 객체를 "객체 리터럴"이라고 합니다. const mapin = new Object(); //'객체 생성자' const mapin2 = {}; // '객체 리터럴 ' "키 : 값"의 쌍은 Property라고 하고, 한 객체에는 여러 개의 Property가 있을 수 있습니다. 키엔 문자형, 값엔 모든 자료형(배열,문자열,함수 등등)이 허용됩니..
[JS/가독성/주석] 자바스크립트 주석 잘 달아보자!
주석을 잘 달아놓는 것도 실력 중에 하나이다. 오늘은 주석을 잘 달아야 하는 이유와, 주석을 잘 이용하기 위한 팁들을 적어보려고 합니다. 주석을 다는 이유? 간단합니다. 기억력에는 한계가 있기 때문입니다. 당장 3일전에 먹는 점심메뉴가 기억이 나질 않습니다. 제 3자가 나의 코드를 볼 수 있기 때문입니다. 다른 사람과 협업을 할 때, 나의 코드를 상대방은 이해하지 못할 수도 있습니다. 따라서, 적절한 주석은 가독성에 큰 도움이 됩니다. 심지어, 내가 짠 코드인데도, 3개월 뒤에 보면, "내가 왜 이렇게 했지?" 라는 생각이 분명히 듭니다. 주석을 잘 달기 위해서는 , 달지 않으면 된다. 주석을 잘 달기 위해서는 어떻게하면 될까요? 간단합니다. 주석을 달지 않으면 됩니다.(프로그래밍을 잘하는 방법은 안하는..