프론트엔드 첫걸음

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']..

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..

400에러가 발생했다. 400에러란? https://developer.mozilla.org/ko/docs/Web/HTTP/Status/400 HyperText Transfer Protocol (HTTP) 400 Bad Request 응답 상태 코드는 서버가 클라이언트 오류(예: 잘못된 요청 구문, 유효하지 않은 요청 메시지 프레이밍, 또는 변조된 요청 라우팅) 를 감지해 요청을 처리할 수 없거나, 하지 않는다는 것을 의미합니다. https://extrememanual.net/45867 클라이언트 측에서 요청 메서드(Method)가 잘못된 경우, 요청 헤더가 잘못된 경우, 요청한 본문 구문이 누락된 경우 등이 HTTP 400 Bad Request 오류의 원인이다. 개발자도구를 뒤져보니 "Multipart:..

너무나도 기본중의 기본인데 나처럼 확실하게 모르고 있었던 사람 있으리라 생각하며 기록으로 남긴다. See the Pen hegiht 100%가 필요한 이유 by JEONG (@cona) on CodePen. grandParent에 height 100px을 지정해주었다. parent에 height 100%가 없다면 child는 height 30%해줘도 부모의 height를 모르기때문에 30%가 적용되지 않는다. parent에 height:100% 을 사용하지 않고, child div에서 grandParent div의 높이를 상속받고 싶다면 relative를 사용하면 된다. See the Pen height 100% 없이 relative로 부모 높이 상속받기 by JEONG (@cona) on CodePen..