🌱 → 🌳

📌 전개구문(Spread Syntax) 2015년에 추가 된 문법 벡엔드에서 큰 데이터를 다룰 때 자주 사용 병합, 구조 분해 할당 등에 다양하게 사용 가능 배열 또는 객체의 값을 하나하나 따로 분리해서 흩뿌리는 역할 원하는 변수 앞에 ...써주면 됨 📍 예시1 const arr = [1, 2, 3, 4, 5, 6]; console.log(arr); //[ 1, 2, 3, 4, 5, 6 ] console.log(...arr); //1 2 3 4 5 6 📍 예시2 function spread(first, ...rest) { console.log(first); console.log(rest); } spread(1, 2, 3, 4, 5, 6, 7); 📌 node.js 내장 객체 사용하기 파일 위치, 파일 이름..

📍 Code Refactoring : 프로그램의 동작은 변하지 않고, 프로그램의 내부 구조를 개선 하는 것! 원시 기술 -> 새로운 기술 코드 비효율 -> 효율(반복문 줄이기, 중복 기능 제거, 메모리 효율 증대) 코드 가독성 높이기 코드의 확장성 높이기 📌 JS에서 Module 사용하기 JS 도 Module 을 지원함 📍 2가지 방식 CommonJS 방식 ES6 방식 ✅ CommonJS 방식 node.js에서 사용하는 모듈 방식 키워드 : require/ exports require로 모듈을 불러 올 때, 코드 어느 곳에서나 불러 올 수 있음 ✔️ 전체 모듈로써 내보내고, 전체를 하나의 Obj로 받아서 사용하는 방법 animals.js // @ts-check const animals = ['dog', ..

📌 JSDoc 란? 일종의 주석 달기 거의 표준화가 되어서 Vscode, Webstorm 등 에서는 기본으로 기능을 제공 특정 형태로 주석을 달면 해당 주석 내용을 통해 함수의 기능 또는 매개 변수의 타입등을 미리 알려줄 수 있음 주석을 달 때 /** */ 로 달면 됨 ✅ JSDoc 부가 기능 @todo 메모처럼 사용 가능, 개발하다가 멈출때 다음부터 해야할 것 써놓기 /** * @todo 내일 새로운 매개변수 추가 해야함 due to 10:30 .. */ @deprecated 더 이상 해당 기능을 쓰지 않을 때 추가 -> 함수 쓰면 가로줄이 그어짐 @type {타입 형태} 변수에 특정 타입을 쓰라고 알려 줄 때 사용이 가능 요즘은 typescript가 이 역할을 대신 해줘서 잘 안쓰긴 함 ✅ JSDoc..

📌 문자열 관련 JS 기능 ✅ .length(); 문자열 길이 ✅ .indexOf(""); 문자열 위치 찾기 const str = "Hello, world"; console.log(str.indexOf("world")); // 7 ✅ .slice(start, end); 문자열 자르기 ✅ .replace("찾을 문자", "바꿀 문자"); 문자열 바꾸기 ✅ .repeat(반복 횟수); 문자열 반복하기 let str = "우영"; let longStr = str.repeat(5) + "우"; console.log(longStr); ✅ .trim(); 앞 뒤 공백 문자 제거하기 let str = " 우영우 "; let trimStr = str.trim(); console.log(trimStr); //우영우 📌 ..

📌 DOM(Document Object Model) 📌 DOM API : Document Object Model Application Programming Interface ✅ querySelector("요소 선택자") CSS 요소 선택자를 사용해서 자신이 가져오고 싶어하는 요소를 가져오는 메소드 문서에서 만나는 제일 첫번째 요소를 반환함 ✅ getElementById("id") ID 이름을 불러서 해당 ID를 가지는 요소를 불러오는 메소드 ✅ classList classList.add('class1') : 선택 요소에 class1이라는 class 더하기 classList.remove('class1') : 선택 요소에 class1이라는 class 제거 classList.contains('class1')..

📌 Object 접근 추가 삭제 프로퍼티 존재 여부 확인 Object method method: 객체 property로 할당 된 함수 📌 this function sayHello() { console.log(`Hello, I'm ${this.name}`); console.log(this); } let boy = { name: "Justin", sayHello, }; let girl = { name: "Anna", sayHello, }; boy.sayHello(); //Hello, I'm Justin girl.sayHello(); //Hello, I'm Anna ✅ 화살표 함수와 this 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음 화살표 함수 내부에서 this를 사용하면, 그 thi..

📌 변수명 기본 규칙 변수 이름으로는 문자/숫자/_/$ 만 사용 가능 첫 글자는 숫자 불가 예약어 사용 불가 의미를 내포 하는 변수 이름이 좋음 앞 단어가 명사 -> 변수 앞 단어가 be동사 -> boolean 앞 단어가 동사 -> 함수 상수, 고정값은 전체 대문자로 선언 📌 데이터 타입 : string, number, boolean, undefined, null, object, array 등 ✅ typeof : 해당 자료(변수, 데이터 등)의 데이터 타입을 반환해줌 주의, object안의 자료와 null는 object라고 뜸 console.log(typeof null); console.log(typeof "hi"); console.log(typeof 77); // {} 빈 object 선언 consol..

바닐라JS로 크롬앱 만들기: From #2.7 to #2.16 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co #2.7 Functions argument : function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법 #2.8 Functions part Two NaN : Not a Number 함수를 부르고, 입력하는 것 까지 배움 //object 안에 function이 있는 경우 const player = { sayHello: function(otherName){ console.log("Hello " + otherName); } } player.sayHello("nico"); play..