본문 바로가기

JavaScript

(5)
Arrow Functions Arrow Functions const names = ["a", "b", "c"]; function addstart(item) { return item + "★"; } const star = names.map(addstart); console.log(star); //(3) ["a★", "b★", "c★"] implicit return names 라는 배열에 "★"을 더한 새로운 배열을 만드는 함수를 작성해본다면, 기존 방식은 아래와 같다. 2가지 모두 동일한 결과를 얻는다. const names = ["a", "b", "c"]; const star = names.map(function (item) { return item + "★"; }); console.log(star); //(3) ["a★", "b★..
[오류 해결] Source Map/devtools에서 소스 맵을 로드하지 못함 코드 작성 중 많은 다음과 같은 오류가 생겨 소중한 1시간여 정도를 날린 적이 있다.... 다시 반복하지 않기 위해 이 글을 작성한다. 아래는 당시 발생했던 Error DevTools에서 소스 맵을 로드하지 못함: url/assets/swiper/swiper.min.js.map의 콘텐츠를 파싱할 수 없음: Unexpected token < in JSON at position 0 swiper.min.js.map 파일을 찾을 수 없어서 생기는 경고인데 파일을 다시 다운 받고 새 파일을 만들어도 해결하지 못했었다.... 무엇이 문제인가?? 해결법은 //# sourceMappingURL=swiper.min.js.map 소스맵핑 url을 제거하면 해결된다. sourcemap 이란? 빌드 전 후 파일을 맵핑시켜, ..
프론트엔드, javascript 참고 사이트 모음 사이트 MDN - 가장 유명한 MDN 모던 javascript 튜토리얼 - JS 튜토리얼로 타입스크립트 핸드북 - TS 공식문서 번역본 웹팩 핸드북 - 캡틴판교 웹팩 핸드북 fontawesome - 다양한 ICON flatuicolors - 다양한 색 CSS Dinner - 다양한 css 선택자들을 게임을 통해 배울 수 있음 FLEXBOX FROGGY - css의 FLEXBOX를 게임을 통해 배울 수 있음 GRID GARDEN CSS의 grid를 게임을 통해 배울 수 있음 블로그 Velopert velog - velopert님이 만드신 velog 제로초 블로그 - 다양한 JS 관련 지식 Jbee 블로그 - 다양한 프론트엔드 관련 지식 TOAST UI - FE 관련 지식들과 여러 글 캡틴판교 블로그 - J..
Hoisting & Temporal Dead zone (TDZ) Hoisting 사전적의미: 끌어올리다, 들어올리다 javascript에서 변수가 선언되기 전에 사용 될 수 있다는 것을 의미합니다. → 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언. 여기서 유효 범위는 함수 블록 {} 안을 말합니다. 호이스팅의 대상 자바스크립트에서는 ES6에서 도입된 let, const를 포함한 모든 선언을 호이스팅합니다. 변수는 3가지 단계를 거쳐 생성 됩니다. 선언 단계 (Declaration Phase): 변수를 변수 객체 (Variable Object)에 등록합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다. 초기화 단계 (Initialization Phase): 변수 객체 (Variable Object)에 등록된 변수를 위한 공간을 메..
Nullish coalescing operator (??) Nullish coalescing operator (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. or (||) 연산자 변수에 기본값을 줄 때 유용하다. let name; console.log("hello", name || "stranger"); //hello stranger or 연산자는 boolean 연산자여서 true, false만 판단한다. 변수 name의 value값 0을 false로 판단한다. let name = 0; console.log("hello", name || "stranger"); //hello stranger nullish (??) 연산자 nullish 연산자는 변수값이 null..