🌱 → 🌳

sudo로 권한 주어 설치 📌 NPM 이란? Node Package Manager 페키지 관리를 위해 하나의 json 파일로 관리해 줌 ✅ 패키지 관리 시작하기 npm init -y package.js 파일이 생성되고, 이 파일안에 node.js 관련 package 정보가 다 들어감 { "name": "day27", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 위의 파일이 처음 생성 당시의 package.js이다. npm run tes..

📌 문자열 관련 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); //우영우 📌 ..

HTML/CSS, JavaScript를 사용하여 TodoList 만들어보았다. 디자인은 평소에 자주 사용하는 todomate를 참고했다. list가 입력도 해보길 바란다 ! 나중에 벡엔드도 배워서 나만의 todolist app을 완성해봐야지 결과물: https://lambent-beignet-d6fa26.netlify.app Todolist lambent-beignet-d6fa26.netlify.app 코드 확인: https://github.com/thals0/TodoList-netlify GitHub - thals0/TodoList-netlify Contribute to thals0/TodoList-netlify development by creating an account on GitHub. gith..

📌 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..

Day 2 - 바닐라JS로 크롬앱 만들기: From #2.1 to #2.6 console.log() : console에 출력 #2.1 Basic Data Types integer: 정수 float: 소수 string : 문자열 #2.2 Variables #2.3 const and let const: 변수 선언(constant), constant는 값이 바뀔 수 없음 let: 변수 선언 / 값 바꿀 수 있음 (업데이트 가능) 많은 사람들이 const를 보통 사용하고, variable을 업데이트 하고 싶으면 let을 사용함 var 언어 보호 불가능/ 코드의 의도를 파악하기 힘들어짐 -> 옛날꺼니까 되도록 쓰지말 것 #2.4 Booleans null: 아무것도 없음을 의미 undefined: 변수는 존재하지만..