[React] Hooks

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

2022년 7월 12일
·
0개의 댓글
·

[React] Redux-toolkit 설치 및 사용방법

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

2022년 6월 29일
·
0개의 댓글
·

[React] React에서 css 사용방법

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

2022년 6월 24일
·
0개의 댓글
·

[React] useEffect

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

2022년 6월 14일
·
0개의 댓글
·

[JavaScript] var, let, const

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

2022년 2월 18일
·
0개의 댓글
·

[TypeScript] 02.기본타입

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

2022년 2월 18일
·
0개의 댓글
·

프론트엔드 면접 예상 질문

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

2022년 2월 15일
·
0개의 댓글
·

Vue에서 경로 별칭 사용

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

2022년 2월 9일
·
0개의 댓글
·

Firebase 네비게이션 가드 오류

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

2022년 2월 7일
·
0개의 댓글
·

[Git] 자주 사용하는 명령어

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

2022년 1월 25일
·
0개의 댓글
·
post-thumbnail

[NuxtJS] 01. 기본 환경세팅

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

2022년 1월 25일
·
0개의 댓글
·

[TypeScript] 01.기초

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

2022년 1월 12일
·
0개의 댓글
·

ESLint 끄기

ESLint는 JavaScript 코드에서 발견된 문제에 대해 분석해주는 도구입니다. 그런데 내가 틀린 문법이 없는 경우에도 가끔씩 오류를 뱉는 경우가 있는데, 이 때 아래와 같은 방법으로 ESLint를 끌 수 있습니다. ESLint 끄는 방법 1) 원하는 페이지만

2021년 12월 31일
·
0개의 댓글
·

[JavaScript] 버블링&캡처링

캡처링과 버블링의 이해

2021년 12월 21일
·
0개의 댓글
·

[NuxtJS] Nuxt에 scss 적용

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

2021년 12월 17일
·
0개의 댓글
·