몽땅뚝딱 개발자

◽ Transition - transition-property: all; - transition-duration: 1s; - transition-timing-function: ease; - transition-delay: 0s; transition: 1s 2s; // 1초동안 발생, 2초간 딜레이 transition-timing-function의 종류 - linear: 가속도 없이 일정한 속도로 진행된다. - cubic-bezier(0.34, 0.67, 0.59, 1.62); 출처 인터랙티브 웹 개발 제대로 시작하기 - 인프런 | 강의 크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다., - 강의 소개 | 인프런 www.inflearn.com

◽ Transform을 사용하는 이유 - 하드웨어 가속을 사용(GPU를 사용) 속력과 성능이 굉장히 좋다. CSS3를 적극적으로 사용할 수 있다면 transform을 사용하는 것이 좋다. position: absolute와 top, left를 사용하는 것보다 transform을 사용하는 것이 부드럽게 동작하는 등 유려하며 성능면에서도 훨씬 좋다. ◽ transform 사용하기 .box { width: 100px; height: 100px; border: 2px solid black; background: red; } 적용할 수 있는 값: scale, rotate, skew, translate scale(1): 100% scale(2): 200% .box:hover { transform: scale(2);..

잊지말고 써먹자~~!! 퍼블리싱은 알면 알수록 재미있는 세계다. 1. border의 max 값을 정해보자. border: max(2px, 0.1em) solid gray; 2. cursor 속성에는 not-allowed도 있다. pointer만 주구장창 사용해왔음.. cursor: not-allowed; 3. 웹 접근성(accessibility) 측면에서 키보드 사용자를 배려하자. 키보드 포커스가 해당 위치로 오면 포커스 링(ring)이 나타날 수 있도록 한다. [type="checkbox"]:focus-visible { outline-offset: 2px; outline: 2px solid tomato; } 4. 꾸밈용으로 태그를 넣는다면 alt는 공백으로 설정한다. 5. cursor: pointer;..

/** * 문자열 총 byte 구하기 * @param {string} str 문자열 * @returns {number} 바이트 */ export const getByteLength = (str) => { console.log('[str] result >>> ', str) if (str == null || str.length === 0) { return 0 } let size = 0 for (let i = 0; i < str.length; i++) { size += charByteSize(str.charAt(i)) } return size } /** * 한글자 당 byte 구하기 * @param {string} charValue 문자열 * @returns {number} 바이트 */ export const..

console.log("result >>> ", foo()) 이렇게 매번 결과에 대한 콘솔찍기가 귀찮아서 만들어 본 단축어. 1. ⌘ + , 를 사용하여 Preferences로 이동한다. 2. Editor > General > Postfix Completion에서 +를 누른다. 나는 JavaScript + TypeScript로 설정한 뒤 key를 'write'로 지정하고 아래처럼 추가해주었다. $EXPR$ : 이 곳에 표현할 함수나 변수명이 작성된다. $END$ : 마지막으로 커서가 갈 위치이다. 3. 아래와 같이 사용한다. 출처 JavaScript postfix templates | WebStorm www.jetbrains.com

◽️ console.log를 줄이는 방법 나는 주로 인텔리제이에서 재공하는 Postfix Completion을 사용한다. (.log를 입력) const { log } = console; log("Hello world!"); // Expected output: Hello world! // SAME AS // console.log("Hello world!"); // Expected output: Hello world! ✍🏻 다른 Postfix Completion가 궁금하거나 적용하고 싶다면? >> ", foo()) 이렇게 매번 결과에 대한 콘솔찍기가 귀찮아서 만들어 본 단축어. 1. ⌘ + , 를 사용하여 Preferences로 이동한다. 2. Editor > General > Postfix Completi..

React + Typescript 환경에서 Swiper 적용하기! 오늘도 안됐ㄷㅏ 이젠 개의치않아 맨날 안되니깐 말이야 ! 내가 구현할 환경에서는 React, TypeScript, SCSS를 사용하고 있다. 1. Swiper를 설치해준다. 가장 최신버전으로 했다. $ npm i swiper 2. 이렇게 선언해준다. 이렇게 선언하면 이미지 슬라이드까지는 구현이 된다. { displayImageList.map((url, index) => { return ( ) }) } ✍🏻 여기서 내가 원하는 바를 정리해보자면 1) 현재 슬라이드의 인덱스를 받아와서 화면에 노출해야한다. 2) 2개의 탭을 왔다갔다 하는 것이기 때문에 다른 탭을 누르면 activeIndex(현재 활성화 된 슬라이드의 인덱스)도 함께 초기화되어..

1) 다운로드는 되는데 제대로 된 파일로 만들어지지않거나 2) 파일 다운로드를 해결했더니 지정한 파일명대로 받지 못하는 현상때문에 정리해본다. Blob ◽️ blob이란? Binary Large Object의 약자로, 멀티미디어 객체들을 가리킨다. ◽️ Body 믹스인의 프로퍼티 - bodyUsed: body를 사용했냐 여부 - blob(): Blob 인스턴스를 반환 - json(): JSON.parse()의 결과를 반환 - text(): Text를 UTF-8로 인코딩하여 반환 프론트단에서 구현하기 아래와 같이 구현한다. const excelDownload = () => { // 1. fetch 실행이 끝나면 FETCH API는 내부적으로 Body Object를 상속받아 Response 인스턴스를 생성 ..

다음 함수의 타입을 정해보자. function filter(array, f) { let result = [] for(let i=0; i boolean): number[] (array: string[], f: (item: string) => boolean): string[] (object: string[], f: (item: Object) => boolean): object[] // error! } 이 때 제네릭(Generic)을 사용하여 이렇게 표현해보자! 타입스크립트는 전달된 인수의 타입을 이용해 제네릭을 어떤 타입으로 한정할 지 추론한다. number를 할당하면 number로 한정, string으로 할당하면 string으로 타입을 한정짓는다. // 제네릭을 사용하여 이렇게 줄여보자! // 이 타입이 ..

함수를 괄호 ()로 호출하는 방법도 있지만 자바스크립트에서는 두 가지 방법(call, apply)을 추가로 제공한다. call, apply는 this를 첫번째 인자로 넘겨 한정할 수 있다. ◽️ call 함수 안에서 값을 this로 한정(여기서는 null)하며 두번째 인수를 펼쳐 전달하지 않고 순서대로 전달한다.const user = { age: 12 } function test() { console.log(this.age) } test.call(age) // 12 ◽️ apply 함수 안에서 값을 this로 한정(여기서는 null)하며 두번째 인수를 펼쳐 함수에 매개변수로 전달한다.function add(a: number, b: number): number { return a+b } add(10, 20..