웹 사이트 성능 최적화 웹 사이트 성능 최적화 방법에는 크게 두 가지가 있다. 로딩 성능 최적화 렌더링 성능 최적화 로딩 성능 최적화는 서버에서 데이터 및 파일을 가져오는 성능을 의미하고, 렌더링 성능 최적화는 로딩을 통해 받아온 정보 및 파일들을 브라우저에 표시해주는 성능을 의미한다. 웹 사이트 성능 최...

async/await, Promise를 사용하여 일정 시간 뒤에 실행되는 함수를 만들어 보자. 코드 구조는 아래와 같다. const a = async () => { console.log("1"); await stay(); console.log("2"); }; a(); stay() 함수에서 3초 지연된 후 다음 코드(consol...

마크업 우선 input 태그를 사용해 파일을 업로드 해보자. <InputFile ref={inputFile} type="file" onChange={(e) => handleImportChange(e)} /> <Button onClick={handleImportClick}>Import</Butto...

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement /** @jsx jsx */ import { css, jsx } from "@emotion/react"; const color = "darkgreen"; r...

event.target : 실제 이벤트가 발생한 요소 event.currentTarget : 이벤트 리스너와 연결된 요소 이벤트에서 target과 currentTarget의 차이 Event.currentTarget

export const Top = styled.div` ${Container} { border-bottom: 1px solid #d7d7d7; } `; Emotion으로 컴포넌트 스타일링 중 위와 같이 StyledComponent 코드 안에서 외부 컴포넌트를 참조하면 아래와 같은 에러가 뜬다. Component selectors c...

Rewrites는 들어오는 요청 경로를 다른 대상 경로에 매핑하는 프록시 역할을 한다. 로컬 서버에서 api 요청 시 CORS 오류가 나서 rewrites 속성을 설정하였다. // next.config.js module.exports = { async rewrites() { return [ { source: "/...

Next.js에는 환경 변수에 대한 지원이 내장되어 있어 dotenv 같은 모듈을 설치하지 않아도 된다. process.env로 .env.local 파일에 접근할 수 있다. DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword // pages/index.js export async function getS...

TypeScript 자바스크립트 Superset(확대집합) 컴파일 언어 정적 타입 언어 TypeScript의 장점 컴파일 시점에 타입을 체크하여 오류 확인 미리 타입을 결정하기 때문에 실행 속도가 빠르다. 코드 자동완성이나 실행 전 피드백을 제공하여 생산성이 높다. 특정 기능에만 타입스크립트를 도입함으로써 프로젝...

소스코드의 타입 타입 설명 전역 코드 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 ...