본문 바로가기

front-end/javascript18

[javascript 기초] 리스트에 새 요소 추가/삭제 (push, concat 등) 다음과 같은 리스트가 있다고 했을 때 const items = ["one", "two", "three"] 리스트에 새로운 아이템을 집어넣는 방법들 items[3] = "four"; //정해진 위치에 넣는 방법 items.push("four") //리스트의 마지막에 들어가게 된다. concat() : 리스트 더하기 만약 리스트에 리스트를 추가하고 싶다면 어떻게 하면 될까요? const ar1 = [1, 2, 3]; const ar2 = [4, 5, 6]; const ar3 = ar1.concat(ar2); 리스트에서 아이템을 삭제하는 법 splice() : 특정 위치의 요소를 삭제한다 const array = ["a", "b", "c"]; const index = 1; array.splice(index, .. 2021. 7. 21.
[javascript]자바스크립트 리스트 reverse / 기존 array에 영향을 미치지 않게 하려면? 자바스크립트의 reverse() 기능을 알아봅시다. const arrayOne = ['a', 'b', 'c'] const arrayTwo = arrayOne.reverse() console.log(arrayTwo) //['c', 'b', 'a'] 다른 언어와 마찬가지로, 자바스크립트도 아주 쉽게 reverse() 를 통해 리스트를 역으로 만드는 게 가능합니다. 그런데, 여기서 주의할 점이 있습니다. 요 Array.prototype.reverse() 는 기존 리스트에게 영향을 줍니다. 즉, arrayTwo를 만들어도 arrayOne도 리버스 되어 있다는 소리입니다. 기존 리스트에 영향을 주지 않고 reverse하는 몇가지 방법 slice 사용하기 const arrayOne = ['a', 'b', 'c'];.. 2020. 7. 28.
[JS] MVC 패턴과 MVVM 패턴 MVC 패턴 (이 패턴은 자바스크립트 고유의 것이 아닙니다.) MVC는 Model, View, Controller의 약자입니다. 응용 프로그램을 세가지 구성 요소로 나눈 것입니다. 이렇게 나누는 이유는 영역간 코드의 결합도를 최소화 시키기 위해서 입니다. 위 이미지 처럼 Model, View, Controller가 상호작용을 하며 사용자가 어플리케이션과 상호작용 할 수 있도록 만들어 줍니다. Model 모델은 데이터베이스에 있는 데이터를 가져와 다른 객체에 전달해 줍니다. 또는 외부 객체로부터 데이터를 받아서 DB에 넣어줍니다. View 모델에서 받아온 데이터로 화면을 관리합니다. 사용자가 입력한 데이터를 처리하고, 유저가 생성한 입력 이벤트 데이터를 다른 객체에 전달하는 역할을 합니다. (html, c.. 2020. 4. 26.
[javascript] 자바스크립트의 sort( )는 문자정렬이구나... (문자, 숫자 ,Object 정렬법) sort() 함수가 있다. 보통 문자에다 이 함수를 쓰면 알파벳 순으로 정렬을 해 줄 것이고, 숫자에다 쓰면 123의 순서대로 정렬을 해 줄 것이다. (적어도 첫 언어를 python으로 시작한 나한테는 그렇다.) 그런데 자바스크립트에서 sort는 문자정렬이다. 기본기가 부족하다는 건 예전부터 알고 있었는데 이런 것도 모르고 개발을 했다니 충격이긴 하다. 이게 반드시 문자정렬인 자바스크립트한테도 충격이고. 혹시나했는데 역시나구나. 문자 정렬을 했을 때의 모습이다. 당연하게 첫머리 글자 순서대로 정렬해준다. 만약 숫자를 정렬하려고 한다면? 문자처럼 정렬이 된다. 만약 내가 숫자를 숫자답게 정렬하고 싶다면 어떻게 해야할까? 바로 함수를 사용해야 한다! 바로 요렇게!!!! 만약 reverse()를 사용하고 싶다.. 2020. 4. 21.
[javascript] 자바스크립트 es6 map es6에서 우리는 key-value쌍을 저장하는 Maps라는 데이터 구조체를 사용할 수 있게 되었다. 우리는 어떤 객체든 key 또는 value로 저장할 수 있다. Maps를 사용하기 이전에는 키 값은 string만 사용 가능하지만 value는 무엇이든 들어갈 수 있었다. Maps를 사용하는 것은 간단하다. Maps는 아래 코드와 같이 정의할 수 있다. const superHero = new Map(); superHero.set('Superman', 'Clark Kent'); superHero.set('Batman', 'Bruce Wayne'); 하지만 set을 사용하여 키와 벨류 값을 넣는 대신에 nested array를 사용하여 각 배열의 첫번째 값을 key에 두번째 값을 value에 매칭시킬 수 있.. 2020. 2. 2.
[javascript] 바나나 문제 / 0.1+0.2 === 0.3이 틀린 이유 자바스크립트 :: 바나나 자바스크립트를 헷갈리게 하는 몇가지 문제들을 소개해본다. console.log('b' + 'a' ++ 'a' + 'a').toLowerCase(); //banana 첫 글자 b 와 a 는 문자열이므로 쉽게 ba 로 변환된다. 그러나 그 다음 ++ 'a' 에서 첫번째 + 기호는 이전 문자열 더하기와 같은 기능을 수행하지만 뒤에 있는 +는 문자열을 숫자로 바꾸는 unary operator로의 역할을 한다. 그러나 뒤에 따라 붙는 a는 숫자로 변환할 수 없으므로 NaN 이 반환되게 되는데 이것이 toLowerCase() 에 의해 소문자로 변해 최종적으로 banana 가 출력된다. 배열 더하기 console.log([1, 2, 3]+[4, 5, 6]); //1, 2, 34, 5, 6 이.. 2020. 1. 29.
[javascript] ES6 클래스와 Prototype / 왜 Object instanceof Function은 true인가 ES6 Class와 Prototype #dev 자바스크립트는 프로토타입 기반 객체지향 언어다. 프토로 타입 기반이므로 클래스가 없고, 따라서 상속 개념이 존재하지 않는다. ES5까지는 프로토타입 체인과 클로저 등으로 상속이나 캡슐화 등을 흉내내어 구현해왔다 프로토타입 프로토타입은 프로토타입 링크와 프로토타입 오브젝트로 구성된다. 프로토타입 객체 객체는 언제나 함수로부터 생성된디. 객체 뿐만 아니라 함수와 array도 모두 함수로 장의되어 있다. function CreateItem(){}; const NewItem = new CreateItem(); // 함수를 통한 객체 생성 const obj = {}; //다음과 같이 객체를 선언하는 것은 const obj = new Object(); // Object.. 2019. 11. 9.
[javascript] ES6 export vs NodeJS module.exports와 exports의 차이 모듈 NodeJS에서의 모듈 모듈이란 관련된 코드를 하나의 코드 단위로 캡슐화 하는 것을 말한다. 여러개의 코드로 분할하여 관리하고 index.js 파일 하나에 전부 import 시켜 효율적으로 코드를 관리할 수 있다. module.exports = { hello: function() { return "HELLO"; }, bye: function() { return "BYE"; } }; 위와 같이 모듈을 작성하면 메안 파일에서 다음 코드를 통해 const greeting = require(‘./greeting’); 작성한 모듈을 import 시킬 수 있다. 여기에서 require 코드는 object를 반환한다. 또한 module.exports와 exports는 동일 객체를 바라보고 있고 반환 값은 항상 .. 2019. 10. 25.
[javascript] 자바스크립트 Drag&Drop 구현하기 서론Html 드래그 앤 드롭 api는 돔 이벤트 모델에서 정보를 가져와 정보를 업데이트 하는 방식으로 이루어진다. 드래그 앤 드롭을 구현하는데는 여러 방법이 있는데 드래그 된 아이템의 CSS 스타일을 업데이트 할 수도 있고 아니면 드래그 할 아이템을 복사해서 드롭하는 장소에 붙여넣기 할 수도 있다.구현먼저 html을 통해 드래그 할 요소와 드롭할 요소를 만들자. draggable='true'를 추가하여 요소를 드래그 가능하게 만들 수 있다. 처음 알았음 태그 중에 디폴트로 draggable한 요소가 몇가지 있는데 는 가본적으로 드래그 가능하고, 은 드래그 불가능하다. drag dropzone 드래그 앤 드롭 이벤트 핸들러는 최소 세가지 요소로 구성된다. (전부 함수로 지정된다!!)ondragstart :.. 2019. 10. 6.

티스토리툴바