JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유   ❗️타입 시스템타입 시스템이란 언어에서 사용하는 여러가지 값들을 묶어서 어떤 타입으로 정할지 결정하고 또 언제 어떻게 타입을 검사할지 등 우리가 프로그래밍 언어를 사용할때 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계입니다. 타입 시스템은 크게 두가지로 나눌 수 있는데 하나는 코드 실행 전에 모든 변수의 타입을 고정적으로 결정하는 정적 타입 시스템이있습니다. 다른 하나는 코드 실행 전에는 타입을 결정하지 않고 코드 실행하면서 유동적으로 변수의 타입을 결정하는 동적 타입 시스템이 있습니다. 정적 타입 시스템을 사용하는 언어에는 C나 Java 같은 엄격한 문법을 가진 언어들이 있습니다. 동적 타입 시스템을 사용하는 언어에는..

자바스크립트 내장함수(메서드) 정리   내장 함수1) 타이머 함수setTimeout(function, millisecond) : 지정된 시간 후 함수를 한 번 실행(밀리초 단위)setInterval(function, millisecond) : 지정된 시간마다 함수를 반복 실행*위 두 함수는 타이머 id를 리턴값으로 가짐 -> id를 변수에 저장해둬야 중지 가능clearTimeout(id) : setTimeout 함수 중지clearInterval(id) : setInterval 함수 중지 2) 인코딩과 디코딩 함수escape(), unescape()영문 알파벳과 숫자, 일부 특수문자(@ * - _ + . /)를 제외하고 인코딩1바이트 문자는 %XX, 2바이트 문자는 %uXXXX 형태로 변환encodeURI..

HTML 특수문자 사용하기     페이지 넘길때 사용하는 , >>등 이러한 특수문자를 어떻게 사용하는지 서치 해보았다.나같은 경우 span 태그안에 ex) ‹ 이렇게 작성하면 해당 문자의 특수문자가 나온다 ❗️사이트 공유https://www.digitalmediaminute.com/reference/entity/index.php HTML EntitiesThis page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by the W3C. If you find it helpful we'd really a..

HTML input 태그 readonly 속성    정의 및 특징 태그의 readonly 속성은 요소의 입력 필드가 읽기 전용임을 명시합니다. 읽기 전용으로 설정된 입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트하거나 복사할 수는 있습니다.따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드의 내용을 수정할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 readonly 속성값을 삭제하여 사용자가 입력 필드를 수정할 수 있도록 조절할 수 있습니다. disabled 속성이 명시된 입력 필드의 값은 서버로 제출되지 않지만, readonly 속성이 명시된 입력 필드의 값은 서버로 제출됩니다. readonly 속성은 불리언(boolean) 속성입니다.불리언 ..

JavaScript 현재 페이지 새로고침하는 방법     ❗️location 객체에서 제공하는 reload() 메서드를 사용하는 것입니다.location은 전역 객체인 window의 프로퍼티이므로 아래 두 가지 방법으로 reload() 메서드를 호출할 수 있습니다.location.reload();window.location.reload(); 매개변수 존재하지 않습니다.반환 결과 존재하지 않습니다. 참고로 reload()대신 replace()를 사용하고 가로안에 위치를 지정해주면 해당위치로 이동한다.   🔥참고자료https://developer.mozilla.org/ko/docs/Web/API/Location/reload Location.reload() - Web API | MDNLocation.relo..

CSS 미디어 쿼리 문법    only | not의 위치에는 말 그대로 only 키워드 또는 not 키워드가 들어가게 되는데  only 키워드는 뒤의 조건 만 , not 키워드는 뒤의 조건을 제외한 조건을 뜻 합니다. 미디어 쿼리를 지원하지 않는 브라우저는 only 키워드가 쿼리 안의 내용이 무시되어 실행 되지 않습니다. only 키워드는 큰 의미는 없지만 미디어 쿼리를 지원하는 브라우저를 대상으로 할 경우 적어주는 것이 좋습니다. ❗️미디어 타입의 종류 ( 많지만 자주 쓰이는 것만 적어 봤습니다.)- all : 모든 미디어 타입- print : 인쇄 용도- screen : 컴퓨터 스크린 ❗️미디어 쿼리문의 속성과 속성 값 - width: 웹페이지의 가로 길이를 판단합니다.- height: 웹페이지의 세..

JavaScript - undefined, null의 차이   undefined 변수나 인수를 선언하고 초기값을 할당하지 않은 상태의 값이다. 즉, 자료형이 없는 상태를 말한다. null 변수를 선언하고 빈 값을 할당했다고 지정한 상태를 말한다. 자료형은 object가 나온다. typeof null; //'object'typeof undefined; //'undefined' typeof를 찍어봐도 이런 차이가 있지만 null의 경우  object가 나와서 타입을 체크하는 경우 아래와 같은 문제가 발생할 수 있다. typeof []; //'object'typeof null; //'object' 배열을 체크하고 싶을 때, 배열도 object로 구분된다. 배열인지 체크를 하고 있지만 null인 경우에도 체크가..

CSS의 Cascading    Cascading이란?최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다. 규칙선택자마다 명시도 점수가 있고 명시도를 고려한 우선 적용되는 순서는 아래와 같습니다. - !important (명시도와 무관하지만, 명시도에 직접 영향을 미침, 다른 선언보다 우선함) - 인라인 스타일 정의 (인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기때문에 가장 높은 명시도를 갖는다고 생각할 수 있음)- 명시도     - 아이디 선택자      - 클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자      - 태그 선택자, 가상(psuedo)..

CSR vs SSR vs SSG    Client Side Rendering (CSR)CSR은 웹 브라우저에서 자바스크립트로 HTML을 만들어 렌더링하는 방식을 말합니다.👍장점▪️ 페이지의 전환 속도가 SSR에 비해 빠르고, 깜빡임 없이 부드럽게 페이지가 바뀝니다.▪️ 자바스크립트에서 HTML을 만드는 연산작업이 서버에 집중되지 않기 때문에 서버에 부하가 적게 발생합니다.👎단점▪️ SPA(Single Page Application)의 경우 처음 페이지 접근시 서버로부터 전체 페이지에 대한 자바스크립트 번들파일, CSS 파일을 받아야 하므로 페이지를 만들고 유저가 사용하기 까지 시간이 SSR에 비해 오래 걸립니다.▪️ 검색엔진에서 자동화된 로봇인 ‘크롤러’로 웹 사이트를 읽는데, CSR은 자바스크립트를..