Redux 초기 세팅 에러 발생
·
FrontEnd/Javascript
Redux Quick start문제 상황초기세팅에 맞춰 Redux를 세팅했으나 스토어에서 recucer를 가져오지 못하고 있다.page.bundle.js:3 Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.에러 발생과 함께 페이지가 뜨지 않음. 다시 확인하자.일단은 가이드에 맞게 제대로 입력하였는지 확인해보자.1. Slice를 생성하였는가?import { createSlice } from "@reduxjs/toolkit";const initialState = { "id": 1, "title": "명절 선물 선호도 조사",};ex..
[js] 배열을 생성하는 법
·
FrontEnd/Javascript
js에서 빈 배열을 생성하는 방법에 대해서 알아보고자 합니다.자바스크립트 내에서 배열을 생성하는 방법에는 2가지가 있습니다. 1. 대괄호를 이용한 배열 생성2. Array를 이용한 배열 생성 대괄호를 이용한 배열 생성가장 쉽게 사용하는 배열 선언 방식입니다.const arr = []; // [] Array를 이용한 배열 생성Array의 생성자와 정적 메소드를 이용해서 생성할 수 있습니다. 1. new Array() - 생성자 사용new Array() 로 사용해도 되고 new를 제외한 Array() 로도 사용됩니다.두가지 방식 모두 배열을 생성하는 동일한 방식이지만 저는 생성자라는 의미로 new Array() 를 더 선호합니다.// 빈 배열 생성하기const arr1 = new Array(); // []/..
[JS] Enum을 사용해보자.
·
FrontEnd/Javascript
우테코 프로젝트를 진행하면서 코드 내 입출력 값과 에러 메시지를 하드코딩하는 일이 잦았습니다. 이렇게 하드코딩된 상수값들은 코드의 가독성을 떨어뜨리고 유지보수에도 불편함을 주었습니다. 이를 개선하기 위해 상수값들을 관리할 방법을 고민하던 중, Java의 Enum 타입처럼 특정 값들을 모아 관리할 수 있는 방안을 찾아보게 되었습니다.JavaScript에는 Enum 타입이 따로 존재하지 않지만, 상수들을 일관성 있게 정의하고 유지보수하기 위해 JavaScript에서도 유사하게 Enum 형태를 사용할 수 있습니다. 이번 글에서는 JavaScript에서 Enum을 어떻게 구현하고 활용할 수 있는지에 대해 알아보겠습니다. Enum(Enumerated type) 이란?컴퓨터 프로그래밍에서 열거형(enumerated..
[JS] 모듈 / CommonJS와 ES Module은 무엇인가?
·
FrontEnd/Javascript
JS 모듈이란?모듈은 애플리케이션을 구성하는 개별적 요소로 재사용 가능한 코드 조각을 말합니다.기능을 기준으로 파일 단위 분리하며 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 합니다. 즉, 모듈은 개별적 존재로 애플리케이션과 분리되어 존재해야 합니다.개별적 존재로 분리된 모듈은 애플리케이션이나 다른 모듈에 의해 재사용 되어야 의미가 있습니다. 모듈 내의 자산에 한하여 명시적으로 선택적 공개가 가능합니다. 이렇게 공개된 모듈을 사용하는 모듈 사용자는 모듈이 공개한 자산 전체 또는 일부를 선택해 자신의 스코프로 불러들여 재사용 할 수 있습니다.모듈을 사용하면 관연있는 변수와 함수를 한데 모을 수 있다. 모듈은 함수와 변수를 모듈 스코프에 넣고, 이 스코프를 통해 모듈의 함수 사이에서 변수..
[JS] node.js 콘솔에서 입력을 받아보자 - readline
·
FrontEnd/Javascript
js 개발 시 콘솔 출력은 당연하게 console.log() 를 사용하였습니다. 그러나 콘솔로 출력을 하는 방법에 대해서는 생각해 본 적이 없습니다. 우아한테크코스 프리코스를 진행하던 중 입력값을 받아오기 위해 사용하는 라이브러리 내에서 readline을 사용하는 것을 봤습니다. 사용해본 적이 없는 모듈이기에 어떻게 사용되는 것인지 확인해보겠습니다.readline이란?node.js에 내장되어 있는 core모듈로 한번에 한 줄씩 데이터를 읽기 위한 인터페이스를 제공해주는 모듈입니다. readline 사용하기1. readline 모듈 사용하기import readline from "readline";2. readline 인터페이스 생성readline의 createInterface 메서드를 사용하여 인스턴스를 ..
[js] 배열을 정렬하는 방법-sort()
·
FrontEnd/Javascript
간단한 코드를 통해 javascript 내에서 배열을 정렬하는 방법에 대해서 알아보겠습니다.배열을 정렬할 때에는 sort()라는 함수를 사용합니다. 1차원 배열 정렬하기let arr = [4, 2, 6, 7, 3, 8, 1];arr.sort(); // [1, 2, 3, 4, 6, 7, 8]아무런 파라미터 전달 없이 sort()를 사용하면 자동으로 오름차순 정렬이 됩니다.문자열로 한번 더 테스트해보겠습니다.let arr2 = ["c", "p", "a", "e", "j", "z", "A"];arr2.sort(); //['A', 'a', 'c', 'e', 'j', 'p', 'z']문자열로 하면 A-Z → a-z 순으로 정렬되는 것을 확인할 수 있습니다.sort()는 유니코드를 기반으로 정렬하기 때문에 소문자보..