sohyeon kim

1. 단축키 cmd + , 키로 설정에 들어간다. 2. 검색 창에 editor tap 입력 3.Editor: Tab Size 를 2로 수정한다. (기본값 : 4) + Editor: Detect Indentation 체크 해제 + Editor: Insert Spaces 체크 현재 다른 정렬 플러그인을 쓰고 있어서 바꿔줄 필요는 없었지만 나중에 필요할지 모르니 기록해둔다.

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; } 그..

pwd 현재 폴더 확인, 다음 줄에 현재 위치 경로 알려줌 mkdir 폴더명 현재 있는 위치에 폴더 생성 touch 파일명 현재 있는 위치에 파일 생성 🤩

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

❗️ Promise를 이용하지 않아도 좀 더 간단하게 비동기를 작성할 수 있는 방법! function 앞에 async를 쓰면 Promise를 쓰지 않아도 자동적으로 함수 안 코드들이 Promise로 바뀐다. // function fetchUser() { // return new Promise((resolve, reject) => { // // do network reqeust in 10 secs... // resolve(`aotoyae`); // }); // } async function fetchUser() { // do network reqeust in 10 secs... return `aotoyae`; } const user = fetchUser(); user.then(console.log); co..

복습! const pr = new Promise((resolve, reject) => { setTimeout(() => { resolve("OK"); // reject(new Error("ERROR")); resolve를 지우고 이 부분을 쓰면 Error가 뜬다. }, 1000); }); console.log("START"); pr.then((result) => { console.log(result); }) .catch((err) => { console.log(err); }) .finally(() => { console.log("END"); }); // "START" // 1초 후 "OK" // "END" const f1 = () => { return new Promise((res, rej) => { s..