본문 바로가기

분류 전체보기

 (21)
[오류 해결] 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..
[React] 노마드 수업 1-state, setState 등 소스 ★수업3-0 state state : 변하는 데이터를 관리하는 게 state야 class component는 return을 가지지 않아 대신 render를 가짐 따라서, render 안에 return을 쓴다 class component는 class이며, react component로부터 확장된다. react는 자동적으로 class component의 render method를 실행한다. state는 object이다. state에는 바꾸고 싶은 data를 넣는다. button에는 onClick이라는 prop이 기본적으로 있다. this.add()에서 ()는 즉시 함수를 호출해라는 것이고, this.add는 click했을 때만 함수를 호출하는 것이다. -function component와 class comp..
VSCode extension으로 SASS/SCSS를 사용해보자! 해당 포스팅은 참고하기 위해 급하게 가져온 게시물입니다. https://okayoon.tistory.com/entry/VSCode-extension%EC%9C%BC%EB%A1%9C-SASSSCSS%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90 VSCode extension으로 SASS/SCSS를 사용해보자! CSS만 사용하다가 SASS, SCSS로 작업을 해보고 싶다는 생각을 종종하고는 했었다. 하지만 컴파일이 필요했었던터라 실제로 행동으로 옮기는데 까지는 시간이 좀 걸렸다. gulp로 테스트 작업을 해본 okayoon.tistory.com https://blog.naver.com/jj601400/222527551740 vs code에서 scss로 작업..
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..
[React] 노마드 수업 1- 소스 과일 보여주는 예제 소스 import React from 'react'; import PropTypes from "prop-types"; const foodILike = [ { id: 1, name: "apple", image: "https://i.pinimg.com/564x/9e/10/13/9e1013ce992236f9a7b4eb1100d53ef8.jpg", rating: 5 }, { id: 2, name: "banana", image: "https://i.pinimg.com/564x/a5/0c/e6/a50ce6c1cef934d3b1eb3a5b78afc206.jpg", rating: 4 }, { id: 3, name: "watermelon", image: "https://i.pinimg.com/564x..
[React] 노마드 수업 1 ★수업2-1 JSX javascript와 HTML 사이의 언어를 jsx라고 부름 component는 HTML을 반환하는 함수 react는 component를 사용해서 HTML처럼 작성하려는 경우가 필요 javascript와 HTML 사이의 이러한 조합을 jsx 라고 부름 prop-types 내가 전달받은props가 내가 원하는 props인지를 확인해주는 것 React에서 타입 체크를 위해서 사용되는 라이브러리 npm i prop-types // prop-types 설치 [설치 확인] package.json 파일에서 dependencies": 부분 아래 prop-types가 있음 [파일 정리] App.js 파일에 import PropTypes from "prop-types"; 추가 isRequired : ..

티스토리툴바