3종류의 자바스크립트 1) 웹 브라우저에서 동작하는 표준 자바스크립트인 ES5(ECMAScript 5) 2) 2015년부터 매년 새로운 버전을 발표하는 ESNext(ES6 이후 버전을 뜻한다.) 3) ESNext에 type 기능을 추가한 TypeScript 타입 기능이 있으면 좋은 이유 오류의 원인을 좀 더 쉽게 찾기 위...

localStorage란 HTML5에서 브라우저에 추가된 저장소 이 저장소에 특정 데이터를 저장,수정,삭제가 가능하다. 브라우저 탭이나 창을 종료해도 값이 삭제되지 않는다(직접 지우거나 삭제 코드로). 저장하기 localStorage.key = value; localStorage["key"] = value; localStorage....

TypeScript로 프로젝트에서 react-router-dom을 사용하기 전 필수 터미널 명령어 react-router-dom이 이미 설치되어 있다면 npm install @types/react-router-dom react-router-dom 설치전 npm install react-router-dom @types/react-router...

해결 @types/styled-components 설치 npm i -D @types/styled-components 마치며 혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요. 지적이나 피드백은 언제나 환영입니다.

어쩌다 알았나? 프로그래머스 코딩테스트 문제를 푸는 중 다른 사람의 풀이에서 처음보는 형태의 for문 발견 for in문 array 위치에는 항상 배열이 위치 index 이름은 index가 아니어도 괜찮다. for in문은 배열에 길이만큼 실행되며 배열에 번호를 순차적으로 index변수에 담는다. const array = ["...

자바스크립트 ES6(ECMAScript 2015) 이전에는 변수를 선언할 때 var만 사용했지만, ES6부터는 const와 let이 도입되면서 변수 선언 방식이 완전히 바뀌었습니다. 아직도 var를 쓰고 계신가요? 혹은 const와 let을 언제 써야 할지 헷갈리시나요? 이번 글에서는 세 가지 키워드의 차이점과 올바른 사용법을 정리해 보겠습니다. 💡...

개발자 포트폴리오를 만들 때 빠질 수 없는 것이 바로 ‘깃허브 잔디(Contribution Graph)’입니다. 🌱 처음에는 백엔드 API를 통해 User 정보를 받아와야 하나 고민했지만, 찾아보니 프론트엔드에서 react-github-calendar 라이브러리만 사용하면 아주 간편하게 잔디를 심을 수 있다는 것을 알게 되었습니다. 이번 글에서는 ...

자바스크립트를 공부하다 보면 가장 헷갈리는 개념 중 하나가 바로 this입니다. MDN 공식 문서를 보면 “함수를 호출한 방법에 의해 결정된다”라고 적혀있지만, 글로만 봐서는 이해하기 어렵습니다. 😵 오늘은 코드를 직접 실행해보며 상황에 따라 변하는 this의 정체를 파헤쳐 보겠습니다. 1. 실습 준비 (기본 세팅) 테스트를 위해 HTML 파...

HTML/JS 개발을 하다 보면 VS Code에서 Alt+B 등으로 브라우저를 바로 열었을 때(로컬 실행), 스크립트가 동작하지 않고 아래와 같은 무시무시한 에러를 마주할 때가 있습니다. 😱 Access to script at ‘…’ from origin ‘null’ has been blocked by CORS policy 이 에러는 주로 자바...

팀 프로젝트를 진행하던 중 잘 동작하던 코드에 콘솔에 위와 같은 에러가 생겼다. 아무래도 백하고 통신 중 input 값에 null이나 undefined 값이 들어가서 그런 것 같다. 동작하는 데는 아무 문제가 없지만 에러 콘솔은 없을수록 좋으니... 해결방법 input에 value 부분에 null 혹은 undefined 값일 때의 대처를 작성해...