프로그래밍
[이펙티브 타입스크립트] 객체 래퍼 타입 피하기
[이펙티브 타입스크립트] 객체 래퍼 타입 피하기
2022.06.10자바스크립트와 기본형 타입 자바스크립트의 기본형 값들에 대한 7가지 타입(number, boolean, string, undefined, null, symbol, bigint) 기본형들은 불변(immutable)이며 메서드를 가지지 않는다. 하지만 'birdview'.charAt(3) 는 문제없이 실행되며, 이는 기본형 값인 ‘birdview’가 메서드를 가지고 있는 것처럼 보인다. 하지만.. chatAt은 string의 메서드가 아니다. chatAt을 사용할 때 내부동작이 발생 (기본형 string에는 메서드가 없지만, 객체 String 타입이 정의) 래퍼 객체 (Wrapper Object) 레퍼 객체는 총 3가지(Number, String, Boolean)이 있다. let name = 'birdvie..
[VScode] Turbo Console Log 마지막 줄에 찍힐 때 해결 방법
[VScode] Turbo Console Log 마지막 줄에 찍힐 때 해결 방법
2022.06.10이슈 VScode에 Turbo Console Log 유용한 확장 프로그램이 있다. console.log 하고 싶은 키워드를 select하고 control + option + L 입력시 현재 line 넘버를 포함하여 cosnole.log 를 찍어준다. 그런데 문제는 console.log 구문을 현재 파일의 최하단에 생성하는 경우가 있었다. 해결 방법 최신 버전에서 2.1 버전으로 다운그레이드하면 현재 위치에서 log를 찍어준다. 참고 - https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log - https://github.com/Chakroun-Anas/turbo-console-log/issues/108
[JS] 객체에 조건부 프로퍼티 적용하기
[JS] 객체에 조건부 프로퍼티 적용하기
2022.06.05객체에 조건부 프로퍼티 적용하기 작업 중에 query 객체에 특정 프로퍼티를 조건부로 적용해야하는 경우가 있었다. 예를 들어 page라는 param을 주는 상황에서 특정 값이 있을 때 param을 주고 싶다. const query = {}; if (page) { query.page = page; } 위 코드처럼 if문으로 query 객체에 prop을 추가해줄 수 있다. 하지만 조금 더 간단하게 짤 방법을 알아봄 const query = { ...(page && { page }) }; // 여러 params가 있는 경우 const query = { ...(page && { page }), ...(category && { category }), ...(type && { type ) }; spread 연산자..
[이펙티브 타입스크립트] 타입 공간과 값 공간의 심벌 구분하기
[이펙티브 타입스크립트] 타입 공간과 값 공간의 심벌 구분하기
2022.06.05타입스크립트의 심벌(symbol)은 타입 공간이나 값 공간 중의 한 곳에 존재한다. 심벌은 이름이 같더라도 속하는 공간(타입 or 값)에 따라 다른 것을 나타낼 수 있기 때문 // Cylinder은 타입으로 사용 interface Cylinder { radius: number; height: number; } // Cylinder로 이름은 같지만 값으로 사용 const Cylinder = () => (radius: number, height: number) => ({ radius, height }); // => Cylinder는 상황에 따라 타입 or 값으로 둘다 사용될 수 있음 function calcVolume(shape: unknown) { if(shape instanceof Cylinder) { ..
[이펙티브 타입스크립트] #4 구조적 타이핑에 익숙해지기
[이펙티브 타입스크립트] #4 구조적 타이핑에 익숙해지기
2022.06.05자바스크립트는 덕 타이핑(duck typing) 기반이다. 💡 덕 타이핑이란? 객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속하는 것으로 간주하는 방식이다. 이는 덕 테스트(The Duck Test)에서 유래되었는데, “만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다.” JS 에서 어떤 함수의 매개변수 구성 요소가 요구사항을 만족한다면, 타입이 무엇인지 신경 쓰지 않는 동작을 그대로 모델링합니다. 하지만 Type checker는 타입에 대한 이해도가 사람과 다른 면이 있어 예상치 못한 결과가 생기기도 함 ⇒ 구조적 타이핑을 제대로 이해해야만 오류를 제대로 파악할 수 있고, 견고한 코드를 짤 수 있음 interface V..
[TypeScript] e.target.target 타입 에러가 나는 이유 ts(2339)
[TypeScript] e.target.target 타입 에러가 나는 이유 ts(2339)
2022.06.041. 문제 발생 const handleSearchValue = (e: KeyboardEvent) => { setSearchValue(e.currentTarget.value); setSearchValue(e.target.value); // error 발생 }; e.target과 e.currentTarget의 type alias가 다르다구..? 외 안되?! react/index.d.ts 를 까보면 // @types/react/index.d.ts interface BaseSyntheticEvent { nativeEvent: E; currentTarget: C; target: T; // ... } - KeyboardEvent는 BaseSyntheticEvent 타입을 extends하고 있다. 2. current..
[JS] 호이스팅(Hoisting)을 이해해보자!
[JS] 호이스팅(Hoisting)을 이해해보자!
2022.01.13[JS] 호이스팅(Hoisting)을 이해해보자! 1. 호이스팅이란? 호이스팅은 어원 그대로 변수나 함수의 선언이 코드 최상단으로 끌어올려지는 듯한 현상을 말한다. var name = 'global name'; function callName() { console.log(name); // ? var name = 'local name'; }; callName(); 위 예제 코드에서 출력되는 변수 name의 값은 'global name' 일 것 같지만, undefined 이다. 특정 스코프 안에서 선언된 변수(name)는 코드에 적힌 순서와 상관없이 "최상단에서 선언한 것처럼" 끌어올려진다. 이것을 호이스팅이라고 한다. var name = 'global name'; function callName() { v..
[VS code] mac에서 완전 제거하는 방법!
[VS code] mac에서 완전 제거하는 방법!
2021.12.27[VS code] mac에서 완전 제거하는 방법! 작업시 VS Code 코드 에디터를 사용해왔는데, 최근 여러 프로젝트를 진행하면서 확장 프로그램이 불필요하게 많이 추가되고, 환경 설정이 꼬였는지 불필요한 에러들이 발생했다. 그래서 이번 기회에 앱을 완전 제거 하고 새로 설치하였다. 방법은 아래와 같다. 제거 방법 1. VS Code 프로그램 종료 2. 터미널에서 아래 명령어 실행 rm -fr ~/Library/Preferences/com.microsoft.VSCode.helper.plist rm -fr ~/Library/Preferences/com.microsoft.VSCode.plist rm -fr ~/Library/Caches/com.microsoft.VSCode rm -fr ~/Library/Ca..
[react-router-dom] Link, NavLink 차이점 정리, 리액트 라우터
[react-router-dom] Link, NavLink 차이점 정리, 리액트 라우터
2021.10.18[react-router-dom] Link와 NavLink 차이점 정리, 리액트 라우터 react에서 router 처리를 할 때, Link, Nav 두 컴포넌트를 자주 사용합니다. 정확한 이해없이 사용했던 것 같아 공식 문서를 바탕으로 특징 및 차이점을 정리해보았습니다. 공통점과 차이점 Link와 Nav 두 컴포넌트 모두 화면에 태그로 렌더링 되고, to 속성에 정의해 둔 url로 이동하는 기능을 한다는 점에서 동일합니다. 공식문서에서는 NavLink에 관해 아래와 같이 정의되어 있습니다. NavLink 는 Link의 특별한 버전입니다. 현재 URL과 클릭시 이동할 URL이 같을 경우, "style 속성" 을 추가해주는 기능을 가지고 있습니다. 스타일 외에도 추가 기능으로 선택된 NavLink의 경우 a..
[React] Forwarding Refs 로 refs 전달하기
[React] Forwarding Refs 로 refs 전달하기
2021.10.13[React] Forwarding Refs 로 refs 전달하기 이전 포스팅에서 알아본 것 처럼, 상위 컴포넌트에서 자손 컴포넌트의 DOM을 컨트롤하기 위해 ref를 전달하는 방법엔 여러가지가 있다. 그 중, React 16.3 이후 버전일 경우 사용할 수 있는 React.forwardRef에 대해 알아보려고 한다. * ref의 기본 사용방법을 알아보려면 이전 포스팅을 참고 [React] React.createRef() 에 대한 정리 [React] React.createRef() 에 대한 정리 React 프로젝트 실무를 하면서 Ref 를 많이 사용하였지만 세부적으로 학습한 적이 없었다. 이번 포스팅에서 Ref 에 관해서 공식 문서에서 공부한 내용을 바탕으 nuhends.tistory.com React.f..
[React] React.createRef() 에 대한 정리
[React] React.createRef() 에 대한 정리
2021.10.13[React] React.createRef() 에 대한 정리 React 프로젝트 실무를 하면서 Ref를 많이 사용하였지만 세부적으로 학습한 적이 없었다. 이번 포스팅에서 Ref에 관해서 공식 문서에서 공부한 내용을 바탕으로 정리해보려고 한다. Ref는 언제 사용하는가? Ref 관련 공식 문서에서는 다음과 같이 정의하고 있다. Ref 는 render 메서드에서 생성된 DOM 노드 혹은 React Element에 접근하는 방법을 제공합니다. React의 일반적인 Data Flow에서 부모와 자식 컴포넌트가 인터렉션 할 수 있는 유일한 수단은 props이다 (자식 컴포넌트를 수정 방법: 새로운 props를 전달 → 자식 컴포넌트 새롭게 렌더링) 하지만 일반적인 데이터 플로우가 아니라 자식 컴포넌트를 직접 수정..
[NodeJS] n 으로 node 버전 간단하게 변경하기
[NodeJS] n 으로 node 버전 간단하게 변경하기
2021.10.12[NodeJS] n 으로 node 버전 간단하게 변경하기 작업을 하다보면 프로젝트별로 NodeJS의 버전이 다르거나 특정 버전에서 에러가 발생하여 버전을 변경해야하는 상황이 생깁니다. n 이라는 이름의 패키지를 사용하면 간단하고 편하게 node의 버전을 관리 할 수 있습니다. n Interactively Manage All Your Node Versions www.npmjs.com 1. npm으로 n 패키지 설치 현재 사용중인 nodeJS의 버전 확인 node -v 설치전 npm cash 삭제 sudo npm cache clean -f global로 n 패키지 설치 sudo npm install -g n n 설치되었는지 확인 n -V 2. n을 사용하여 node 버전 변경하기 n 뒤에 아래 옵션 중 하나..