DEV/JavaScript
-
JavaScript / ThisDEV/JavaScript 2022. 12. 13. 01:31
자바스크립트 This와 관련된 내용을 기록합니다. 관련된 내용을 공부하면 계속해서 update합니다. 2022.12.13 (별코딩 - this) 자바스크립트의 this는 어떠한 객체를 가리킴 이 객체는 상황에 따라 계속해서 변화함 기본적으로 this는 함수를 호출한 객체임 전역에서의 this -> window [함수 문맥에서의 this] 'use strict' function main(){ console.log(this); }; main(); 함수내부의 this는 함수를 어떻게 호출했는지에 따라 값이 달라짐 기본적으로 this는 함수를 호출한 객체를 의미함 누가 함수를 호출했는가? 기본적으로 함수를 호출할땐 this값이 전역을 가리키지만, strict 모드에서 함수를 그냥 호출할땐 this가 undefi..
-
JavaScript / JavaScript Deep Dive 스터디 3주차DEV/JavaScript 2022. 8. 31. 00:26
DOM 1.DOM의 개념 DOM = Document Object Model HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API 즉, 프로퍼티와 메서드를 제공하는 트리 자료구조 2.DOM의 노드 대표적으로 네 가지 노드가 있음 문서노드 - 전체 document를 일컫음 요소노드 - html에서 태그들을 일컫음 어트리뷰트 노드 - html에서 속성들을 일컫음 텍스트 노드 - 태그사이의 내용에 해당 DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작 3.DOM의 노드 접근 DOM의 노드들은..
-
JavaScript / JavaScript Deep Dive 스터디 2주차DEV/JavaScript 2022. 8. 21. 01:34
오늘은 자바스크립트 스터디 2주차의 내용 이번주 주제는 조금 까다로운 편이였는데, 다들 열심히 준비해주고 발표의 구성도 엄청 늘어서, 스터디 기획자로서 엄청 뿌듯한 하루였음 히히 프로퍼티 어트리뷰트 1.내부 슬롯과 내부 매서드 자바스크립트 객체를 만들면 내부 슬롯과 내부 메서드라는게 생김. 근데 이게 함부러 접근할수 있는게 아니라, 자바스크립트 내부에서 작동하는 숨겨진 녀석들이며, 이 내부 슬롯중에서도 특이하게 접근이 가능한 요소가 프로퍼티임 2. 데이터 프로퍼티와 접근자 프로퍼티 접근 가능한 프로퍼티는 위와같이 데이터 프로퍼티, 그리고 접근자 프로퍼티로 나눠져있으며 각각의 특징이 있음 데이터 프로퍼티와 접근자 프로퍼티는 위와 같이 네가지 특징을 가짐 자세한 설명은 아래 프로퍼티 정의에서 진행할예정 여기..
-
JavaScript / JavaScript Deep Dive 스터디 1주차DEV/JavaScript 2022. 8. 11. 21:55
스파로스 아카데미에서 원피스마냥 동료들 모아서 스터디를 진행하고 있는 중이다. 스터디 모집을 어케했고, 어떻게 진행했는지는 이후 스터디가 끝난후에 적어보려고 한다. 각자 맡은 파트가 달라서, 다른 인원들의 파트는 아래 링크하도록 하겠음. 내가 이번주 맡은 파트는 Function - 함수다. 1.함수란 무엇인가? 함수는 기본적으로 내가 무언가를 넣으면 어떠한 로직에 의해 값이 도출되는 것을 말한다. 예를들어 내가 '안녕하세요' 라고 말하면 여러분들이 '안녕하세요!' 라고 대답해주는 것도 하나의 함수라 할수 있지 이를 식으로 표현하면 f(x) = y 라고 표현할수 있다. 이를 또 자바스크립트식으로 표현하면 다음과 같다. function hi(x) { return '안녕하세요!'; }; hi('안녕!'); 위..
-
JAVASCRIPT / Array.at() 배열에서 쉽게 요소 찾기DEV/JavaScript 2022. 7. 26. 22:11
자바스크립트에서 쉽게 요소를 찾는법 Array.prototype.at() 으로 쉽게 요소를 찾을 수 있음 const arr = [1,2,3,4,5] 라고 할때 기본적으로 인덱스로 배열의 값을 찾으려면 arr[idx] 로 값을 찾는다. 하지만 역으로 값을 찾으려면 length값을 찾아 거꾸로 값을 빼주면서 값을 찾아야하는데 자바스크립트 최신문법인 at을 통해 그것을 쉽게 할수 있다. 기본적으로 idx가 양수라면 arr.at(idx) 는 arr[idx]와 동일하게 작용한다. 하지만 음수라면 arr.at(idx) 는 arr[arr.length + idx] 과 동일하게 작용한다. arr.at(-1); // return 5 arr[arr.length - 1]; === arr[4] //arr.length = 5 /..
-
[Udemy] Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강의후기 1편DEV/JavaScript 2022. 1. 27. 18:16
운 좋게 유데미 얼리 에듀터에 걸려서 이번에 React + NodeJs 강의를 무료로 들을 수 있게 되었다! 이전부터 듣고 싶어서 장바구니에 강의 담아놓고, 얼리에듀터 안걸리면 그냥 할인할때 사서 들어야지 하던건데 걸려서 짱좋음 히히 강의 후기 시작 1.Typescript란? 타입스크립트(이하 TS)는 자바스크립트 슈퍼셋이다 (슈퍼셋이 뭔지 찾아봤는데, 뭐 일상적으로 쓰는 단어가 아닌지 검색에는 따로 나오는게 없더라 ㅠㅠ) 타입스크립은 자바스크립트에 기반한 프로그래밍 언어인데, 말 그대로 완연히 새로운 언어가 아니라 JS에 다양한 advantage를 더한 언어라고 생각하면 된다 그렇게 장점을 더했지만 아주 치명적인 단점은 TS 자체로는 브라우저에서 JS처럼 실행 안되는 것이다. 2.그러면 TS를 어케 쓰..
-
Javascript | 클린코드 자바스크립트(강의 정리) 1편DEV/JavaScript 2021. 12. 27. 17:18
[1] var의 지양 [1-1. do not var] 즉 var로 변수 지정을 하지 말자는 것이다. var는 함수 스코프를 가지며, 흔히들 전역변수라고 하여 전체적인 파일에 아주 부정적인 영향을 미친다. 예를들어 var global = '전역변수'; if (global === '전역변수'){ var global = '힝 속았지' console.log(global); } console.log(global); 이런 코드가 있다고 치자. 우선 처음엔 global 이라는 변수를 var를 통해 '전역변수'라고 선언을 하였다. 하지만 if문 내에서 내 마음대로 다시 var를 통해 global을 '힝 속았지'로 변경을 했다. 그럼 각각의 console.log의 결과 값은 어떻게 나올까? 첫번째 log, 두번째 log..