twingkle

💡 문제 React DatePicker를 사용하면서 가장 애먹었던 부분은 이 부분이다. 요청 데이터는 yyyy-MM-dd hh:mm:ss 이 형식으로 보내야하는데 selected의 형식은 Date가 들어가야해서 onChange값을 string으로 보내면 오류가 나는것이었다. Uncaught RangeError: Invalid time value at Module.format 💪🏻 해결 상단에 useState를 통해 selected에 들어갈 값을 onChange에서 할당해주고 onChange의 값은 선언한 day로 넣어줬다. const [startDate, setStartDate] = useState(new Date()); { const day = date.toISOString().replace("T", ..

정의 함수를 파라미터처럼 사용하는 것. 기본 문법 function logText(text: T): T { console.log(text); return text; } logText('hi'); ❗️유니온 방식을 이용한 제네릭 타입의 문제점 function logText(text: string | number) { console.log(text); return text; } const a = logText('hi'); a.split(''); logText(10); 코드를 위와 같이 작성했을때 split은 에러가 난다. 에러코드를 살펴보자면 아래와 같이 string에서는 가능하지만 number 형식에서는 사용이 불가능하다는 문구가 나타나게된다. 제네릭의 타입추론에서의 이점 확실하게 어떤 타입인지 선언해주기때..

❓이넘 특정값들의 집합을 의미하는 자료형. 숫자형 이넘 초기값을 주지않으면 0부터 시작한다. enum Shoes { Nike, Adidas } var myShoes = Shoes.Nike; console.log(myShoes) //0 초기값을 주게 된다면 초기값부터 차례대로 1씩 증가하게 된다. enum Shoes { Nike = 10, Adidas } var myShoes = Shoes.Nike; console.log(myShoes) //0 문자형 이넘 문자형은 숫자형과 다르게 auto-incrementing이 없으므로 모든 값에 특정문자 또는 다른 이넘 값으로 초기화 시켜주어야 한다. enum Shoes { Nike = '나이키', Adidas= '아디다스' } var myShoes = Shoes.N..

Union type function logMessage(value: string | number) { console.log(value); } logMessage('hello'); logMessage(100); 타입가드 조건문에서 객체의 타입을 좁혀나갈 수 있다. 참고링크 var jong: string | number | boolean; function logMessage(value: string | number) { if(typeof value === 'number') { value.toLocaleString(); } if(typeof value === 'string'){ value.toString(); } throw new TypeError('value must be string of nubmer') ..

* 인터페이스는 타입을 정의하는 것. * 타입을 정의해 놓은걸 똑같이 반복해서 쓰고 싶지않으면 extends를 써서 확장으로 쓰면 된다. 인터페이스 interface User { age: number; name: string; } //변수에 인터페이스 활용 var seho: User = { age: 33, name: 'seho' } //함수에 인터페이스 활용 function getUser(user: User){ console.log(user); } const capt = { name: 'captine', age: 100 } getUser(capt); //함수의 스펙(구조)에 인터페이스를 활용 interface SumFunction{ (a: number, b: number): number; } var su..

기본타입 //TS 문자열 선언 let str: string = 'hello'; //TS 숫자 let num: number = 10; //TS 배열 let arr: Array = [1, 2, 3]; let items: number[] = [1, 2, 3]; //11번째줄과 같은 선언 let heroes: Array = ['Capt', 'Thor', 'Hulk']; //TS 튜플 let addr: [string, number] = ['gangnam', 13069]; // TS 객체 let obj: object = {}; let person: object = { name: 'capt', age: 100 }; let people: {name: string, age: number} = { name: 'thor',..

🔥처음 시작할 때, 인스톨 먼저 시켜주고 시작한다. npm i typescript -g ❓만약 ts로 작성한 파일을 js파일로 만들고 싶다면 tsc 다음 파일명을 써주면된다! ※ 플레이그라운드에서 tsc를 돌렸을 때의 결과물을 볼 수 있다. 타입스크립트 플레이그라운드 tsc index.ts 🚧 설정 파일 만들기( tsconfig.json ) { "compilerOptions": { "allowJs": true, "checkJs": true, //js에서 @ts-check 를 썼던 것과 같은 역할 "noImplicitAny": true } } 우선 설정은 간단하게 세개만 했는데 기타 설정들을 참고하려면 공식문서를 참고해서 추가하면 된다.

❓프로그래머스 대문자와 소문자 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제설명 문자열 my_string 이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return하도록 solution 함수를 완성해주세요. 입출력 예 my_string result "cccCCC" "CCCccc" "abCdEfghIJ" "ABcDeFGHij" 💪🏻 풀이 방법 function solution(my_string) { var answer = ''; let ascii = 0; for(let i = 0; i < my_string.length; ..

💡문제 메인페이지가 랜더링이 늦으면 유저 입장에서 좋지않기에 Lighthouse를 이용해 성능최적화를 시도해보기로 했다. 💪🏻해결 첫째, png 파일은 모두 webp로 변환해서 다시 적용했다. WebP 및 AVIF와 같은 이미지 형식은 PNG나 JPEG보다 압축률이 높기 때문에 다운로드가 빠르고 데이터 소비량도 적습니다. 둘째, link에 rel="preload" 를 사용한다. 참고링크 최대 콘텐츠풀 페인트 최적화 Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)는 페이지의 메인 콘텐츠가 화면에 모두 렌더링되었을 때를 결정하는 데 사용됩니다. 느린 서버 응답 시간, 리소스 로드 시간, 클라이언트 측 렌더 web.dev LCP 요소에서 사용된 이미지를 미리 로드하여 LCP 시간을..

❓문제 Warning: validateDOMNesting(...): cannot appear as a descendant of . 🚧 에러메세지 Warning: validateDOMNesting(...): cannot appear as a descendant of . 아래는 현재 내가 쓰고 있는 코드인데, 처음에는 상세보기로 들어가는 링크를 제목인 BrandName 에 걸었다가 다른 사이트를 둘러보니 전체를 눌러서 상세보기로 들어가는 곳이 많아 전체로 다시 링크를 거는 작업을 거쳤었다. //첫번째 상세보기 > //두번째 {[order.orderProducts[0].brandName]}{order.orderProducts[0].title} 외 {order.orderProducts?.length}개 색상: ..