반응형 Frontend26 [FormKit] 특정 input 필드값을 무시하기 특정 FormKit input에 ignore prop을 true로 두면 상위 form에서 값을 걸러준다. input 형태만 필요하고 굳이 내보낼 데이터가 없는 경우에 유용할 것 같다. {{ values }} 이제 위의 {{ values }} 값을 찍어보자. :ignore="false"인 경우 (default) 당연히 input field의 value값이 찍힐 것이다. :ignore="true"인 경우 form 자체에서 잘 걸러주는 모습을 볼 수 있다. 여담으로, 해당 내용은 아래 공식문서에 있는데 이런 내용은 카테고리로 Button보다는 Form에 들어가는 것이 어울리지 않나 하는 개인적인 생각이다. https://formkit.com/inputs/button#ignored-input Button Inp.. 2024. 3. 18. 테이블을 HTML 코드로 변환해주는 사이트 일일이 손코딩할 필요 없이 온라인 에디터에서 만든 테이블을 HTML 코드로 변환해주는 사이트를 추천한다. https://divtable.com/converter/ HTML Table to Div Converter Transform traditional HTML Tables to Div Tables. Copy and convert any visual table document to Div tables with a simple click of a button divtable.com 테이블의 크기를 수정하면 width가 px단위로 나오기 때문에, px 단위를 원하지 않는다면 코드 에디터로 가져와서 개별적으로 크기 조절을 하는게 좋을 것 같다. Insert table에서 테이블을 생성한다. 그리고 Cell 메뉴.. 2022. 2. 2. 레이아웃 깨알 지식 1. Block Type과 Inline Type 1) Block Type - 세로로 배치됨 - 태그, 리스트 태그 2) Inline Type - 가로로 배치됨 - 태그 2. float 문제 해결 여기서 소개할 기법들은 내용이 박스를 벗어났을 때의 처리를 위한 역할과 float 속성을 지닌 자식 태그를 가진 부모 태그에게 높이를 부여하는 역할을 모두 한다. 부모 태그에게 별도로 height 속성을 지정해주지 않으면 높이가 사라지게 되는 문제를 해결하기 위한 목적이다. 1) 부모 선택자에 {overflow : hidden;} 부여 2) 부모 선택자:after에 {content:""; clear:both; display:block;} 부여 -> 추천! 3. @import 1) 의미 CSS파일에 또 다른 CSS.. 2021. 6. 15. [TypeScript] 클래스 1. 클래스 기본 클래스 내부 변수를 프로퍼티라고 하며, 클래스 내부 함수를 메소드라고 한다. 프로퍼티와 메소드는 constructor(생성자)를 이용하여 객체 생성시 초기화 할 수 있다. 예제 class Animal{ name:string; species:string; age:number; neuter:boolean; constructor( name:string, species:string, age:number, neuter:boolean ){ this.name=name; this.species=species; this.age=age; this.neuter=neuter; } } let a:Animal = new Animal("lamb", "dog", 16, false); let b:Animal = ne.. 2021. 4. 23. [TypeScript] 매개변수의 기본값 / 선택적 매개변수 / 제네릭 1. 매개변수의 기본값 매개변수에 기본값을 설정함으로써, 인자를 넣지 않아도 함수 호출이 가능하게 할 수 있다. 단, 기본값을 설정한 매개변수들은 맨 뒤쪽에 위치해야 한다. 예제 function user(age:number, str:string="noname"){ console.log(age); console.log(str); } user(24); user(26, "david"); 실행 결과 2. 선택적 매개변수 변수명 뒤에 '?'를 붙여서 생략해도 되는 매개변수임 나타낸다. 단, 생략 가능하다고 선언한 매개변수는 기본값을 지정할 수 없다. 예제 function user(age:number, str?:string, info?:string){ console.log(age); console.log(str);.. 2021. 4. 23. [TypeScript] Interface / 타입 별칭 / 화살표 함수 1. Interface 인터페이스는 객체의 구조 규칙을 의미한다. 타입스크립트에서는 인터페이스를 이용하여 깔끔한 객체지향 프로그래밍이 가능하다. 아래 예시에 interface 선언, 객체 생성, 객체 사용에 대해 다루었다. 예제 1 //User interface 선언 interface User { readonly id:string; //읽기만 가능한 프로퍼티, 한번 초기화되면 수정 불가 pw:string; age?:number; //선택적 프로퍼티(?) - 생략 가능한 프로퍼티 vip:boolean; } //고객의 등급을 vip로 올린다. function vipUpgrade(user:User):User{ user.vip=true; return user; } //User 객체 생성 let jooyeok:U.. 2021. 4. 21. [TypeScript] Static Typing / Type의 선언, 단언, 가드 1. Static Typing 선언된 type대로 할당, 반환되는 원칙 타입스크립트에서는 변수를 한 번 선언하게 되면, 알아서 타입을 추론해서 확정시킨다. 예를 들어 아래 코드를 보자. a를 number형으로 한 번 확정지었기 때문에 문자열로 값을 바꾸면 오류가 표시되는 모습을 볼 수 있다. 2. Type 선언 다음과 같이 변수명 뒤에 콜론(:)과 type을 붙여 선언할 수 있다. let _name:string = "Hello, TypeScript!"; let age:number = 24; let isHuman:boolean = true; 데이터 타입 string : 문자열 number : 숫자(부동 소수점, 2진법, 8진법, Infinity, NaN 가능) boolean : true/false any .. 2021. 4. 20. [TypeScript] TypeScript 소개 및 설치 1. TypeScript 소개 JavaScript를 기반으로 만들어졌고 변수에 데이터 type을 지정할 수 있는 언어 JavaScript를 기반으로 한 언어이기 때문에, JavaScript의 모든 기능과 함께 JavaScript에 없는 새로운 기능을 제공한다. TypeScript의 장점으로는 객체지향 프로그래밍이 가능하다는 점, 버그를 줄일 수 있다는 점, 유지 보수가 편리하다는 점이 있다. 또한, TypeScript를 이해하지 못하는 브라우저를 위해 JavaScript로 컴파일 해주는 기능도 제공한다. 2. TypeScript 설치 TypeScript는 npm명령으로 설치하기 때문에 Node.js를 설치해야 하는데, 설치는 간단하므로 자세한 설명은 생략한다. nodejs.org/ko/download/ .. 2021. 4. 20. var, let, const의 차이점 정리 이번 포스팅에서는 javascript의 변수 선언 방식인 var, let, const의 차이점에 대해 다룰 것이다. 1. 변수 or 상수? var : 변수 let : 변수 const : 상수 2. 재선언이 가능한가? var : O let : X const : X 3. 선언 이전에 참조할 수 있는가? (블록 내) var : O (단, undefined가 출력된다) let : X const : X ※ 선언 이전에 참조하는 것을 Hoisting이라고 한다. 4. IE 지원 버전 var : 모든 버전 지원 let : IE11~ const : IE11~ 차이점은 이정도로만 정리해보기로 하고, 자바스크립트에서는 var보단 let을 사용하는걸 권장하는 이유를 알아보자. 전역 변수는 가급적 사용을 자제하라는 말이 많은.. 2021. 3. 13. 이전 1 2 3 다음
