둥이의 개발여행

프론트엔드 개발을 하다 보면 리뷰에서 이런 피드백을 자주 듣게 됩니다."없는 값은 항상 처리해야 한다""undefined일 때도 안전하게 동작하도록 코드를 작성해" 처음에는 다소 당황스럽습니다. 이 함수는 항상 값이 들어오는데 굳이?그런데 실제로 운영 환경에 나가면 이런 방어 코드 한 줄이 앱의 안정성을 크게 높여줍니다. 이번 글에서는 이벤트 핸들러를 예시로 하여 "없는 값 처리(Defensive Programming)"가 왜 중요한지,그리고 어떻게 작성하면 좋은지 살펴보겠습니다. 1. 방어적 프로그래밍(Defensive Programming)이란?방어적 프로그래밍은“입력값이 항상 올바르다고 가정하지 않는다.”를 전제로 합니다. 즉, 모든 외부 입력이나 인자를 신뢰하지 않고,예외적인 상황에서도 코드가 안..

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..