Redux는 useReducer를 썼을 때와 비슷한 구조를 가지고 있다.\+1, -1 버튼을 가진 카운터를 구현해보자.먼저 폴더의 구조는 src 내부에 다음과 같이 생성해준다.그 다음 Redux를 미리 설치해주자yarn add redux react-redux처음으로 어

React Router 1. 개념 및 설치 react-router는 특정한 주소와 컴포넌트를 연결시켜주고, 주소 이동을 통해서 다른 컴포넌트화면을 보여줄 수 있도록 하는 기능을 제공해주는 라이브 러리다. 단일 페이지 주소 뒤에 다른 주소가 추가 되면서 작업을 진행 할

React의 Hook

이번주 처음으로 React를 시작했다.다른 프론트엔드 프레임워크인 Vue를 다뤄봐서 그런지 그나마 쉽게 개념들을 이해하고 내용들이 와 닿았다는 생각이 들었다.React는 Meta(전 Facebook)에서 만든 프론트엔드 라이브러리(프레임워크)이다.오픈소스 프로젝트이며,

router-view vue-router를 사용하여 중첩 된 라우트 구성을 이용할 수 있다. 아래는 공식 문서에 있는 예시를 가져온 것이다. 이를 이용하여 이번 mini project에 이용을 해 보았다. 적용한 곳은 로그인/회원가입 페이지, 마이페이지, 제품검색

객체 지향 프로그래밍 중에서 가장 중요한 원리 중 하나는 '내부 인터페이스'와 '외부 인터페이스'를 구분 짓는 것이다.프로그래밍에서 특별한 문법과 컨벤션을 사용해 안쪽 세부사항을 숨긴다.객체 지향 프로그래밍에서 프로퍼티와 메소드는 두 그룹으로 분류된다.내부 인터페이스(

property가 아닌 클래스 함수 자체에 메소드를 설정할 수도 있다.이런 메소드를 "정적(static) 메소드"라고 부른다.정적 메소드는 아래와 같이 클래스 안에서 static키워드를 붙여 만들 수 있다.정적 메소드는 메소드를 프로퍼티 형태로 직접 할당하는 것과 동일

super는 먼저 앞에서 배운 내용만으론 super가 제대로 동작하지 않는다.내부에서 super는 ‘어떻게’ 동작할까?. 객체 메서드가 실행되면 현재 객체가 this가 된다. 이 상태에서 super.method()를 호출하면 엔진은 현재 객체의 프로토타입에서 metho

클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다.기존의 기능을 토대로 새로운 기능을 만들 수 있다는 것이다.먼저 Animal이라는 클래스를 만들어 보자.객체 animal과 클래스 Animal의 관계를 그림으로 나타내면 아래와 같다.또 다른 클래스 Rabb

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀이며, 객체를 정의하기 위한 상태(멤버 변수)와 메소드(함수)로 구성된다.실무에서는 동일한 종류의 객체를 여러 개를 생성해야 하는 경우가 잦다.이럴 때 new 연산자와 생성자

javascript에서 함수는 이곳저곳 전달될 수 있고, 객체로도 사용될 수 있다. 이번 시간에는 함수 간에 호출을 어떻게 포워딩(forwarding) 하는지, 함수를 어떻게 데코레이팅(decorating) 하는지에 대해 알아보자!CPU를 많이 잡아먹지만 결과는 안정적

prototype 프로퍼티는 javascript 내부에서도 광범위하게 사용된다. 모든 내장 생성자 함수에서 prototype 프로퍼티를 사용한다.빈 객체가 있다고 가정해보자"\[object Object]" 문자열을 생성하는 코드는 어디에 있을까? toString 메소드

어제 공부했던 proto는 브라우저를 대상으로 개발하고 있다면 다소 구식이기 때문에 더는 사용하지 않는 것이 좋다고 한다. 표준에도 관련 내용이 명시되어있다. 대신 아래와 같은 최신 메소드들을 사용하는 것이 더 좋다. Object.create(proto, [desc

개발을 하다 보면 기존에 있는 기능을 가져와 확장해야 하는 경우가 생긴다.사람에 관한 프로퍼티와 메소드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 admin과 guest 객체를 만들어야 한다고 가정해 보자. 이때 user의 메소

객체에는 프로퍼티가 저장되고, 이는 key-value쌍으로 이루어진 것으로 우리는 알고 있었다.오늘은 객체 프로퍼티의 추가적인 부분들인 추가 구성 옵션 몇 가지와 getter, setter함수를 만드는 법을 알아보자!객체 프로퍼티는 value와 함께 플래그(flag)라

화살표 함수 화살표 함수는 단순히 함수를 짧게 쓰는 용도로 사용되지 않는다. javascript에서는 함수를 생성하고 그 함수를 어딘가에 전달한다. ex) arr.forEach(func), setTimeout(func) 등... 어딘가에 함수를 전달하게 되면 함수의

setTimeout에 메소드를 전달할 때처럼, 객체 메소드를 콜백으로 전달할 때 ’this 정보가 사라지는’ 문제가 생긴다.이 문제를 어떻게 해결할까?객체 메소드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라진다.setTimeout을 사용한 아래 예시

함수 표현식과 함수 선언문 이외에 함수를 만들 수도 있는 방법이 하나 더 있다. 잘 사용하는 방법은 아니지만, 이 방법 외에는 대안이 없을 때 사용한다.new Function 문법을 사용하면 함수를 만들 수 있다.새로 만들어지는 함수는 인수 arg1...argN과 함수

함수는 호출이 가능한 "행동 객체"이다. 함수를 호출 및 객체처럼 함수에 프로퍼티를 추가·제거하거나 참조를 통해 전달할 수 있다.함수 객체엔 몇 가지 쓸만한 프로퍼티가 있다."name"프로퍼티를 사용하면 함수 이름을 가져올 수 있다.함수 객체에 이름을 할당해주는 로직에

vite는 현재 사용하는 프론트엔드 개발에서 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있는데, 이 웹팩을 사용할 때 보다 훨씬 더 빠르게 개발하고 배포할 수 있기 때문에 등장한 javascript 네이티브 모듈을 기반으로 한 dev server이다. 웹팩은