작심삼일 개발이야기

팀원들과의 토론을 통해 새로운 인사이트를 얻게 되었습니다. 예를 들어, 다음과 같은 코드를 살펴보았습니다. const TABS = [{key: "a", label: "A"}, {key: "b", label: "B"}] as const 이 배열은 TABS[0].key나 TABS[1].key와 같이 인덱스를 통해 특정 값을 가져올 수 있습니다. 그러나 이런 방식은 함정을 감추고 있습니다. 만약 배열의 요소가 변경된다면, 예를 들어 TABS[0].key의 값이 'a'에서 'c'로 변경된다면, 코드 전체에서 예상치 못한 문제가 발생할 수 있습니다. 또한, Array.prototype.find() 메서드를 사용하여 원하는 값을 찾는 것도 좋은 방법입니다. 이 방법을 사용하면 배열을 순회하면서 조건에 맞는 값을 찾..

api 통신을 하다보면 조건에 따라 객체를 생성할 필요가 있다. 예를 들어 아래의 코드와 같은 상황이 생긴다. const obj = {} if(필터 조건이 있을 때){ obj.type = filter obj.id = api에 필요한 id 값 } else { obj.id = api에 필요한 id 값 } 새로운 방법을 알기 전 까지 많은 if문을 통해서 객체를 관리했었는데 지금 소개하는 방법을 사용하면 코드양을 많이 줄일 수 있고 더욱 직관적으로 코드를 읽을 수 있다. const obj = { ...(filter && {type : filter}), id : api에 필요한 값 }

배열을 객체로 변환하는 3가지 방법 object.assign() array.reduce() spread 연산자 사용 1. object.assign() const array = ['a','b','c']; const obj = Object.assign({}, array); console.log(obj) // {0: 'a', 1: 'b', 2: 'c'} 2. array.reduce() const array = ['a', 'b', 'c'] array.reduce(function(object, value, index) { object[index] = value; return object; }, {}) // {0: 'a', 1: 'b', 2: 'c'} 여기서 나는 키 값이 1부터 시작하기를 원해서 reduce를 사..

Lookup Table? 자료를 찾아봐도 많은 정보를 얻지 못했다. 짧지만 어떤 느낌인지는 파악할 수 있어서 간단히 적어본다. 사용하는 이유 매번 계산할 필요 없이 저장돼 있는 값을 참조하면 답을 구할 수 있다. country의 값을 보고 해당하는 나라명을 계산할 때 아래의 함수를 사용할 수 있다. const getCountry = (country) => { if ( country === 'us' ) return 'USA'; if ( country === 'jp' ) return 'Japan'; if ( country === 'vn' ) return 'Vietnam'; return 'Korea' } 물론 switch문을 사용해서도 같은 결과를 얻을 수 있다. 하지만 Object를 사용해서 더 효율적으로 ..

파일을 모듈화 시켜서 사용할 때 export, export default를 사용하는 건 알고 있다. 근데 잘 모른다. 한번 정리해둬야지... 차이점 export export 한 이름으로 import 해야 한다. 원하는 이름으로 하려면 as를 사용해야 한다. export default 원하는 이름으로 import 할 수 있다. 파일당 하나만 export가 되는 거라 무슨 이름을 써도 상관없는 것 같다. // index.js export default hello = () => { cnosole.log('hello'); } export hi = () => { console.log('hi'); } // main.js // hello 함수가 import 된다. 이름을 변경해서 사용가능 import hellohel..

localStorage와 sessionStorage는 웹 브라우저에 데이터를 저장할 수 있다. 위 사진은 크롬 브라우저의 개발자 도구의 화면이다. 애플리케이션 탭을 클릭하게 되면 localStorage(로컬 스토리지) sessionStorage(세션 스토리지)를 확인할 수 있다. 물론 데이터 삭제도 가능하다. 추가는 잘 모르겠다... (가능하면 알려주세요) 페이지를 새로 고침 하거나 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아있다. 물론 localStorage와 sessionStorage 둘 다 그렇다는 건 아니다. 여기서 상황에 맞게 사용해야 한다. 가장 큰 차이점은 브라우저를 다시 실행했을 때 데이터가 남아있냐 없냐 차이다. 브라우저를 다시 실행하면 localStorage는 데이터가 남아있고..

const form = new FormData(); form.append("name", name); form.append("age", age); console.log(form); 이렇게 formData를 확인하려 console.log를 실행해도 내가 원하는 정보를 얻지 못한다.. formData는 단순한 객체가 아닌 XMLHttpRequest 전송을 위해 설계된 특수한 객체 형태라고 한다. 문자열화할 수 없는 객체이기 때문에 console.log를 사용해서 확인 할 수 없다. // FormData의 key 확인 for (let key of formData.keys()) { console.log(key); } // FormData의 value 확인 for (let value of formData.value..

객체에 접근할 때 프로퍼티가 없어도 에러 없이 접근할 수 있는 양날의 검(?) 같은 문법이다. let person = {}; console.log(person.name.firstName); //TypeError: Cannot read properties of undefined (reading 'firstName') 이렇게 객체에 존재하지 않는 프로퍼티에 접근 하려면 에러가 발생한다. 그래서 개발을 할 때 보통 &&를 사용해서 존재하지 않는 프로퍼티에 접근할 때 사용하곤 했다. let person = {}; console.log(person && person.name && person.name.firstName); //undefined 물론 이런 방법도 있지만 객체의 단계가 깊어지면 깊어질수록 코드의 길이..