Home
XerosLab
Cancel

JavaScript와 TypeScript의 Class

Class를 사용하는 이유 Class를 사용하여 객체를 생성하면 재사용성이 용이하고 코드의 중복을 피할 수 있다는 장점이 있습니다. 예를 들어 아무나 참여 가능한 익명 채팅 웹사이트를 만든다고 가정했을 때 Person이라는 class를 정의하게 된다면, 접속한 유저를 class로 생성하면 깔끔하고 간결하게 유저를 추가할 수 있습니다. 기본적인 C...

Next.js _document.tsx 에러 해결

문제 React와 Next.js, TypeScript의 버전 업그레이드로 인해 기존에 잘 작동하던 코드에 에러 발생 문제 코드와 에러 import Document, { DocumentContext } from "next/document"; import { ServerStyleSheet } from "styled-components"; expor...

Next.js _document.tsx 에러 해결

문제 React와 Next.js, TypeScript의 버전 업그레이드로 인해 기존에 잘 작동하던 코드에 에러 발생 문제 코드와 에러 import Document, { DocumentContext } from "next/document"; import { ServerStyleSheet } from "styled-components"; expor...

React, Next.js 함수가 두번 실행되는 문제

이벤트 핸들러에서 함수가 즉시 실행되는 문제 다음은 문제를 발생시키는 코드입니다. <button onClick={console.log('Clicked!')}>Click Me!</button> 위와 같이 코드르 작성 할 경우 페이지 로드시 btnOnClickEvent() 함수가 즉시 실행되는 문제가 발생합니다. 이르 ...

TypeScript 타입 에러 해결방법

타입스크립트에서는 반드시 변수나 상수에 Type을 지정해주어야합니다. 다음은 에러케이스입니다. TxHistory.forEach(tx => { console.log(tx) }) forEach문의 변수 tx의 타입을 지정해주지 않아서 에러가 발생합니다. 이를 다음과 같이 Type을 지정해주어도 에러가 발생합니다. Tx...

Windows에서 Mac 폰트 렌더링 적용하기

윈도우 기본 폰트를 맥처럼 바꾸기 Mac을 사용하다 Windows를 사용하면 시스템 기본 폰트를 포함해 각종 소프트웨어에 표기되는 폰트가 마음에 들지 않을 경우 이 방법을 사용해 Windows 시스템의 폰트를 Mac처럼 변경할 수 있습니다. MacType 좌측이 윈도우 기본 폰트 렌더링, 우측이 MacType을 적용한 폰트 렌더링 우선 윈도우...

JavaScript Event Listener(이벤트 리스너)

BOM (Browser Object Model) 웹 브라우저를 통해 실행될 때 Javascript가 갖게되는 기본 객체 구조. 모든 객체는 window 객체의 하위 객체로서 존재한다. HTML 태그를 객체로 가져오기 태그 이름으로 가져오기 특정 태그 모두를 가져오기 때문에 반한되는 객체는 항상 배열 형식이다. 반환되는 객체의 수가 ...

Bootstrap list 목록 구성

01. 목록 구성 하기 <div class="container"> <div class="page-header"> <h2>목록 구성하기</h2> </div> <h3>기본 목록</h3> <ul> <li>HTML+CSS</li...

Bootstrap 문단 꾸미기

일반적인 텍스트에 적용되어 있는 기본 스타일들 확인하기 시작 전 미리 지정해야 할 사항 항상 다음중 하나로 전체 영역을 지정하고 시작. .container : 고정폭을 갖는 영역 브라우저의 해상도에 따라 다음의 크기로 순차적으로 변함. 1170px > 970px > 750px > 100% ...

HTML CSS 요소 배치

HTML 요소 배치 로고, 메뉴, 사이드요소의 세 영역을 상위 요소 안에서 배치하는 방법 공통항목(common.css) 자주 사용될 속성들은 별도의 클래스로 미리 만들어둔다.(코드의 재사용) * { padding: 0; margin: 0; } .text-center { text-align: center; } .text-right { ...