useCallback자바스크립트의 함수는 객체의 한 종류이다. 위 코드를 보면 consoleFunction 변수에 함수 객체가 할당되어 있다.이는 리액트에서 컴포넌트가 다시 렌더링된다면 완전히 새로운 함수가 생성됨을 의미한다.말했듯이 자바스크립트에서 함수는 객체 이

React - useEffect컴포넌트의 Lifecycle을 3가지로 분류해보자.1\. 컴포넌트 마운트2\. 컴포넌트 업데이트(리렌더링)3\. 컴포넌트 언마운트useEffect는 이러한 생명주기 사이사이에 간섭을 줄 수 있는 Hook이다. useEffect는 실행할

React - ref & potal Ref >Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. >일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. >

Tailwind CSSTailwind CSS는 어떤 웹 프로젝트에서든 사용할 수 있는 CSS 프레임워크로 HTML 요소에 mb-6 , flex 와 같이 미리 정의된 클래스를 추가하여 스타일링 할 수 있다. 설치법은 공식 문서에 잘 나와있다.본인은 vite를 사용하므

React - vanilla CSS & styled-componentsVanilla CSS장점 말 그대로 바닐라 CSS이기 때문에 특별한 관례를 따르지 않아도 된다.컴포넌트 파일에서 import해서 사용하니 스타일링을 추가하려는 사람으로 인해 방해를 받거나 간섭을

이미지 저장소 - public vs assets이미지를 public/폴더 에 저장하면 index.html 혹은 index.css 파일에서 직접 참조할 수 있다. 이러한 이유는 public/ 에 저장된 이미지(파일)이 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개

React 핵심 - 컴포넌트, JSX, 속성, 상태 등컴포넌트는 잠재적으로 재사용이 가능한 구성 요소로 리액트 개발자가 생성할 수 있고 차후에 혼합하여 전반적인 UI를 구축할 수 있다.결국 리액트 애플리케이션은 컴포넌트를 결합하여 만들어지는 것이다.컴포넌트는 HTML과

참조형 & 기본형String, Number, boolean은 모두 기본형(Primitive type) 이다.자바스크립트의 기본형 값의 특징은 변경할 수 없다는 점이다.객체를 다룰 때는 다르다.자바스크립트 객체는 참조형(Reference Type) 값이며 이는 변수에

화살표 함수화살표 함수는 표기법이 간단하기 때문에 익명 함수를 다른 함수의 인수로 넘길 때 주로 사용한다.단지 표기법에서만 다른 것이 아니고, 몇가지 미묘한 차이점이 있다. 매개변수 목록 괄호 생략하기화살표 함수가 정확히 하나의 매개변수만 사용하는 경우, 묶는 괄호

import & exportscript 태그에 type="module"로 설정하면 해당 파일은 모듈로서 동작하게된다.JavaScript 코드를 담고 있는 파일이다.다만 일반적인 JavaScript 파일과는 다른 차이점을 가지고 있다.import 혹은 export 구문을

ReactWhat is React?바닐라 자바스크립트를 이용한 사용자 인터페이스 구축 라이브러리다. Why?React를 사용하는 웹사이트를 살펴보자, 예를 들면 넷플릭스.화면의 전환이 매우 부드럽고 반응이 즉각적이며 새 페이지가 로딩되는 듯한 효과가 전혀 없다.Re

React Developer Tools는 우리가 React를 사용하여 스크립트로 작성한 컴포넌트 구조를 볼 수 있고 변경하며 테스트를 할 수 있도록 도움을 주는 유용한 디버깅 도구이다.크롬 확장 프로그램에서 추가하면 개발자 모드에서 관련 텝을 사용할 수 있다.Compo

React 프로젝트에서 styled-component를 설치하는데 아래와 같은 오류를 접했다. 구글링을 해보니 v6에서 발생하는 오류인거 같다. (최신 버전은 아직 불안정한가보다...) 버전을 명시해 v5로 설치하니 문제 없이 잘 설치된다. 끝!

더 행복하면 불안할 것 같고,덜 행복하면 불행할 것 같다그러니까 딱 이 정도만 행복하고 싶다.난 지금 행복하다 : )

TypeScript란?우리가 사용하는 브라우저들(크롬, 엣지, 파이어폭스, 사파리 등)은 TypeScript를 이해하지 못한다.그래서 Javscript로 변환해서 로드해야 진행할 수 있다.이렇게만 들었을 땐 번거로울 것 같은데 무슨 장점이 있길래 TypeScript를

GeneratorGenerator는 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능이다.function 옆에 \*을 넣어서 만들고 내부에 yield 키워드를 사용하며 이를 이용해 함수의 실행을 멈춘다.Generator 함수를 실행하면 Generator객체가 반환되며

async / awaitasync와 await을 사용하면 Promise에 then 메소드를 체인형식으로 호출하는 것보다 가독성이 좋아진다.함수 앞에 async 키워드를 붙혀주면 항상 Promise를 반환한다. await 키워드는 async 함수 내부에서만 사용할 수 있

Promise Promise란 ? Promise는 자바스크립트 비동기 처리에 사용되는 객체다. 여기서 자바스크립트의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미한다. new Promise로 생성

ClassClass는 ES6에 추가된 객체를 생성하기 위한 템플릿이다.생성자 함수와 Class를 비교해보자.Class에는 constructor가 있으며 이는 객체를 만들어주는 메소드다.또한 showName과 같이 Class내에 정의한 메소드는 생성된 객체의 protot

상속과 프로토타입객체에는 자신이 프로퍼티를 가지고 있는지 확인하는 hasOwnProperty라는 함수가 있다.그렇다면 hasOwnProperty 함수는 어디에서 오는 걸까?바로 여기에 있다.이를 프로토타입이라고 한다.객체에서 프로퍼티를 읽는데 존재한다면 탐색을 멈추고