✔ 함수의 파라미터(매개변수) 타입 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; } ✔ 함수의 옵셔널 파라미터 (선택적 파라미터) 타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주합니다. 즉, 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다는 의미입니다. 하지만 필요에 따라서 선택적으로..
타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다. ✔ 타입 표기(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..
타입스크립트란 ❓ 자바스크립트의 확장된 언어라고 볼 수 있으며, 자바스크립트에 타입을 부여한 언어 입니다. 브라우저에서는 타입스크립트를 실행 할 수 없기 때문에 컴파일(complile) 과정을 거쳐야 합니다. TypeScript vs JavaScript ❓ TypeScript JavaScript 동적타입 언어 정적타입 언어 인터프리터 언어 컴파일 언어 자바스크립트에 의존적임 독립적으로 사용 가능 더 나은 구조와 간결함, 일관성, 재사용성 좀 더 유연함 (타입에 제한을 받지 않으므로) .ts 확장자 .js 확장자 복잡한 프로젝트에 적합함 작고 간단한 프로젝트에 적합함 타입스크립트 쓰는 이유 ❓ ✔ 에러의 사전 방지 // math.js function sum(a, b) { return a + b; } // ..
객체의 값을 새로운 객체에 펼쳐주는 역할, 배열에서도 사용 가능 중복된 속성을 작성해야 하는 상황 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..
배열을 필터링 하기 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(시작지점, 마지막지점) 인자를 전..
CSS 전처리기로서 CSS의 한계나 단점을 보완하기 위해 만들어졌습니다. SASS 에 SCSS가 포함되어 있는데, SCSS는 SASS 3번째 버전에서 추가되었고, SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌습니다. 주요 기능 변수 설정 $표시를 사용하여 변수명을 지정할 수 있습니다. $hongsi-1: 1; $HONGSI_2 : 2; $hongsi: 'hongsi'; 반복적으로 사용되는 폰트나 색상 등을 변수로 지정해 간단하게 제어할 수 있습니다. 규칙 문자를 넣을 때 '' 사용 유의사항 : 알파벳, -, _, 123 사용 가능 대소문자 구분 숫자로 변수명 시작 X Nesting(중첩) SASS에서는 Nesting 기능을 사용해 상위 선택자의 반복을 피할 수 있습니다. 또한..
프로젝트 진행 중 경로 문제 발견 배경에 이미지를 넣어야 하는데 뜨지 않아서 오타인가, 아니면 크기 지정인가 문제를 찾다가 경로 문제라는 사실을 알게 되었습니다. 경로 설정 방법 절대경로 지정되어 있어 변경 할 수 없는 경로 페이지 안에 다른 서버에 있는 이미지나 페이지 등의 파일을 연결 할 때 사용 합니다. 바로가기 상대경로 상대적으로 변경 될 수 있는 경로 1. 현재 파일을 기준으로 동일 위치로 연결되는 경우 index.html 파일이 저장된 위치를 기준으로 background.png 파일은 동일한 위치에 있기 때문에 파일명과 확장자를 함께 쓰면 됩니다. 2. 현재 파일을 기준으로 하위 폴더로 연결되는 경우 index.html 파일이 저장된 위치를 기준으로 logo.png 파일을 찾아갈 수 있도록 경..
CSS 전처리기를 사용하면 개발적인 측면에서 유지보수성과 동일한 스타일을 적용해야하는 대상을 보다 쉽게 관리할 수 있습니다. CSS 전처리기의 장점 재사용성 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체 시간적 비용 감소 임의 함수 및 Built-in(내장) 함수로 인해 개발 시간적 비용 절약 유지 관리 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리가 용이 CSS 전처리기의 단점 브라우저는 CSS만 동작하기 때문에 전처리기는 직접 동작시킬 수가 없습니다. 따라서 CSS로 컴파일 후 동작시켜야 합니다. CSS 전처리기 종류 Sass Less Stylus 참고 MDN, css_preprocessor https://fathory.tistory.com/30 https://kdydesig..
