Front-end12 [TypeScript] 인터페이스와 타입 앨리어스의 개념 | 인터페이스(interface)와 타입 앨리어스(type alias)의 차이 1. 인터페이스 (interface) 인터페이스(Interface)는 TypeScript에서 사용되는 중요한 개념으로, 객체의 구조를 정의하기 위한 것입니다. 주로 객체의 속성들의 타입과 메서드의 형태를 정의하는 데에 사용됩니다. 인터페이스를 사용함으로써 코드의 가독성을 높이고 유지보수를 쉽게 할 수 있습니다. - 주로 객체의 구조를 정의할 때 사용됩니다. - 객체의 속성 이름과 그에 상응하는 타입을 지정합니다. - 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사합니다. - 인터페이스는 확장(extends)이 가능합니다. - 구조적인 타입 검사(structural typing)를 수행하며 변수, 함수, 클래스에 사용할 수 있습니다. - 클래스에서 구현(implement)될 수 .. 2024. 2. 4. 오픈 api 가져와서 사용하는 방법 | 영화진흥원 영화 api 가져와서 영화 정보 조회하기 영화진흥위원회 오픈API 제공서비스 영화관입장권통합전산망이 제공하는 오픈API서비스 모음입니다. 사용 가능한 서비스를 확인하고 서비스별 인터페이스 정보를 조회합니다. www.kobis.or.kr 영화진흥원에서 제공하는 일별 박스오피스 api를 사용해보았다. 들어가보면 다음과같이 응답 예시를 볼 수 있다. 이걸 복사해준다 ! 요청 인터페이스 목록을 볼 수 있다. 필수라고 적힌 부분은 꼭 들어가야하는 변수이다! 회원가입을 하면 본인 고유 key 값을 받을 수 있는데, key="고유키값" 을 넣어주면 된다. 구현하고자하는 페이지: 👉 사용자가 날짜를 입력하면, 해당 날짜에서 1위부터 10위까지의 랭크된 영화들을 차례대로 보여주고, 관객수나 개봉일과 같은 추가적인 데이터도 함께 보여주기! 인터페이스 항목의 응답.. 2024. 1. 21. 시맨틱 요소 | div태그 대신 시맨틱 태그 사용 이유? | 시맨틱 태그 종류들 태그는 영역을 구분할 때 쓰는 태그 즉, 레이아웃을 관리할 때 사용하는 태그이다. 그런데, 태그를 쓰는 것보다 시맨틱 태그를 쓰는 것이 오늘날에 더 권장되는 코드 작성 방식이다. 는 아무 의미가 없다. 단지 영"역을 구분한다"의 기능만 하는 것이다. 화면을 구성하는 모든 레이아웃을 div 태그를 이용해 작성했다고 해보자. "화면에서 사이드바를 구현한 코드를 보고 싶어!" 라고 한다면, 많은 div 태그들을 뒤져서 찾아야할것이다. 가독성이 매우 떨어질 것이다. 하지만 시맨틱 태그로 구성한 문서에서는 태그를 찾으면 되는 것이다. 시맨틱 태그를 사용한다면 마크업을 강조하거나 의미를 부여하여 개발자들이 우리 코드를 보기만 해도 무슨 일이 일어나는지 바로 알 수 있고, 스크린 리더 사용자와 SEO 접근성 향상, .. 2024. 1. 18. js의 변수 선언 방법(var, let, const)와 var, let의 차이 | 호이스팅|TDZ js에서 변수를 선언하는 방법에는 세가지가 있다. ( const, var, let) const는 변수값을 고정시키고 싶을 때 사용한다.(값을 수정하려고 하면 error가 난다. ) C를 배웠다면 알다시피 C언어에도 const가 있다. 물론 추가적으로 #define이나 enum도 있겠다. C언어에서의 const와 js에서의 const는 의미 면에서는 비슷한 듯하다. 대개 읽기만 하는 값(read-only)이나 절대 변하면 안되는 값을 const로 선언하는 편. 참고로 const는 초기값 없이는 선언이 불가하다. var: 선언 시 메모리에 담아둔다. (함수가 실행되기 전에 메모리에 담아뒀던 변수들을 스코프 범위(scope:변수가 적용되는 범위)의 최상단으로 끌어올린다.) 이런걸 호이스팅(hoisting)이라.. 2024. 1. 3. [CSS] 그림자 효과 text-shadow의 사용 방법 | 여러개의 그림자 적용 | 안쪽으로 그림자 주기 - inset 👾 사용방법 text-shadow: 가로 세로 번짐정도 그림자색; 순서대로 (1)가로 그림자의 위치, (2)세로 그림자의 위치, (3)번짐 정도, (4)그림자 색상 이며, 가로와 세로 그림자의 위치는 필수로 지정해야 합니다. 여기서, 가로: 양수(+)면 오른쪽으로 그림자, 음수(-)면 왼쪽으로 그림자 세로: 양수(+)면 아래쪽으로 그림자, 음수(-)면 위쪽으로 그림자 가 생기게 됩니다. 에서 test-shadow의 세로 요소를 결정하는 픽셀을 0으로 잡아주니 위아래(세로) 그림자는 적용되지 않는 것도 확인할 수 있습니다. 또한 텍스트 내부로 그림자를 표시하고싶다면 다음과 같이 inset 키워드를 넣어주면 됩니다. /* 텍스트의 내부로 그림자를 표시하도록 설정 */ text-shadow: inset 2px.. 2023. 12. 20. [CSS] position의 속성값 relative, absolute position 속성은 요소가 배치되는 방식을 결정한다. 웹 문서 안의 요소를 자유롭게 배치할 수 있다. 아래는 방식을 결정하는 속성값의 종류와 설명이다. 종류 설명 static 문서의 흐름에 맞춰 배치. default값이다. relative 문서의 흐름에 맞게 자연스럽게 배치하나, static과 달리 위치값을 지정 할 수 있음. absolute 위치를 지정해 배치 fixed 특정 위치에 고정 여기서 top, bottom, left, right로 최종 위치를 결정하게 된다. top: 위쪽으로 얼마나 떨어져있는지 bottom:아래쪽으로 얼마나 떨어져있는지 left: 왼쪽으로 얼마나 떨어져있는지 right: 오른쪽으로 얼마나 떨어져있는지 여기서는 relative와 absolute에 대해 조금 더 정리하고자 .. 2023. 12. 20. 이전 1 2 다음
'Front-end' 카테고리의 글 목록 (2 Page)
