'📃 Front-End' 카테고리의 글 목록 (12 Page)

Interface ( 인터페이스 )

2022.10.22

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서 반복되는 타입들을 모아서 하나의 인터페이스로 정의를 하여 사용 합니다. ✔ 변수에 활용한 인터페이스 사용할 때 반드시 인터페이스에 있는 속성을 정의해야 합니다. // 인터페이스 선언 interface User { age: number; name: string; } let hyunho: User = { age: 26, name: '현호' } ✔ 함수에 활용한 인터페이스 인자에 인터페이스를 적용 -> 특정 형식을 준수하는 데이터만 받겠다고 정의 합니다. interface User { age: number; name: string; } function getUser(user: User){ console.log(user); } cons..

📃 Front-End/TypeScript

타입스크립트의 함수

2022.10.22

✔ 함수의 파라미터(매개변수) 타입 function sum(a: number, b: number){ return a + b; } sum(10,20); ✔ 함수의 반환 값 에 타입을 정의하는 방식 function add(): number{ return 10; } ✔ 함수의 기본적인 타입 선언 // JS function sum(a, b) { return a + b; } // TS function sum(a: number, b: number): number { return a + b; } ✔ 함수의 옵셔널 파라미터 (선택적 파라미터) 타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주합니다. 즉, 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다는 의미입니다. 하지만 필요에 따라서 선택적으로..

📃 Front-End/TypeScript

타입스크립트 기본 타입

2022.10.22

타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다. ✔ 타입 표기(Type Annotation) : 를 이용하여 자바스크립트 코드에 타입을 정의하는 방식 ✔ String // 기본 JS 선언 const str = 'hello'; // TS 문자열 선언 const str: string = 'hello'; ✔ Number let num: number = 10; ✔ Array let arr: Array = [1,2,3]; let heroes: Array = ['captin','thor','hulk'] // 숫자를 넣으면 에러 let items : number[] = [1,2,3]; ✔ Tuple 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식 입니다. let a..

📃 Front-End/TypeScript

TypeScript

2022.10.22

타입스크립트란 ❓ 자바스크립트의 확장된 언어라고 볼 수 있으며, 자바스크립트에 타입을 부여한 언어 입니다. 브라우저에서는 타입스크립트를 실행 할 수 없기 때문에 컴파일(complile) 과정을 거쳐야 합니다. TypeScript vs JavaScript ❓ TypeScript JavaScript 동적타입 언어 정적타입 언어 인터프리터 언어 컴파일 언어 자바스크립트에 의존적임 독립적으로 사용 가능 더 나은 구조와 간결함, 일관성, 재사용성 좀 더 유연함 (타입에 제한을 받지 않으므로) .ts 확장자 .js 확장자 복잡한 프로젝트에 적합함 작고 간단한 프로젝트에 적합함 타입스크립트 쓰는 이유 ❓ ✔ 에러의 사전 방지 // math.js function sum(a, b) { return a + b; } // ..

📃 Front-End/JavaScript

Spread 연산자

2022.10.22

객체의 값을 새로운 객체에 펼쳐주는 역할, 배열에서도 사용 가능 중복된 속성을 작성해야 하는 상황 const cookie = { base : "cookie", madeIn : "korea" }; const chocoCookie = { base : "cookie", madeIn : "korea", toping : "choco" }; const bananaCookie = { base : "cookie", madeIn : "korea", toping : "banana" }; Spread 연산자 사용 const cookie = { base : "cookie", madeIn : "korea" }; const chocoCookie = { ...cookie, toping : "choco" }; const banana..

📃 Front-End/JavaScript

배열 내장함수 - 2

2022.10.22

배열을 필터링 하기 filter 전달한 콜백 함수가 True를 반환하는 모든 요소를 새로운 배열로 반환 배열에서 어떠한 특정한 조건을 만족하는 요소들을 다시금 새로운 배열로 반환 받고 싶을 때 사용 합니다. const arr = [ { num: 1, color : "red" }, { num: 2, color : "black" }, { num: 3, color : "blue" }, { num: 4, color : "green" }, { num: 5, color : "blue" } ] // color = blue 만 가져오기 const.log(arr.filter((elm) => elm.color === "blue")); // 3번과 5번을 배열로 반환 배열 자르기 slice(시작지점, 마지막지점) 인자를 전..

📃 Front-End/CSS

Sass(SCSS)

2022.10.20

CSS 전처리기로서 CSS의 한계나 단점을 보완하기 위해 만들어졌습니다. SASS 에 SCSS가 포함되어 있는데, SCSS는 SASS 3번째 버전에서 추가되었고, SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌습니다. 주요 기능 변수 설정 $표시를 사용하여 변수명을 지정할 수 있습니다. $hongsi-1: 1; $HONGSI_2 : 2; $hongsi: 'hongsi'; 반복적으로 사용되는 폰트나 색상 등을 변수로 지정해 간단하게 제어할 수 있습니다. 규칙 문자를 넣을 때 '' 사용 유의사항 : 알파벳, -, _, 123 사용 가능 대소문자 구분 숫자로 변수명 시작 X Nesting(중첩) SASS에서는 Nesting 기능을 사용해 상위 선택자의 반복을 피할 수 있습니다. 또한..

📃 Front-End/CSS

background-img 경로

2022.10.20

프로젝트 진행 중 경로 문제 발견 배경에 이미지를 넣어야 하는데 뜨지 않아서 오타인가, 아니면 크기 지정인가 문제를 찾다가 경로 문제라는 사실을 알게 되었습니다. 경로 설정 방법 절대경로 지정되어 있어 변경 할 수 없는 경로 페이지 안에 다른 서버에 있는 이미지나 페이지 등의 파일을 연결 할 때 사용 합니다. 바로가기 상대경로 상대적으로 변경 될 수 있는 경로 1. 현재 파일을 기준으로 동일 위치로 연결되는 경우 index.html 파일이 저장된 위치를 기준으로 background.png 파일은 동일한 위치에 있기 때문에 파일명과 확장자를 함께 쓰면 됩니다. 2. 현재 파일을 기준으로 하위 폴더로 연결되는 경우 index.html 파일이 저장된 위치를 기준으로 logo.png 파일을 찾아갈 수 있도록 경..

티스토리툴바