몽땅뚝딱 개발자

∕ 2023-03 - 나 자신에 대해 꾸준히 생각하고 적으면서 나를 알아가야 한다. 굉장히 많은 책과 강의에서 끊임없이 듣는 말이다. 내가 무엇을 좋아하는지에서 더 나아가서 내가 만나면 기운이 쭉 빠지는 사람과 상황에 대해 적는다던가 우울하다는 막연한 감정이 회사때문인지 사람때문인지 파악하는 등 더 구체적으로 작성하는 것이다. 이순신 장군도 난중일기에서 가장 많이 적은건 날씨라고 한다. - 이순재 선생님의 강연 ‘뭔가를 할 때 하는 이유가 분명해야해요. 남들이 봤을 때 터무니없는 이유라고 해도 스스로 납득이 가는 확실한 이유가 있어야 한다는 겁니다.’ ‘내가 딴따라라고 생각했으면 이렇게 오래 못했을거예요. 그런데 예술이라고 생각하니까 평생을 하고 있잖아요. 생각의 전환이 엄청나게 다른 결과를 가져온거죠...

∕ 2023-03

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(현재 활성화 된 슬라이드의 인덱스)도 함께 초기화되어..

https://jootc.com/p/201807161377/amp HTML b 태그와 strong 태그의 차이 알아보기 - JooTC 광고 차단 앱이 감지됨 광고 차단 앱은 사이트 콘텐츠가 망가지는 원인이 되며 사이트 운영에 치명적인 영향을 미칩니다. 앱을 잠시 비활성화하거나, 허용 목록에 추가하여 사이트에 기여해주 jootc.com

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 인스턴스를 생성 ..

서치하다보면 velog UI가 너무 예뻐서,, 갈아타야하는 것인가 많이 고민했다. 하지만 당장 갈아타기엔 시간이 걸릴 것 같고 티스토리만의 장점도 있기때문에 우선 급한불부터 껐다. - font-family를 Pretendard로 변경했다. - h1, h2, ...h4 태그는 쓸데없이 padding이 50px 정도로 들어가있었다. 그래서 항상 포스팅을 하다보면 내가 생각한 결과물대로 나오지 않아서 성취감이 -10정도 떨어졌다. 모든 padding을 0으로 수정해버렸다. - 기본 폰트크기를 16px → 18px로 조정했다. - 간격이 숨막혔던 코드 블록에 padding을 넓히고 border-radius를 주었다. 스크롤바 없는게 불편해서 숨기지않으려고했지만 실패.. 다음에 시도해보자. 이 정도만 해도 속이 ..

다음 함수의 타입을 정해보자. 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..