TailWindCSS) Set-up
2022. 7. 25. 14:42
Frontend/HTML, CSS, DOM, jQuery
설치 npm install -D tailwindcss postcss autoprefixer npx tailwind init -p ** 모든 다이렉토리 * 모든 파일 globals.css @tailwind base; @tailwind components; @tailwind utilities; npm install -D @tailwindcss/forms tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, darkMode:"med..
4. TypeScript(타입스크립트) Interface
2022. 6. 18. 23:51
Frontend/HTML, CSS, DOM, jQuery
각각 선언해도 이름이 같은 인터페이스가 축척해서 쌓여서 적용됨 타입과 다르게 인터페이스는 축척 가능 추상화 코드를 줄일 수 있다 추상화 클래스와 다르게 interface 써서 수정(아래) interface User{ firstName:string, lastName:string, sayHi(name:string):string fullName():string } class Player implements User{ constructor( public firstName:string, public lastName:string ){ } fullName(){ return `${this.firstName} ${this.lastName}` } sayHi(name:string){ return `Hello ${name}...
3. TypeScript(타입스크립트) Class
2022. 6. 13. 00:15
Frontend/HTML, CSS, DOM, jQuery
class 기본 방식 javascript와 다르게 constructor 인자 안에 추가하면, this. 이렇게 안해줘도 자동으로 생성된다 추상화 상속 추상화는 직접 클래스를 선언하지 않고, 상속만으로 사용할 수 있도록 하는 것이다 (abstract, extends) 메소드 메소드 앞에 private 추가하면 작동하지 않는다 자바스크립트는 private이 없는데, 타입스크립트에는 추가된 기능! 추상 메소드 추상메소드는 추상화에서 선언만 해준다. 기능은 상속 받은곳에서 {} 해줘서 구현 call signature 처럼 선언할때 안에 인자가 타입을 정해줘야하고, 리턴이 있을 경우, 리턴 타입도 정해줘야한다 string으로 리턴값 했는데, void로 리턴되어있어서 에러 protected 외부로부터 보호하려면 p..
2. TypeScript(타입스크립트) 함수의 type 사용, 다형성
2022. 6. 12. 23:07
Frontend/HTML, CSS, DOM, jQuery
함수의 type 기본적인 방법 call signature 미리 설정해놓은 타입으로 함수에 대입 overLoading 여러가지 call signature 가질때 b가 string이 될 수 있어서 에러 에러처리 실용 예시 - nextjs 라우터 두번째 다형성(Polymorphism) 아래처럼 call signature에 없는 concrete type은 이 늘어날때 에러가 생길 수 있다 any와는 다르다 아래처럼 call signature을 추가해줘야한다 generic을 추가하면 형식에 벗어날 수 있다 이름은 아무거나 설정하면 된다( ex) TypePlaceholder 두번째 인자를 제네릭 해줬다 파라미터가 없어서 에러 제네릭 사용