디스트럭처링오늘은 JavaScript 디스트럭처링(Destructuring)과 변수 이름 변경(별칭 alias) 문법을 쉽고 간단히 정리해 보겠습니다. userId: uid 같은 구문이 낯설게 느껴지신다면, 아래 내용을 통해 핵심 개념과 실무 활용 팁을 빠르게 익혀 보세요.1. 디스트럭처링 기초const user = { userId: 'admin1', role: 'ADMIN' };const { userId, role } = user; // userId → 'admin1', role → 'ADMIN'객체는 키(key)로, 배열은 순서로 매칭해 값을 바로 변수에 담는 문법입니다.2. 변수 이름 바꾸기(별칭)const { userId: uid } = user;// user.userId 값을 변수 uid에 ..
리액트에서 모델링 파일 혹은 draco를 쓴다면 glb,gltf,wasm 등 관련된 확장자를 반드시 추가해주자 # ✅ 정적 리소스는 React 서버로 location ~* ^/(static/|js/|css/|images/|fonts/|favicon\.ico|.*\.(js|css|png|jpg|jpeg|svg|woff2?|ttf|eot|ico|json|glb|gltf|wasm))$ { include /etc/nginx/conf.d/sb_sewer_front-url.inc; proxy_pass $app_front; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_heade..
reduce() 함수reduce()는 JavaScript에서 배열을 하나의 값으로 축소하거나 누적하는 데 사용되는 메서드입니다. 배열의 각 요소를 순차적으로 처리하면서 누적된 값을 반환합니다. 배열의 항목을 반복하면서 각 항목을 결합하거나 변형할 수 있는 매우 유용한 메서드입니다. reduce()는 배열을 단일 값으로 집계하거나 복합적인 작업을 할 때 강력하게 사용됩니다. 기본문법array.reduce((accumulator, currentValue, currentIndex, array) => { // 반환할 값은 accumulator}, initialValue); accumulator : 누적된 값. 이전 반복에서 반환된 값이 여기에 들어옵니다.currentValue : 현재 배열의 값currentI..
Nullish Coalescing Operator(??)Nullish Coalescing Operator 는 JavaScript에서 null또는 undefined 일때만 기본값을 제공하는 연산자입니다. 이 연산자는 값이 없거나 정의되지 않은 경우에만 기본값을 설정하고, 그 외의 경우에는 원래 값을 그대로 유지합니다. ?? 는 ES11(ECMAScript 2020)에서 도입되었으며, null 과 undefiend 외의 falsy 값(빈 문자열, 0, flase, NaN)을 기본값으로 처리하지 않기 때문에 , 보다 정확한 기본값 처리가 가능합니다. 기본문법let result = value ?? defaultValue; ?? 와 || (OR 연산자)의 차이점?? 와 || 는 기본값을 설정하는 방식에서 차이가 ..
Optional Chaining (?.)Optional Chaining은 JavaScript에서 null이나 undefined 값에 접근할 때 발생할 수 있는 에러를 방지하기 위해 도입된 문법입니다. 이 문법을 사용하면, 객체의 중첩된 속성에 접근할 때 해당 속성이 존재하지 않으면 undefined 를 반환하여 에러를 방지할 수 있습니다.Optional Chaining (?.)은 객체의 속성에 안전하게 접근할 수 있도록 도와줍니다. 만약 중간에 null 이나 undefined가 있다면, 해당 체인의 평가를 중단하고 undefined를 반환합니다. 이를 통해 코드가 중단되는 문제를 방지할 수 있습니다. ?. 문법의 기본 사용법1. 객체 속성 접근const user = { name: "John", addre..
flatMap()flatMap()은 JS의 배열 메서드 중 하나로, 배열을 변형하고, 평탄화하여 새로운 배열을 반환하는 함수입니다. 이 메서드는 배열의 각 항목에 대해 변형 작업을 한 후, 그 결과로 나온 배열을 하나로 합쳐주는 역할을 합니다. 기본 사용법const numbers = [1, 2, 3];const flattened = numbers.flatMap(num => [num, num * 2]);console.log(flattened); // [1, 2, 2, 4, 3, 6]const nestedArrays = [[1, 2], [3, 4], [5, 6]];const flattenedArray = nestedArrays.flatMap(arr => arr);console.log(flattenedArra..
