프론트엔드 첫걸음

문제상황텍스트 크기에 맞춰 캔버스 사이즈를 바꾸는 예제에서 measureText를 사용해 canvas.width를 바꿔준 후에 font에 관한 설정이 사라지는 것을 발견 FONT_SIZE = Math.floor(innerWidth * 0.15) ctx.font = FONT_SIZE + 'px Creepster, cursive' canvas.width = ctx.measureText(TEXT).width canvas.height = FONT_SIZE  해결https://stackoverflow.com/questions/65602038/cannot-set-canvas-width-and-change-font-at-the-same-time캔버스 크기를 변경하면 컨텍스트도 재설정되기 때문에 font siz..

https://www.jetbrains.com/help/webstorm/running-and-debugging-typescript.html#ws_ts_run_debug_server_side_ts_node Running and debugging TypeScript | WebStorm www.jetbrains.comjs파일은 마우스 우클릭을 클릭하면 Run~ 으로 시작하는 초록삼각형 버튼을 찾을수있는데,ts파일은 컴파일하기~ 밖에 없고, 컴파일 한다음에 js파일을 Run하는수밖에 없나 싶다.방법이 있다.Install ts-nodenpm install --save-dev ts-nodeRun/Debug configruation 수정  Node parameters--require ts-node/registerW..

이미지와 이미지에 대한 설명이 반복되는 페이지에서 이미지에 대한 설명은 padding이 필요하고 이미지는 padding없이 가득 채워야하는 경우가 있다. 이때 이미지에 대한 설명이 들어가는 요소에 개별적으로 패딩을 반복해서 줄 수도 있지만 이미지 컨테이너 요소의 margin을 조정하면 padding이 필요한 자식요소에 일관된 padding값을 적용할수있다. See the Pen Untitled by JEONG (@cona) on CodePen.

타입스크립트의 타입으로 void가 쓰이는 경우는 세가지 경우가 있다. 매개변수, 메서드 일때의 void와 함수일때의 void가 다른데, 매개변수, 메서드에서의 void는 Return 값을 사용하지 않겠다(상관하지않겠다) 라는 뜻이고, 함수에서의 void는 return값이 '없다'는 뜻이다. //함수를 선언하고 그밑에 바로 함수를 구현하면 위에 있는 함수의 선언에 대한 부분은 타입이 된다. function forEach(arr: number[], callback: (el: number) => undefined): void; function forEach() { } 구현하기 싫으면 declare 로 선언하면 되는데, 여기서 callback함수의 리턴값을 undefined로 해줬을때와 void로 해줬을때의 차..

interface A { a: string } // 객체리터럴은 추가속성검사라는 것이 있다. // 이렇게 추가 속성이 들어가면 추가속성검사를 함 const obj1: A = { a: 'hello', //원래 타입에 있는 속성 b: 'wolrd' // 원래 타입에 없는 속성 => 에러 }; // 이 객체를 따로 빼주고 타입을 정해주면 에러가 나지 않음 const objHelloWorld = { a: 'hello', b: 'world' } const obj2 : A = objHelloWorld; https://www.typescriptlang.org/play?ssl=21&ssc=1&pln=1&pc=1#code/JYOwLgpgTgZghgYwgAgILIN4Chm+XALmQGcwpQBzLAXyzoHp7lBcGsB..

const enum EDirection { Up =3, Down, Left, Right, } function enumWalk(dir: EDirection) {} enumWalk(EDirection.Down); const ODirection = { Up: 0, Down: 1, Left: 2, Right: 3, } as const //type ODirectionKey = "Up" | "Down" | "Left" | "Right" // 객체의 키만 뽑아서 타입으로 만듦 //type ODirectionKey = keyof typeof ODirection; // 객체 자체가 타입 -> enum처럼 사용가능 type Key = typeof ODirection[keyof typeof ODirection] ; func..

커밋 A 까지 있었는데 내가 커밋B를 하고 실수로 push까지 해버렸다!! 커밋 A로 돌리고 싶다면?!?!?!? 커밋 A의 해시로 git reset [커밋A의해시] 한 다음에 git push -f origin [branch-name] 협업하는 누군가가 push한걸 pull 받아버리면 꼬여버리니까 혼자 작업할때만 하기..!!

모든 나라의 문자를 포함하는 정규식은 유니코드 문자클래스 L 을 통해 만들수있다. const wordRegex = /^[\p{L}]+$/u; function testRegex(regex, word) { if(regex.test(word)) { return `${regex} test ${word} => pass` } return `${regex} test ${word} => fail` } console.log(testRegex(wordRegex, 'project')) // pas console.log(testRegex(wordRegex, '不客气')) // pass console.log(testRegex(wordRegex, 'ただいま。')) //fail (。 이것이 문자가 아니므로 fail) console..

글꼴 및 이미지 최적화 글꼴 Next.js는 빌드 시 글꼴 파일을 다운로드하고 이를 다른 정적 자산과 함께 호스팅 -> 글꼴에 대한 추가 네트워크 요청이 없음 -> 성능향상 웹폰트 사용은 Layout shift 생길 수 있음 fonts.ts //next/font/google module 에서 폰트 가져옴 import { Inter, Lusitana } from 'next/font/google'; // 로드할 Inter의 하위집합 latin export const inter = Inter({ subsets: ['latin'] }); // 서브 폰트 export const lusitana = Lusitana({ weight: ['400', '700']..

URLSearchParams 객체와 URL 객체는 JavaScript에서 URL과 관련된 작업을 수행하는 데 사용되는 두 가지 다른 객체입니다. 각각의 주요 목적과 차이점은 다음과 같습니다: URL 객체: URL 객체는 URL을 파싱하고, 생성하며, 조작하는 데 사용됩니다. URL의 다양한 구성 요소(프로토콜, 호스트, 경로 등)에 접근할 수 있습니다. 주로 웹 주소를 다룰 때 사용됩니다 const urlObject = new URL('https://example.com/path?param1=value1&param2=value2'); console.log(urlObject.protocol); // Output: "https:" console.log(urlObject.host); // Output: "ex..