오늘도 디벅잉

🐣 { JavaScript } fetch 일반적인 fetch 요청은 두 개의 await 호출로 구성됩니다. let response = await fetch(url, options); let result = await response.json(); 웹소켓 웹소켓 프로토콜을 사용하면 서버와 브라우저 간 연결을 유지한 상태로 데이터를 교환할 수 있습니다. 데이터는 '패킷' 형태로 전달되며, 커넥션 중단과 추가 HTTP 요청 없이 양방향으로 전송됩니다. https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info

🐣 변수와 객체 변수는 변수를 담고 있지만, 객체는 객체의 주소를 담고 있다. a 변수를 b 변수에 대입하면 값이 복사가 되고, c 객체를 d 객체에 대입하면 주소값이 복사가 된다. (함수도 객체와 마찬가지로 주소값을 할당) Boolean 값 0, "", null, undefined, NaN은 false이다. false 같은 값이라고 하여 falsy 라고 한다. 논리연산자: 피연산자 타입에 제한없음 && => 첫번째 falsy를 반환 (하나라도 false 이면 false이기 때문에 false가 나오면 끝임, 모두 true이면 마지막 값 반환) || => 첫번째 truthy를 반환 (하나라도 true 이면 true이기 때문에 true가 나오면 끝임, 모두 false이면 마지막 값 반환) ?? (null 병..

🎯 일정에 당장 급한 코딩테스트가 생겨 빠르게 정리해보는 JS 핵심 문법 📌 참고자료 - 모던 자바스크립트 Deep Dive (이웅모 / 위키북스) 3. 문자열(String) 3-1. length 프로퍼티 'Hello'.length; // -> 5 '안녕하세요!'.length; // -> 6 3-2. chartAt 메서드 const str = 'Hello!'; for (let i = 0; i < str.length; i++) { console.log(str.charAt[i]); // H e l l o } 3-3. slice 메서드 - 대상 문자열 변경 X const str = 'hello world'; // 0번째 인덱스부터 5번째 인덱스까지 반환 (5번째 인덱스는 미포함) str.slice(0, 5);..

🎯 일정에 당장 급한 코딩테스트가 생겨 빠르게 정리해보는 JS 핵심 문법 📌 참고자료 - 모던 자바스크립트 Deep Dive (이웅모 / 위키북스) 2. 정규표현식(RegExp) *정규표현식의 표현 방법 - /정규표현식/플래그 (ex. /[a-z]/g) 2-1. 플래그 i(Ignore case) - 대소문자를 구별하지 않고 한 번만 검색 (전체 검색시 g와 같이 사용 - /ig) g(Global) - 대소문자를 구별하여 전체를 검색 (대소문자 구별하지 않으려면 i와 같이 사용 - /ig) 2-2. 반복검색 - {} const target = 'A AA BB Aa Bb AAA'; // 'A'가 최소 1번, 최대 2번 반복되는 문자열을 전역 검색한다. const regExp = /A{1,2}/g; // 매칭..

🎯 일정에 당장 급한 코딩테스트가 생겨 빠르게 정리해보는 JS 핵심 문법 📌 참고자료 - 모던 자바스크립트 Deep Dive (이웅모 / 위키북스) 1. 배열(Array) 1-1. 순회 for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 1-2. 삭제 const arr1 = [1, 2]; let result = arr1.pop(); console.log(result); // 2 console.log(arr1); // [1] // pop 메서드는 원본 배열을 변경함 const arr2 = [1, 2, 3, 4, 5]; arr2.splice(1, 2); console.log(arr2); // [1, 4, 5] console.log(arr2.lengt..

노마드코더 강의를 들으며 모멘텀 클론코딩을 진행하였다. 결과물은 아래 주소에서 🚀 https://reload1bronze.github.io/ ⚔️ 주요 포인트 1. JS에서 HTML 요소 불러오기 const loginInput = document.querySelector("#login-form input"); const toDoForm = document.getElementById("todo-form"); 2. localStrorage를 이용한 데이터 저장 및 불러오기 const savedUsername = localStorage.getItem(USERNAME_KEY); function foo(e) { ... localStorage.setItem(USERNAME_KEY, username); ... } 3..

강의 내용 (무료) 바닐라 JS로 크롬 앱 만들기 (Momentum) 바닐라 JS로 그림판 만들기 한줄 요약 JS 입문자들에게 강추! 추천 대상 1. HTML, CSS를 학습한 프로그래밍 입문자 2. 인터넷 강의를 집중해서 들을 수 있는 사람 3. 과제가 주어지면 더욱 열심히 하게 되는 사람 (챌린지 참여시) 총평 드디어 자바스크립트! 자바스크립트를 통해 HTML, CSS를 조작하고, 데이터를 다루고, API를 활용하는 작업이 흥미로웠다. 우리가 많이 사용하는 Momentum 이라는 크롬 앱을 카피해 봄으로써 앞으로의 학습에 대한 자신감이 붙는다. 코코아 클론 챌린지에 이어 JS 챌린지도 아자아자@🐱‍🏍