스카이코의 세상

URL 인코딩 인코딩이란 데이터를 다른 형식으로 표현하는 것을 말합니다. URL은 아스키코드의 문자들 중 출력이 가능한 문자열만 포함합니다. URL에서 그 외의 문자(한글, 일본어 등)를 사용하고 싶다면 %와 16진수 문자를 조합하여 인코딩해야 합니다. 이를 URL 인코딩이라고 하고 인코딩 된 URL을 escape 처리된 URL이라고 부릅니다. 예를 들어 브라우저 주소창에 https://sky-kr.tistory.com/?data=테스트로 접속한 후 URL을 복사하게 되면 https://sky-kr.tistory.com/?data=%ED%85%8C%EC%8A%A4%ED%8A%B8라는 값(escape 처리된 URL)으로 변환되어 복사가 되게 됩니다. 여기서 %ED%85%8C%EC%8A%A4%ED%8A%B8..

타입을 선언하는 데에는 두가지 방법이 있습니다. type Tstate = { name: string; captial: string; } interface IState { name: string; capital: string; } 대부분의 경우에는 타입을 사용해도 되고 인터페이스를 사용해도 됩니다. 하지만 타입과 인터페이스에 존재하는 차이를 분명하게 알고, 같은 상황에서는 동일한 방법으로 명명된 타입을 정의해 일관성을 유지해야 합니다. 비슷한 점 명명된 타입은 인터페이스, 타입 둘다 차이가 없다. 둘 다 모두 추가 속성과 함께 할당한다면 동일한 오류가 발생합니다. const test: TState = { name: 'name', capital: 'capital', population: 500_000 // ..

자바스크립트는 html내의 요소들을 DOM객체를 이용하여 조작할 수 있습니다. 하지만 위에서 아래로 차례로 읽는 방식과 실행 전 에러 체크를 하지 않는 인터프리터 언어적 특성으로 인하여 자바스크립트 작성 위치에 따라서 에러를 발생하기도 합니다. 예시로 다음과 같은 코드를 들겠습니다. 내용 위와 같은 방식으로 코드를 작성하게 되면 const content = document.querySelector('.content') 구문에서 아직 class가 content인 태그가 만들어지기도 전에 읽게 되면서 문제가 발생하게 됩니다. 이와 같은 문제를 해결하기 위해서 window.onload를 사용할 수 있습니다. onload onload는 DOM의 standard 이벤트로 html의 로딩 완료 후 DOM트리를 만들..

모달을 구현하는 중 배경색은 투명하게 하고 안의 내용은 투명하지 않게 하고 싶었다. 내가 구현한 모달의 구조는 다음과 같이 container 태그를 background 태그로 감싸고 있는 구조였다. 모달 이때 투명도를 지정하는 속성인 opacity를 사용하였을 때 배경색이 투명해졌지만 감싸고 있는 container도 같이 투명해지는 문제가 발생하였다. 모달 opacity의 경우 하위 엘리먼트를 모두 포함하여 투명도가 적용되므로 위와 같은 현상이 일어난다. 이런 경우 배경색 자체에 투명색을 주면 되는데 background에 rgba를 사용하면 된다. rgba의 경우 네개의 인자를 받는데 앞의 세개는 rgb값을 받고 마지막 인자의 경우 alpha값을 입력하는데 0이상 1이하의 값을 입력하여 투명도를 지정할 ..

css를 다룰 때 사용할 수 있는 다양한 단위들이 있다. 대표적으로 px, em, rem, %, vh, vw, vmin, vmax 등이 있으며 여기서 px는 절대 단위이고 그 외 나머지 em, rem, %, vh, vw, vmin, vmax는 특정 값에 상대적인 상대 단위이다. 상대 단위를 사용할 때에는 기준이 되는 요소가 무엇인지 잘 확인하는 것이 중요하다. 1. px 사실 픽셀은 DPI 및 해상도에 따라 상대적이지만 기기 내에서 다른 요소에 따라 변경되지 않으므로 절대 단위로 여겨진다. px를 사용하면 반응형 사이트에 문제가 발생할 수 있지만 크기를 조정하면 안되는 경우 사용하는 것이 좋다. 2. % %는 부모 엘리먼트를 기준으로 어느 정도 크기를 나타낼지 백분율을 의미한다. 예를 들어 코드가 위와 ..

SVG란? Scalable Vector Graphics의 약자로 확장 가능한 벡터 그래픽을 말한다. XML 문법을 기본으로 하며 로고, 아이콘, 그래프 등에 널리 사용하는 이미지이다. 특징으로는 크기를 줄이거나 늘려도 화질에 영향을 미치지 않으며 색상 또한 자유롭게 지정할 수 있다. img svg를 삽입하기 위하여 img 태그의 src로 참조하는 방법. 해당 svg가 width나 height를 가지고 있지 않다면 height, width 값을 넣어주어야 한다. 장점 빠르고 친숙한 Img 태그를 사용할 수 있다. 태그 안에 태그를 넣는 방식을 통하여 쉽게 하이퍼링크를 걸 수 있다. 브라우저 캐쉬를 사용하여 빠르게 로드할 수 있다. 단점 해당 이미지를 JS를 통해 컨트롤할 수 없다. css로 svg를 컨트롤..

시맨틱 버저닝 버전은 .(dot)을 기준으로 3영역 major, minor, patch로 구분된다. 시맨틱 버저닝에 따라 버전을 작성하고 규칙은 다음과 같다. 1. 최초 출시 - 새로운 제품 1.0.0으로 시작한다. 2. 이전 버전과 호환되는 버그 수정 - 패치 3번째 숫자를 증가시킨다. 3. 이전 버전과 호환되는 새로운 기능 - 마이너 가운데 숫자를 증가시키고 마지막 숫자를 0으로 만든다. 4. 이전 버전과 호환되지 않는 변경 - 메이저 첫번째 숫자를 1 증가시키고 가운데 숫자와 마지막 숫자를 0으로 만든다. 틸드(~)와 캐럿(^) 패키지의 버전에는 ^와 ~이 적혀있다. 틸드와 캐럿의 사용에는 시맨틱 버저닝 규칙이 사용된다. 1. 틸드 패치 버전 범위 내에서 업데이트를 허용한다는 의미. ex) ~0.0..