둥이의 개발여행

1. Redux Toolkit (리덕스 툴킷)Redux Toolkit은 Redux를 쉽게 사용할 수 있도록 도와주는 도구이다.Redux는 처음 배우기 어려울 수 있는데, Redux Tookit은 이 복잡한 부분을 간소화해 줍니다.따라서 Redux Toolkit을 사용하는 것이 권장됩니다. (공식문서에서도 사용을 권장하고 있습니다.)필요한 모듈: @reduxjs/tookit과 react-redux 모듈을 사용합니다.npm install @reduxjs/toolkit react-redux 1-1) 리덕스 상태 관리 시작하기✅ 리덕스 툴킷에서 상태(state)는 슬라이스(slice)로 관리합니다. 여기서 슬라이스(slice)란?슬라이스는 상태(state)와 이를 변경할 액션(action)을 묶어놓은 객체입니다..

1. FSD 아키텍처란?FSD(Feature-Sliced-Design) 아키텍처는 소프트웨어 시스템을 기능 중심으로 나누어 모듈화하고, 각 기능을 독립적으로 관리하는 방식이다. 이 아키텍처는 특히 대규모 프론트엔드 애플리케이션에서 코드의 유지보수성과 재사용성을 높이기 위해 사용된다. FSD 아키텍처는 각 기능을 독립적인 도메인으로 분리하여 개발할 수 있도록 하고, 코드의 복잡도를 줄이며, 팀 협업을 개선하는 데 목적이 있다.2. FSD 아키텍처의 기본 개념FSD는 기능 중심(Feature-Oriented) 접근 방식을 사용한다. 이를 통해 프로젝트가 점진적으로 성장하면서도 유지보수가 용이하게 설계된다. FSD 아키텍처의 기본 원칙은 다음과 같다.기능 기반 분할: 애플리케이션을 기능별로 나누어 각 기능을 ..

훅(Hook)은 React에서 함수형 컴포넌트(functional componet)에서도 상태(state)와 생명 주기(lifecycle) 기능을 사용할 수 있게 해주는 특별한 함수입니다. Reack 16.8에서 도입되었으며, 기존의 클래스형 컴포넌트로만 가능했던 작업을 훨씬 간결하게 구현할 수 있게 한다.함수형 컴포넌트에서 사용 가능 : 클래스형 컴포넌트를 사용하지 않아도 상태 관리, 생명 주기 관련 작업을 처리할 수 있음.함수 기반 : 이름이 항상 use로 시작하며, React 내부의 특정 기능과 연결됨.재사용 가능 : 사용자 정의 훅을 만들어 코드 재사용성을 높일 수 있음.클린한 코드 : 상태와 관련된 로직을 더 명확하고 모듈화된 방식으로 작성 가능.useState : 상태 관리 훅함수형 컴포넌트에..

ag-Grid웹 애플리케이션에서 데이터를 표 형식으로 효율적으로 표시하고 관리할 수 있도록 돕는 JavaScript 기반의 고성능 데이터 그리드 라이브러리 aggrid는 모든 주요 웹 프레임워크(React, Angular, Vue.js)와 호환되며, 독립적인 JavaScript 라이브러리로도 사용할 수 있다.다양한 기능정렬(Sorting)필터링(Filtering)그룹화(Grouping)페이징(Paging)편집(Editing)컬럼 고정(Pinned Columns)드래그 앤 드롭(Drag and Drop)셀 템플릿(Custom Cell Templates)컬럼 숨김/보임(Column Visibility)ag-Grid 기본 사용법 공식 문서 : https://www.ag-grid.com/react-data-gr..

$digest already in progressangularJS에서 발생하는 오류, 이 오류는 $digest 루프가 이미 진행 중일 때 또 다른 $digest 루프가 시작되려고 할 때 발생하는 오류이다.$digest angularjs 데이터 바인딩 시스템에서 모델이 변경될 때 이를 ui에 반영하기 위해 실행되는 프로세스문제 원인모델이 변경될 때 $digest 루프를 시작하여 뷰를 업데이트하는데 이 루프가 완료 되기 전에 또 다른 모델 변경이 발생하면 $digest already in progress 오류가 발생한다.$digest 또는 $apply를 수동으로 호출할 때 이 오류가 발생한다. 예를 들어 한 $digest가 진행 중일 때 또 다른 $digest나 $apply를 호출하면 충돌이 일어날 수 있다..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr// 1function solution(name, yearning, photo) { const answer = photo.reduce((acc, picture) => { let result = 0; picture.forEach(item => { const a = name.find(n => n === item); if (a) { const idx = name.indexOf(a); result += yearning[idx]; ..

1xx (정보 응답)100 Continue: 클라이언트가 요청을 계속 진행할 수 있음을 나타냅니다.101 Switching Protocols: 서버가 클라이언트의 프로토콜 변경 요청을 수용했음을 나타냅니다.2xx (성공)200 OK: 요청이 성공적으로 처리되었습니다.201 Created: 요청이 성공적으로 처리되었고, 새로운 리소스가 생성되었습니다.202 Accepted: 요청이 접수되었지만, 아직 처리되지 않았음을 나타냅니다.204 No Content: 요청이 성공했지만, 반환할 내용이 없습니다.3xx (리다이렉션)301 Moved Permanently: 요청한 리소스의 URL이 영구적으로 변경되었음을 나타냅니다.302 Found: 요청한 리소스가 임시적으로 다른 URL에 있습니다.303 See Oth..

객체 (Object)원시값(primitive value)을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체원시 타입은 하나의 값만 나타내지만 객체 타입(object / reference type)은 다양한 값을 하나의 단위로 구성원시 값은 변경 불가(immutable)한 값이지만, 객체는 변경 가능(mutable)한 값객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키 (key) : 값 (value)로 구성자바스크립트에서 함수도 프로퍼티의 값으로 설정 가능 [함수는 일급객체]var myObj = { num: 0, // 프로퍼티 increase: function () { ... ) // 메서드} 자바스크립트는 프로토타입 기반 객체 지향 언어자바와 같은 클래스 기반 객체 지향 언..

원시 값과 객체 비교자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undeined, 심벌, 객체 타입)은 크게 원시 타입과 객체 타입으로 구분할 수 있다. 데이터 타입을 구분하는 이유는 무엇일까? 원시 타입과 객체 타입을 크게 세가지 측면에서 나눌 수 있다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value) 이다. 이에 비해 객체(참조)타입의 값, 즉 객체는 변경 가능한 값(mutable value) 이다.원시 값(100)을 변수에 할당하면 변수에는 실제 값(100)이 저장된다. 이에 비해 객체를 변수에 할당하면 변수에는 참조 값(메모리 주소)이 저장된다.원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 ..

exceljs란?exceljs란 javascript에서 데이터를 엑셀로 추출 및 조작할 수 있는 라이브러리로, 특정 셀의 스타일을 커스텀하고 합칠 수 있는 장점이 있는 라이브러리이다. 공식 문서 링크npm exceljs 링크 exceljsExcel Workbook Manager - Read and Write xlsx and csv Files.. Latest version: 4.4.0, last published: 10 months ago. Start using exceljs in your project by running `npm i exceljs`. There are 1530 other projects in the npm registry using exceljs.www.npmjs.com npm file..