선호:하다

NVM 이란? 노드 버전을 업데이트하기 위한 패키지로, 쉽게 Node.js의 버전을 관리할 수 있다. NVM 설치 Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 해당 링크를 통해 nvm-setup.zip 파일을 내려받은 후, 실행하여 설치해준다. Node.js 버전 변경하기 node -v // 현재 사용하고 있는 노드 버전 확인 nvm list available // 사용 가능한 버전 조회 nvm install 18.17.1 // 원하는 노드 버전 다운로드 nvm list // 설치되어있는..

자바스크립트의 함수는 호출될 때 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. 자바스크립트의 this 키워드는 자바에서의 개념과 달라 혼란을 줄 수 있다. 자바에서 this는 인스턴스 자신을 가리키는 참조변수이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해 사용된다. public Class Person { private String name; public Person(String name) { this.name = name; } } 하지만 자바스크립트의 경우 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수 호출 방식은 아래와 같이 다양하다. 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. a..

클로저 클로저를 쉽게 정의하면 다음과 같이 정의할 수 있다. 클로저란 자신이 생성될 때의 환경을 기억하는 함수이다. 클로저는 자바스크립트 고유의 개념이 아니라 다양한 프로그래밍 언어에서 사용되는 중요한 특성이다. 위 정의에서 말하는 '함수'란 반환된 내부함수를 의미하고 '자신이 생성될 때의 환경'이란 내부함수가 선언됬을 때의 스코프를 의미한다. 즉, 클로저는 반환된 내부함수가 자신이 선언됬을 때의 스코프를 기억하여 해당 스코프 외부에서 호출되어도 해당 스코프에 접근할 수 있는 함수를 말한다. function outer() { var a = 2; function inner() { console.log(a); } return inner; } var func = outer(); func(); // 2 위의 코..

본문에 들어가기 앞서 이벤트 등록에 대해 알고 있어야한다. 아이템 추가 const button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem(event) { console.log(event); } 위 코드는 버튼을 클릭했을 때 addItem이라는 함수가 실행되도록 하는 코드이다. 이와 같이 addEventListener()를 통해 HTML 요소에 동적인 기능을 추가할 수 있게 된다. 여기서 브라우저는 어떻게 이벤트의 발생을 감지하게 되는지 알아보자 이벤트 버블링 - Event Bubbling 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위의 화면 요소들..

push() 배열의 끝에 n개의 요소를 넣는다. const numArr = [1, 2, 3, 4, 5]; numArr.push(6, 7, 8); console.log(numArr); // [1, 2, 3, 4, 5, 6, 7, 8] pop() 배열의 마지막 요소를 제거하고 해당 요소를 리턴한다. const numArr = [1, 2, 3, 4, 5]; const popped = numArr.pop(); console.log(popped);//5 console.log(numArr);//[1, 2, 3, 4] unshift() 배열의 앞에 n개의 요소를 넣는다. const numArr = [2, 3, 4]; numArr.unshift(0, 1); console.log(numArr); // [0, 1, 2, ..

JS를 사용하며 배열을 자연스럽게 써왔지만, 배열에 대해 자세히 공부해본 적이 없었다. JS 문법을 기초부터 공부할 기회가 생겨 배열 생성 방법과 배열 메소드들을 정리해보고자 한다. 자바스크립트에서 배열은 배열 리터럴, Array 생성자 함수, Array.of 메서드, Array.from 메서드를 통해 생성할 수 있다. 배열을 생성하는 방법이 4가지나 있기 때문에 각각의 생성 방식과 특징을 제대로 이해해야 목적에 맞는 방법을 선택할 수 있을 것이다. 1. 배열 리터럴 가장 단순하고 직관적인 배열 생성 방식이며 대부분의 브라우저에서 가장 성능이 좋은 배열 생성 방법이다. const a = []; const b = [1, 2, 3]; 배열 내부에서 spread 문법을 사용하여 기존의 배열을 활용한 새로운 배..

Redux-Toolkit redux-toolkit이란 redux로 작성하는 코드를 더 효율적이고 간단하게 작성할 수 있게 해주는 툴킷이며 다음과 같은 기존 redux의 단점을 보완할 수 있다. 많은 설정 - 유용한 작업을 수행하기 위해서는 다수의 라이브러리, 미들웨어 설정 필요 반복되는 코드 불변성 유지의 어려움 기본적으로 redux-toolkit을 사용하게되면 createSlice를 통해 기능별로 여러개의 slice를 만든 후, configureStore를 통해 하나의 store로 합치는 패턴으로 작업하게 된다. Redux-Toolkit 설치하기 npm i @reduxjs/toolkit react-redux Redux-Toolkit 사용하기 redux-toolkit을 사용하여 간단한 counter를 만..

Redux redux란 자바스크립트의 상태 관리 라이브러리로 클라이언트쪽의 데이터를 중앙 관리하기 위해 사용한다. 상태 관리 라이브러리 중 가장 npm trend가 높고 원리가 간단하다. 하지만 코드량이 상당히 많아질 수 있고, 서버쪽의 데이터를 관리하기 위해서는 react query를 사용하거나 redux-saga 등 비동기처리 미들웨어가 필수적이라는 단점이 있다. Redux의 기본 개념 : 세 가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만..

Next.js로 개발중 리렌더링할 때 styled-component로 작성한 css가 적용되지 않은 채로 html 페이자가 렌더링 되는 현상을 겪었다. 이는 _document.tsx 파일을 커스텀하여 해결할 수 있었다. 첫번째로 styled-components의 서버측 className과 클라이언트측 className을 동일하게 유지되도록 하기 위해서 next.config.js를 수정해야된다. next.js 12.1버전 이상부터는 babel-plugin-styled-components를 사용하지 않아도 되고, 다음과 같은 코드만 next.config.js에 추가해주면 된다. compiler: { styledComponents: true }, 두 번째로 _document.tsx 파일을 아래처럼 작성해 주면..

styled-component와 antd로 회원가입 기능을 구현하던 중 input 태그의 onChange 속성에서 타입 오류가 발생하였다. 타입이 안맞아서 생기는 오류인것 같았지만 해결책을 찾을 수 없어 몇 시간 동안이나 구글링을 하며 삽질을 했다. 그러다 결국 에러메세지를 자세히 보고 해결 방법을 알게되었다. onChange 함수의 타입을 새롭게 정의해주기 위해 위와 같이 InputProps라는 타입을 만들고 onChange의 타입을 에러메세지에 나온대로 정의해주었다. 그리고 그것을 CustomInput의 props로 전달해주었다. 그 결과 에러가 해결되었다.