본문 바로가기

TIL61

document document : html을 가리키는 객체 (많은 것들이 들어있는 객체) Grab me! hihi 1 hihi 2 hihi 3 console.dir(document.getElementById("title")); // h1태그에서 가져올 수 있는 모든 속성 출력 document.getElementsByClassName("name") document.querySelector(".hello h1") // 첫번째 것 return document.querySelectorAll(".hello h1") // 배열로 return const title = document.querySelector("div.hello:first-child h1"); title.style.color = blue; // 색상 바꾸기 func.. 2022. 7. 15.
반복문 for ... of 배열에 관한 반복문을 돌리기 위해 만들어짐 let numbers = [10, 20, 30, 40, 50]; for (let number of numbers) { console.log(number); } for ... in Object.entries: [[키, 값], [키, 값]] 형태의 배열로 변환 Object.keys: [키, 키, 키] 형태의 배열로 변환 Object.values: [값, 값, 값] 형태의 배열로 변환 객체가 지니고 있는 값에 대하여 반복을 하고 싶다면 위 함수들을 사용하셔도 되고, for...in 구문을 사용하셔도 됩니다. const doggy = { name: '멍멍이', sound: '멍멍', age: 2 }; for (let key in doggy) { co.. 2022. 7. 14.
조건문 if(condition === true){ } else if(age > 8){ } else{ } 2022. 7. 14.
연산자 === : 값과 data type 이 모두 같은 지 비교 == : 값이 같은 지 비교 let a = 1; let b = "1"; console.log(a == b); // true console.log(a === b); // false console.log(null == undefined); // true console.log(null === undefined); // false 삼항연산자 condition ? exprIfTrue : exprIfFalse 예시) var age = 26; var beverage = (age >= 21) ? "Beer" : "Juice"; console.log(beverage); // "Beer" 단축 평가 논리 계산법 const dog = { name: '멍멍이' }; f.. 2022. 7. 12.
함수 function sayHello(argument){ return "Hello my name is "+argument; } console.log(sayHello("dain")); 화살표 함수 (https://learnjs.vlpt.us/ 에서 발췌) 함수를 선언하는 방식 중 또 다른 방법은 화살표 함수 문법을 사용하는 것 입니다. const add = (a, b) => { return a + b; }; console.log(add(1, 2)); function 키워드 대신에 => 문자를 사용해서 함수를 구현했는데요, 화살표의 좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록이 들어옵니다. 그런데, 만약에 위와 같이 코드 블록 내부에서 바로 return 을 하는 경우는 다음과 같이 줄여서 쓸 수도 있습.. 2022. 7. 11.
객체 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 키가 변수처럼 사용되었지만, 실제로는 String 타입으로 저장된다. const player = { name : "dain", points : 10, student : false } console.log(player.name); console.log(player["name"]); player.name = "kimdain" // const로 선언되었지만, player의 자체를 변경하지 않고서는 안의 속성은 변경가능하다. 객체 비구조화 할당 : 객체에서 값들을 추출해서 새로운 상수로 선언해 주는 것 const captainAmerica = { name: .. 2022. 7. 8.
옵셔널 체이닝 ‘?.’ 옵셔널 체이닝 ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 다음과 같이 주소 정보가 없는 user가 있을 때 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 존재하지 않는 요소에 접근해 요소의 정보를 가져오려할 때 // querySelector(...) 호출 결과가 null인 경우 에러 발생 let html = document.querySelector('.my-element').innerHTML; ?. ?. ‘앞’의 평가 대상이 undefined 나 null 이면 평가를 멈추고 .. 2022. 7. 8.
배열 const array = [1,"hello",false, null, undefined]; array.push("sun") // 추가 비구조화 할당 const array = [1, 2]; const [one, two] = array; console.log(one); // 1 console.log(two); // 2 배열 내장함수 map() 함수의 파라미터로는 변화를 주는 함수를 전달 const array = [1, 2, 3, 4, 5, 6, 7, 8]; const square = n => n * n; const squared = array.map(square); console.log(squared); filter() 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만듦 const todo.. 2022. 7. 5.
변수 const : 상수 선언 let : 변수 선언 var : 형 변환이 되어도 ok ❗️ 기본적으로 const를 쓰고 필요할 때만 let을 쓰되, var은 쓰지 말 것 💡 추가적으로, IE9, IE10 같은 구형 브라우저에서는 let 과 const 를 사용 할 수 없습니다. 하지만, 보통 개발을 하게 될 때는 Babel 과 같은 도구를 사용하여 코드가 구형 브라우저에서도 돌아갈 수 있게끔 변환작업을 합니다. 만약에, 여러분이 나중에 별도의 도구 없이 구형 브라우저를 호환시켜야 하는 상황이 온다면 (그럴 일은 거의 없을 겁니다.) var 를 사용하게 될 수도 있습니다. null : 값이 아무것도 없는 것 undefined : 변수가 메모리에 만들어졌지만 값이 정해지지 않은 것 const a = null; //.. 2022. 7. 5.
Javascript 강의 자료 : https://learnjs.vlpt.us/ Javascript란? nodeJS를 통해서 runtime을 통해서 javascript를 실행가능 템플릿 리터럴 (javascript) backtick(`) 문자를 사용하여 문자열을 표현 1) 줄바꿈을 쉽게 할 수 있고, 2) 문자열 내부에 표현식을 포함할 수 있다. 2022. 7. 5.
13. 배열에 항목 추가하기 with 복습 출처 - 벨로퍼트 https://react.vlpt.us/basic/13-array-insert.html 이제까지 공부한 것을 복습하며 다시금 코드를 읽어보자. CreateUser.js import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( 등록 ); } export default CreateUser; props를 통해 컴포넌트에 값 전달 (5. props 를 통해 컴포넌트에게 값 전달하기) UserList.js import React from 'react'; function User({ user }) { return ( {user.username} ({user.email}) ); }.. 2022. 7. 4.
12. useRef로 컴포넌트 안의 변수 만들기 출처 - 벨로퍼트 링크 useRef Hook의 용도 1) DOM 선택 2) 컴포넌트 안에서 조회 및 수정할 수 있는 변수 관리 e.g. 고유 id 관리하는 용도 관리가능한 값 1) setTimeout, setInterval 을 통해서 만들어진 id 2) 외부 라이브러리를 사용하여 생성된 인스턴스 3) scroll 위치 useRef() 를 사용할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다. .current 로 수정, 조회를 하면된다. 예시) const nextId = useRef(4) 2022. 7. 2.
반응형

티스토리툴바