Home
Taewok
Cancel

[JavaScript] className 읽기/추가/변경/삭제

사용 상황 Html 요소에 css animation을 주고 싶을떄 className을 추가해서 animation을 동작시킨다. classList 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다. add 이미 있는 class명은 자동으로 중복제외 된다. ...

[TypeScript] 타입스크립트 Html 조작시 타입지정

문제 발생 className이 input 요소들에 color를 바꾸려는데 에러 발생 const input = document.querySelectorAll(".input"); input.style.color = "red"; Error: style부분에서 발생 - Property ‘style’ does not exist on type ...

[TypeScript] 타입스크립트 type 선언

타입 선언 number 숫자(정수, 실수, infinity, NaN) const data: number = 22; string 문자열 const data: string = "나나"; object 객체형(참조형) const data: object = { name:"나나", age:22 }; ...

[TypeScript] 타입스크립트란?

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

[Html] localStorage와 sessionStorage란?

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

[TypeScript] 타입스크립트 react-router-dom 사용하기

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

[TypeScript] .ts,.tsx파일에서 styled-components 사용하기

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

[JavaScript] 향상된 for문 알아보기

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

[JavaScript] ES6 const와 let 이해하기

const constant(상수)를 뜻하며 ‘항상 같은 수’를 말한다. 값을 재할당 할 수 없다. 재선언은 할 수 없다. const name = "독고진"; name = "구애정"; console.log(name); //실행결과 TypeError: Assignment to constant variable. const 변수는...

[React] react-github-calendar 사용하기

사용하게된 이유 백엔드에서 user에 github 정보를 받아오는데 잔디까지 가져오는데 어려움이 있어 직접 알아보니 프론트에서 react-github-calendar라는 라이브러리를 사용하면 간편하게 잔디를 가져올 수 있다고 한다. 설치 npm install react-github-calendar //npm 사용시 yarn add react-...