object : 속성을 가진 값을 저장할때 객체 자료형으로 만든다. array : 요소들을 순서대로 저장할때 배열 자료형으로 만든다. 작업을 하다보면 객체나 배열 데이터 전부가 아닌, 일부만 필요한 경우가 있다고 한다. 이럴때 자료를 변수로 '분해' 할 수 있게 해주는 문법이 [ 구조분해할당 ] 이다. Array 데이터를 변수에 담기 const arr = [1,2,3] const a = arr[0] const b = arr[1] const c = arr[2] // 위 코드를 아래와 같이 바꿀 수 있다. const [a,b,c] = arr 왼쪽에 선언한 변수 명의 갯수와, 배열 요소의 갯수가 맞지 않으면 값이 제대로 할당되지 않으므로 디폴트값을 넣어줄 수 있다. const arr = [1,2] const ..
얼마전에 투표UI 만들면서 DOM 요소가 맘대로 잡아와지지 않아서 한참 고생했는데 강의들으면서 쪼끔 정리할 수 있게 된것 같다. 배우고 나니까 별 일이 아니네.. 처음에는 어떻게 검색해야할지도 몰라서 멀리 돌아갔었다. 😭 DOM node? element? 검색하다보니 DOM node와 element의 개념이 다르다는걸 알게됐다. What's the Difference between DOM Node and Element? What's the difference between a DOM node and an element? Let's find out! dmitripavlutin.com 간략하게 말하면 DOM node가 element를 포함하는 개념으로 node에는 여러가지 타입이 있고, 그 중 하나가 el..
여러가지 이유로 한동안 코딩을 놓고 있었다. 어쨌든 틈틈이 이전에 만든 것에 목표한 기능을 추가하는데 성공했고 그러면서 배운 개념들을 복습할겸 대략 정리해 본다. 1. 값이 자동으로 계산되는 인풋 만들기 옵션A 와 옵션B 퍼센트 수치를 입력하는 인풋에, 한쪽만 입력해도 나머지가 자동 계산되도록 하는 기능을 추가했다. const inputPercent = document.querySelectorAll('.input.number'); function calculatePercent() { const max = 100; if(this.value > max) { alert('It must be a number less than 100'); this.value = 0; } if(this == inputPercent..
새로운 프로젝트의 메인 화면 디자인이 드디어 마무리 되었다. (아마도) 그 중 한 부분에 애니메이션을 추가하고 싶었는데, 피그마로 프로토타입을 구현하는 것 보다 직접 코드를 짜보면 좋겠다는 생각에 처음으로 업무용 코드를 만들었고 생각보다 더 많은 것을 배우는 중이다. 화면 자체를 만드는 일은 생각보다 오래걸리지 않았다. SCSS 수업을 다시 듣고 기억을 떠올려서 활용한다면 훨~씬 좋겠지만 일단 급하니까 쌩 CSS로 잡았다. 문제는 여러개의 버튼 중 내가 클릭한 요소에 맞는 이벤트를 넣어줄 수 있는가였다. 화면에 있는 8개의 버튼은 각각 왼쪽 버튼인지, 오른쪽 버튼인지 어느 li 태그에 속한 버튼인지 해당 버튼이 가지고 있는 percent가 몇인지 를 구분할 수 있어야했다. 1. 일단 동작이 되도록 만들어..
작년 여름부터 무작정 개발자로 커리어 전환을 해야겠다고 생각하며 열심히 공부했다. 지금쯤 왔던 길을 돌아보고 방향이 어긋나지 않는지 생각해보는 타이밍이 필요한 것 같다. 나는 비교적 늦은 나이에 디자인이라는 커리어를 시작했고 그 동안 광범위한 업무를 맡아왔기 때문에 뾰족한 전문성이 없다는 것에 늘 컴플렉스가 있었다. 서른의 나는 연 닿는 곳에서 열심히 하루를 살아내는 것만으로 만족할 수 있었지만 갈수록 1년 이라는 시간이 무서워졌다. 한 순간의 선택이 내 인생을 바꾸고 있다는 것이 느껴졌다. 그래서 매번 최선의 선택을 하기 위해 촉각을 곤두세우고 기회인 것 같은 순간을 놓치지 않기 위해 성급하게 행동했다. 이고잉님의 Web1 수업을 처음 만나던 2021년 1월의 나를 생각해보면 1년동안 많이 성장했다는 ..
같은 부모 유전자를 가진 여러 객체를 만들어내기 위해 변수와 메소드가 정의되어 있는 Class라는 틀을 사용한다. 이전에는 Constructor를 사용해서 위 기능을 구현했고, ES6에서 Class 문법이 추가되었다. Class를 사용하면 Constructor보다 더 명확하고 깔끔한 코드를 만들 수 있다. 📌 constructor로 생성자를 만든 경우 function Person (name, age) { this.name = name; this.age = age; } // 상속할 속성을 constructor에 정의 Person.prototype.sayHello = function() { console.log('Hello, I am ' + this.name ); } // 메서드를 prototype에 추가 ..
자바스크립트의 객체지향적 특성에 대해 공부하며 프로토타입 기반의 언어라는 내용이 계속 나왔지만 한번에 다 이해할 수가 없어서.. 때되면 이해할 수 있겠지 하며 넘겨왔었다. 그리고 이제 드디어 정리가 좀 되는 중! 👀 Prototype 이란? 프로토타입은 유전자 같은 것이다. 부모가 가진 유전자를 기반으로 자식객체를 만드는 개념이다. 자바스크립트가 프로토타입 기반 언어라는 것은 결국 객체지향적 특성을 설명한다. 클래스 기반 객체지향 VS 프로토타입 기반 객체지향 객체지향은 블럭을 조립해 제품을 만들어가는 과정 같은 것이라고 했다. Java 나 Python, C++ 같은 언어에서는 클래스를 정의해 그것으로부터 블럭(자식 객체)을 만들어 나간다면, Javascript는 클래스 없이 부모의 유전자를 가진 자식객..
이제까지 배웠던 자료형은 각각 다른 데이터 타입을 가지고 있었다. 그리고 그 타입에 따라 변수 할당,수정,복사 등의 작업을 하는 과정에서 다른 결과가 나올 수 있다. 👀 Primitive data type 기본형 데이터 타입 문자, 숫자, 불리언 등 자료 자체가 변수에 저장되는 타입으로 아래와 같은 단순 변수들을 말한다. let name = 'Jessie'; let age = 20; 기본형 데이터 타입의 변수를 복사 한 후 값을 변경하면 어떻게 될까? let name1 = 'Jessie'; // output : Tony let name2 = name1; // output : Jessie name1 = 'Tony'; 위 코드에서 name1에 Jessie가 직접 저장되었고, name2는 name1의 값을 공..
👀 Spread operator 기본 사용법 ES6 에서 추가된 Spread operator는 ... 기호를 붙여서 배열이나 객체의 값을 펼쳐주는 연산자이다. 배열과 객체 이름 앞에 ... 을 사용해주면, 배열에서 괄호를 제거해 내부의 값만 빼서 펼쳐준다. 데이터의 연결, 복사 등으로 유용하게 활용할 수 있다. 괄호를 제거해 주는 연산자 이므로 소괄호 / 중괄호 / 대괄호 내부에서만 사용할 수 있다. const words = ['hello', 'world']; const number = {a: 1, b: 2, c: 3} console.log(words); // output: ['hello', 'world'] console.log(...words); // output: hello world console..
- Total
- Today
- Yesterday
- 생각정리
- 다중조건삼항연산자
- callsignature
- 구조분해할당
- ES6
- VSCode
- promise
- JQuery
- Callback
- JSX
- 타입스크립트
- Asynchronous
- class
- Synchronous
- typescript
- javascript
- 리액트
- CSS
- notworking
- Ternary
- Prototype
- JS
- 조건부삼항연산자
- Prettier
- 삼항조건연산자중복사용
- scrollEvent
- Til
- destructuring
- DOM
- 개념정리
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |