자바스크립트 ES6에서 문자열을 다루기 쉽도록 템플릿 리터럴(Template literals) 이라는 새로운 표기법이 생겼다. 기존에 '' 혹은 "" 안에 넣던 문자열을, esc키 밑에 있는 백틱 기호(``) 안에 넣어서 표기한다. 📌 Template literals 사용의 장점 1. 문자열을 변수와 함께 호출할때, 문자열을 ''로 각각 분리하지 않고 사용할 수 있다. 양 옆에 + 기호도 챙겨줄 필요가 없다. const name = 'Jessie'; console.log('Hello, I am ' + name + '.'); console.log(`Hello, I am ${name}.`); // 둘 다 콘솔에 Hello, I am Jessie. 출력됨 2. 문자열 안에서 따옴표를 사용하고 싶거나, 줄바꿈을..
자바스크립트 ES6 문법에서 변수 공부 중 전에는 어려워서 접근 못하던 TDZ에 대해 좀 더 정리를 해볼 수 있을 것 같아 포스팅해본다. >> 변수 기본개념 포스팅 2021.12.27 - [Javascript] - [JS] const, let, var 개념정리 (feat. hoisting, scope) 👀 Hoisting? 변수의 선언은 선언 / 초기화 / 할당의 단계로 나누어 진행된다. 선언 단계 : var name 등의 방식으로 변수를 정의한다. 초기화 단계 : 선언단계의 변수를 위한 메모리를 만들고, undefined로 값을 초기화 한다. 할당 단계 : 초기화된 메모리에 다른 값을 할당한다. hoisting 이라는 단어는 끌어올린다는 뜻이다. 호이스팅은 선언하는 단계의 코드가 유효범위의 최상단으로 ..
자기자신을 뜻하는 this는 쓰여진 위치에 따라 해석이 달라진다. this는 함수 안에서 사용할 수 있는 변수이면서, 그 변수 안에 담겨있는 의미는 함수를 어떻게 호출하냐에 따라 달라진다. 1. this의 단독 호출, 일반 함수에서의 호출 전역 공간에서 this를 호출하는 경우 this는 전역객체 ( = global object )를 의미한다. TEST 1 function abc() { console.log(this); } abc(); // output = window 일반함수에서 this를 사용했으므로 this는 전역객체를 의미한다. 브라우저에서 전역객체는 window 이다. TEST 2 const name = 'Jessie'; function callName() { console.log(this.na..
계속 이고잉님 강의 듣는 중 https://opentutorials.org/module/532/6570 생성자와 new - JavaScript 객체 객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 객체를 만들어보자. var person = {} person.name = 'egoing' opentutorials.org 👀 여기 같은 기능을 하는 객체가 반복되고 있다. const sayHello1 = { name : 'Jessie', introduce : function() { return 'My name is' + this.name; } } const sayHello2 = { name : 'Tony',..
강의 커리큘럼대로 가다보니 뭔가 순서가 꼬인듯 하다. this를 먼저 공부하다가, new 생성자 함수 안에서 this의 역할에 대해 어려운 부분이 있었고 그것을 이해하려다보니 객체지향이 뭔데? 하게 되었다. 일단 객체지향 프로그래밍의 개념부터 잡아보자. https://opentutorials.org/module/532/6584 객체지향 - JavaScript 객체지향 프로그래밍은 크고 견고한 프로그램을 만들기 위한 노력의 산물이다. 객체지향이라는 큰 흐름은 현대적 프로그래밍 언어들을 지배하고 있는 가장 중요한 맥락이라고 할 수 있다. 하지 opentutorials.org 그리고 이것은 역시나 교과서... 아직 머릿속에 명확하게 정리된 내용은 아니지만 이고잉님 강의를 듣고 이해한대로 정리해 적어본다. 썼던..
코딩애플 자바스크립트 강의 막바지 듣는 중, 애플 갬성으로 스크롤 애니메이션 만드는 강의가 있었다. 쌤이 주신 예제 자료는 이것 (지금은 사이트 레이아웃이 바뀌어서.. 강의 자료를 가져왔..) 👀 opacity 가변값 구하기 현재 창의 scrollTop 값을 콘솔에 찍어보고, 애니메이션의 시작점과 끝점의 스크롤값을 찾는다. 그러면 이런 그래프를 그릴 수 있었다. 저 그래프의 기울기값을 구하면 opacity의 가변값을 구할 수 있다며 중학생때 배웠다는 함수를 알려주셨는데 머리가 하얗게 되었다 ㅎㅎ 수학은 잊고 살아도 너무 잊고 살았다.. 이런것도 못알아 듣겠는 나를 자책하면서 혹시 다른 코드로 해결할 수는 없나 구글링 해봤는데, 라이브러리만 잔뜩.. 그래서 주변인을 괴롭혀 중등 수학강의를 들었고 가까스로 ..
sort(), reduce(), map(), filter() ES6 문법으로, Array 내 모든 요소를 반복해서 가공시키는 메소드이다. 📌 sort() Array의 요소들을 sort 함수 내용대로 재정렬하여 반환한다. 기본 sort() const fruits = ['Banana', 'Apple', 'Grape', 'Cherry'] fruits.sort(); //output : ['Apple', 'Banana', 'Cherry', 'Grape'] sort()의 파라미터 값에 아무것도 넣지 않으면 문자열로 취급되어 유니코드 값 순서대로 아이템을 정렬한다. const number = [1, 8, 100, 33, 5] number.sort(); //output : [1, 100, 33, 5, 8] 그래서 숫..
탭 메뉴를 만드는 두가지 방법에 대한 강의 내용 정리하기. 처음에는 흐름대로 코드를 짜고 반복문을 활용해서 리팩토링한다음 이벤트버블링 개념을 활용해 이벤트리스너를 줄여 최적화하는 법을 배웠다. 📌 탭메뉴 만들기 const tabButton = $('.tab-button'); const tabContent = $('.tab-Content'); tabButton.eq(0).click(function(){ tabButton.removeClass('active'); tabContent.removeClass('show'); tabButton.eq(0).addClass('active'); tabContent.eq(0).addClass('show'); }); 이렇게 코드를 만들면, .eq(0) 자리에 각 버튼 순서에..
탭 메뉴에서 반복문을 만들면서 배운 필터링 문법. 역시나 배운걸 검색하니 훨씬 방대한 내용이 나오는데 일단 내가 지금 사용해봤던 것들부터 정리하고, 차차 경험이 닿는대로 내용 추가 예정. 👀 .first() .last() $('.tab-button').first().addClass('active'); 첫번째 tab-button 요소를 선택해 클래스 추가 $('.tab-button').last().addClass('active'); 마지막 tab-button 요소를 선택해 클래스 추가 👀 .eq() $('.tab-button').eq(0).addClass('active'); 0번째 tab-button 요소를 선택해 클래스 추가 $('.tab-button').eq(-1).addClass('active'); ..
탭 UI를 만들다가 자연스럽게 나온 반복문 개념. 코드가 잘 작동해도 명확하지 않은 부분이 있으면 아는게 아니므로, 생활코딩 반복문 파트를 다시 공부하며 정리했다. 이 코드에서 내 의문은 이거였다. 반복문의 조건에 의해 i 에 들어가는 숫자가 바뀌면서 내부의 코드가 반복 실행되는 것은 알겠는데.. 그럼 어떻게 그 중 클릭하는 버튼의 번호에 해당하는 코드만 실행되는거지? 👀 아.. 모르는걸 정리해서 적다보니 알겠다. 버튼이 3개인 경우, 원래는 .eq(0) .eq(1) .eq(2)를 넣어 여러 묶음의 코드를 만들어놓아야 했으나, 위의 코드로 정리하면 여러 묶음의 코드를 만들어 놓은 것과 똑같이 코드가 생성되니 클릭 이벤트가 발생했을때 실행될 수 있는거구나.ㅎ.. 의식의 흐름대로 쓰는 포스트.. 일단 정리는..
- Total
- Today
- Yesterday
- javascript
- typescript
- 개념정리
- DOM
- 리액트
- JS
- CSS
- VSCode
- destructuring
- 생각정리
- Callback
- JQuery
- 구조분해할당
- JSX
- 삼항조건연산자중복사용
- scrollEvent
- Synchronous
- callsignature
- Asynchronous
- class
- Prototype
- Til
- 조건부삼항연산자
- Prettier
- notworking
- promise
- ES6
- 타입스크립트
- Ternary
- 다중조건삼항연산자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |