프론트엔드 첫걸음

문제상황텍스트 크기에 맞춰 캔버스 사이즈를 바꾸는 예제에서 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.

https://www.clien.net/service/board/cm_mac/13119792 키보드 몇개가 안눌려지고, 키가 모두선택 기능을 한다던가 (나의 경우는 i 를 눌렀더니 ide의 블록이 전체선택되었다) 하는 에러가 발생한다면?? 이는 자신도 모르게 마우스키를 활성화 해버린것이다. 손쉬운 사용으로 들어가서 마우스키를 비활성화 하면된다.

타입스크립트의 타입으로 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']..