sohyeon kim

❗️null : 의도적으로 '없음'을 준 값, 의도적으로 표현할 때 사용하는 값 ❗️undefined : 처음부터 없었던 값, 값이 없다는 것을 확인하는 값 typeof null // 'object' typeof undefined // 'undefined' null === undefined // false null == undefined // true null === null // true null == null // true !null // true isNaN(1 + null) // false isNaN(1 + undefined) // true null 의 타입은 object undefined 의 타입은 undefined ❗️변수에 null 을 할당하는 것은 이전에 참조하던 값을 더 이상 참조하지 않겠..

동등 연산자와 비교 연산자의 차이를 알아 보자! ❗️동등 연산자 : 형 변환 O == 동등 != 부등 ❗️일치 연산자 : 형 변환 X === 일치 !== 불일치 console.log(1 == '1'); // true console.log(1 == true); // true console.log(1 === '1'); // false console.log(1 === true); // false 두 연산자를 이용한 결과가 다른 이유는 일치 비교는 형 변환이 일어나지 않지만, 동등 비교는 숫자로 형 변환이 일어나기 때문이다! 문자형 '1'이 1로, 불리언 true 도 1로 변환된다. ✳️ 코드가 좀 더 길고 복잡할 때, 어디선가 예상치 못한 형 변환이 일어날 수 있으니 항상 일치 연산자를 사용하자!

❗️웬만한 값은 불리언으로 형 변환을 했을 때 true 값이 나온다! // 문자 => 불리언 let x = '문자'; console.log(x); // 문자 console.log(Boolean(x)); // true console.log(typeof x); // string console.log(typeof Boolean(x)); // boolean // 숫자 => 불리언 let y = 123; console.log(y); // 123 console.log(Boolean(y)); // true console.log(typeof y); // number console.log(typeof Boolean(y)); // boolean ❗️그럼 false 값을 얻으려면? // 문자 => 불리언 let x = ''..

// and 연산자 console.log(2 false ❗️and 연산을 할 때 왼쪽이 false인 경우, 오른쪽은 볼 필요도 없이 결과는 false이다. ❗️왼쪽 값이 true라면, 오른쪽도 확인 ⬇️ 이것은 사실.. 🌟🌟🌟 왼쪽 값이 true 면 오른쪽 값을 반환하고, 왼쪽 값이 false 면 그대로 왼쪽 값을 반환한다!!!! 🌟🌟🌟 console.log("hi" && "hello") // "hello" // or 연산자 console.log(8 !== 8 || 2 false ❗️or 연산을 할 때 왼쪽이 true인 경우, 오른쪽은 볼 필요도 없이 결과는 true이다. ❗️왼쪽 값이 ..

1. 프로젝트를 만든 뒤 규칙 메뉴로 들어가 6번째 줄 코드에서 false > true로 변경한다. 2. html 내 작업했던 스크립트의 타입을 module로 변경한다. ** 주의) 모듈로 변경하게 되면 onclick 기능이 작동하지 않는다. 3. firestore 기본 코드를 작성한다. // Firebase SDK 라이브러리 가져오기 import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js"; import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js"; import { collection, a..

깃허브 업로드 시 firebase나 오픈 api를 이용할 때 key를 숨기는 방법! 저 album.html의 script에서 사용 중이던 key를 숨길 것이다! 1. 같은 위치에 숨길 파일인 key.js를 만들어주고 키들을 넣어준다! 2. album.html로 돌아와 key.js를 불러오고 값들을 설정해준다. 3. 마지막으로 .gitignore 파일을 만들고 숨길 파일인 key.js의 경로를 적어준 뒤 커밋한다! ** firebase api 키 숨기는 법을 검색하니 react를 이용하는 글이 많았는데, 아직 배우기 전이라 이해하기 어려워서 오픈 api 이용했을 때 사용했던 방법으로 시도해보니 똑같이 잘 숨겨졌다!

스파르타코딩클럽에 무료로 디데이 캘린더 만들기 강의가 올라와서 만들어 보았다! 강의는 1시간 정도였고 다 들은 후 css 수정, 완성까지 총 이틀 정도 소요됐다. 강의에선 12월 1일을 시작으로 6*6 그리드를 만들어서 카드는 총 24칸을 만드는데, 나는 D-day 10일부터 시작하자! 하고 15일부터 시작하는 캘린더로 제작했다. 그래서 4*4 그리드로 카드는 총 10칸! 만들면서 그리드 수 조절이랑 카드 효과 질문을 올렸었는데 답을 굉장히 빨리 달아주셨다. 🥹 그리드 수 질문은 4*4로 그리드를 줄이니 카드가 직사각형이 되어서 정사각형으로 바꾸고싶다는 내용이었다. .grid-1 { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; } 그..

String.replaceAll : 전체 문자열에서 특정 문자를 설정한 문자로 바꿔준다. const str1 = "Hello World"; console.log(str1.replace(/l/, "~")); // He~lo World console.log(str1.replace(/l/g, "~")); // He~~o Wor~d console.log(str1.replaceAll("l", "~")); // He~~o Wor~d 별로 차이가 없어보이지만 특수문자가 있을 땐 확실히 가독성이 좋아진다. const str1 = "I'm [aoto]. This is Haru's [Car]."; console.log(str1.replace(/\[/g, "~").replace(/\]/g, "~")); // I'm ~aot..

: 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능 : 다른 작업을 하다가 다시 돌아와서 next() 해주면 멈췄던 부분부터 이어서 실행 + Redux saga 에서 많이 쓰고 있다.. function 옆에 *을 붙여서 만들고 내부에 yield 키워드를 사용한다. 이 yield에서 함수의 실행을 멈출 수 있다! 제너레이터 함수를 실행하면 제너레이터 객체가 반환된다. ❗️ 제너레이터 객체엔 next() 메소드가 있는데, 사용해 보자! function* fn() { console.log(1); yield 1; console.log(2); yield 2; console.log(3); console.log(4); yield 3; return "finish"; } const a = fn(); console.l..

복습! ❗️ async를 사용하면 then보다 가독성이 좋아진다! asait은 async 함수 내에서만 쓸 수 있다. 일반 함수에서 쓰면 에러 발생 function getName(name) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(name); }, 1000); }); } async function showName() { const result = await getName("aoto"); // 기다렸다가 console.log(result); // 넣어준다 } console.log("시작"); showName(); // 1초 후 "aoto" try { } : 성공 시 실행 catch { } : 실패 시 실행 const f1..