작심삼일 개발이야기

팀원들과의 토론을 통해 새로운 인사이트를 얻게 되었습니다. 예를 들어, 다음과 같은 코드를 살펴보았습니다.const TABS = [{key: "a", label: "A"}, {key: "b", label: "B"}] as const 원하는 값이 'a', 'A', 'b', 'B'일 때 해당 배열의 TABS[0].key나 TABS[1].key와 같이 인덱스를 통해 특정 값을 가져올 수 있습니다. 그러나 이런 방식은 함정을 감추고 있습니다. 만약 배열의 요소가 변경된다면, 예를 들어 TABS[0].key의 값이 'a'에서 'c'로 변경된다면, 코드 전체에서 예상치 못한 문제가 발생할 수 있습니다. 지금까지 해당 배열의 특정 인덱스의 요소가 내가 원하는 값과 일치했을 뿐이라는 생각이 들었습니다. 생각한 방법은 ..

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 물론 이런 방법도 있지만 객체의 단계가 깊어지면 깊어질수록 코드의 길이..