Set 배열을 Set 인스턴스로 만들어 중복 제거 후, 스프레드 연산자로 배열로 반환 const dupArr = [1, 2, 3, 1, 2]; const set = new Set(dupArr); const uniqueArr = [...set]; filter(), indexOf() filter()와 indexOf()로 특정값이 처음으로 나타...

브라우저의 렌더링 과정 웹 어플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성...

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

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