Vite에서 img src를 작성하려면 다음과 같이 사용 할 수 있다. new URL을 사용 공식 문서에서도 작성되어 있지만, new URL을 사용하여 이미지 파일을 받아오는 것이다. 소스는 다음과 같다. 위 소스는 로컬에서는 문제 없이 작동하지만, 소스 빌드 시에는 asset 폴더에 포함이 되지 않는다는 문제점이 있다. Public 폴더 공식 문서...

useState 상태 유지와 그 값을 갱신 할 때 사용 first : state 변수 setFirst : first의 값을 갱신하기 위한 함수(참조형태로 작성해놓음) second : 값을 넣는 곳 useEffect 컴포넌트 호출 시, 1번만 이벤트(?)를 실행할 때 사용 useEffect Hook은 componentDidMount와 componentD...

Redux를 조금 더 쉽게 사용하기 위해 만든 Redux-toolkit에 대해 알아보려고 한다. 일단은 npm으로 Redux-toolkit을 다운로드 한다. 그리고 메인이 되는 파일(app.jsx 또는 app.tsx)로 가서 아래와 같이 코드를 추가해준다. store 내에 파일은 아래와 같이 구성하면 된다. 위 소스에 대해 설명을 하자면 아래와 같다...

React에서 css를 사용하는 방법 변수로 사용 module을 사용한 방법 전역으로 css 사용방법 styled-component를 사용하는 방법 npm i styled-component

useEffect는 초기 렌더링 시, 한 번만 호출되기 위해 쓰는 함수이다. 첫 번째 인자는 실행해야 할 코드(참조)를 작성하고, 두 번째 인자는 검사하고 싶은 코드 또는 빈 배열을 넣어준다. 두 번째에 인자를 넣는 케이스도 아래 있으니 소스 참고!!! 추가 useEffect 동작 전에 실행될 때 사용할 수 있는 방법이 있다. 명칭은 cleanup ...

JS 변수 자바스크립트를 처음 시작할 때, 가장 처음보는 변수가 var, let, const입니다. var, let, const의 차이점은 무엇인지 알아봅시다!! 함수 레벨 스코프(Function Level Scope) vs 블록 레벨 스코프(Block Level

기본타입 타입 스크립트의 기본 타입은 아래와 같습니다. 01. 문자열(String) > const tsStr: string = "Hello"; 02. 숫자(Number) > const tsNum: number = 1234; 03. Boolean > const tsBool: boolean = true; // or false 04. 배열(Array) >...

프론트엔드 면접을 준비하면서 제가 받았던 질문들과 인터넷에서 봤던 질문들에 대해서 정리해보려고 합니다. 기술 + 기타 질문들에 대한 내용들이니 면접 준비하시는 분들에게 조금이나마 도움이 됐으면 합니다. 기술 자바스크립트 원시 타입과 참조 타입 var, let, const에 차이점 호이스팅에 대한 설명 this에 대한 설명 call() apply(), ...

vue-cli를 통해 환경 설정을 하고나면 @는 '/src'를 지칭한다. 근데 프로젝트 규모가 커짐에 따라서 경로가 복잡해지는 경우가 있는데, 이 때 '@/폴더명/폴더명/...' 길어지는 경우가 있을텐데, 이를 해결하기 위한 방법을 소개하려고 한다. 위와 같은 방법으로 작성을 해도 되지만 별칭을 지정하여 폴더 경로를 지정할 수 있다. 사용 방법은 아래와 ...

Firebase를 사용하여 로그인 처리를 하다가 로그인 정보가 있는 경우/없는 경우를 구분하여 페이지 리다이렉트 처리를 하던 도중 생긴 문제에 대해 정리하려고 한다. router에서 로그인 정보가 없는 경우에 네비게이션 가드를 통해서 /login 페이로 진입 시키려고 했는데, auth.currentUser를 호출하면 null로 나오는 것이다. auth만 ...

Git 명령어 정리 SourceTree를 사용하지만 그래도 Git을 쓰는 입장에서 명령어 정도는 알아야할꺼 같아 정리를 해본다. Git 환경설정 유저이름 설정 > git config --global user.name "user_name" 유저 이메일 설정 > git config --global user.email "user_email" Git을...

NuxtJS로 포트폴리오를 만들어보면서 기초적인 부분들과 몰랐던 부분들에 대해서 정리를 할 계획이다. 일단은 가장 기본이 되는 환경세팅 하는 방법부터 살펴보자! cmd창을 열고 아래와 같은 명령어를 사용하여 프로젝트를 생성 > npm init nuxt-app <project-name> 위 명렁어를 치면 아래와 같은 화면이 나오는데, 단계별로...

타입스크립트(TypeScript) > 타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 자신이 원하는 타입을 정의하고 프로그래밍을 하면서 자바스크립트로 컴파일되어 실행할 수 있다. 타입스크립트(TypeScript)를 사용하는 이유 에러의 방지 > 소스 코딩 시, 사전에 오류를 방지하기 위해 사용 코드 가이드 및 ...

자바스크립트 공부하면서 알게된 기술을 하나 소개하려고 한다. 바로 디바운스와 쓰로틀링이다. 정의는 다음과 같다. 디바운스(Debounce) 특정시간이 지난 후 하나의 이벤트를 발생시키는 방법 쓰로틀링(Throttling) 일정한 주기마다 이벤트를 발생시키는 방법 말로 설명보단 아무래도 코드를 보면서 이해하는게 빠를것 같기에 다음과 같은 예...

ESLint는 JavaScript 코드에서 발견된 문제에 대해 분석해주는 도구입니다. 그런데 내가 틀린 문법이 없는 경우에도 가끔씩 오류를 뱉는 경우가 있는데, 이 때 아래와 같은 방법으로 ESLint를 끌 수 있습니다. ESLint 끄는 방법 1) 원하는 페이지만 끄기 2) 전체 끄기 좀 더 자세한 방법은 아래 vue-cli 홈페이지에서 확인 가능...

캡처링과 버블링의 이해

Nuxt.js에서 sass/scss 및 mixin 적용 방법 Nuxt.js에서 scss를 사용하는 방법은 아래와 같습니다. sass와 sass-loader 설치 npm i sass@1.26.5 sass-loader@8.0<span class="hljs-number" style="colo