분류 전체보기
-
click 이벤트보다 blur 이벤트가 먼저 발생하는 문제et cetera/Trouble Shooting 2021. 12. 24. 04:01
■ 상황 드롭다운 input 컴포넌트를 직접 구현하는 상황이었다. input 하단의 드롭다운 메뉴에 있는 item들에게 click 이벤트를 걸어놨고, input에서 focus가 다른 쪽으로 옮겨가면, 즉 blur가 되는 순간 드롭다운 메뉴가 사라지게끔 구현을 해놓은 상황. 드롭다운 메뉴를 펼쳐서 item을 클릭하려고 했는데, 갑자기 드롭다운 메뉴가 사라져버렸다. ■ 상세 드롭다운 메뉴의 item에 걸린 click 이벤트가 발생하기 전에 input의 blur 이벤트가 먼저 발생했기 때문. mouse를 누르고나서, 눌렀던 손가락을 떼는 순간 mouseup이 발생하면서 동시에 click 이벤트가 발생한다. 그 예로, 버튼에 onclick 이벤트를 달고 버튼을 꾹 누른 채 마우스를 떼지 않으면 click 이벤트..
-
타입스크립트 강의 내용 정리 (2)et cetera/TIL 2021. 12. 23. 19:48
■ 제네릭(Generic) function logText(text: string): string { console.log(text); return text; } function logNumber(num: number): number { console.log(num); return num; } logText('a'); logNumber(10); 유사한 함수를 두 개 선언하고 있다. 이 경우, 코드를 줄일 수 있는 방법은 크게 union 타입을 활용하는 방법과 Generic을 사용하는 방법이 있다. // union type을 통한 해결 function logText(text: string | number) { console.log(text); return text; } 이 방법을 사용하면 함수 내부에서는 s..
-
타입스크립트 강의 내용 정리 (1)et cetera/TIL 2021. 12. 22. 03:35
■ 옵셔널 파라미터 해당 파라미터는 포함해도되고 포함하지 않아도 된다. function log(a: string, b?: string) {} ■ Type Aliases vs. Interface 1. 타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 이미 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다. 2. 가장 큰 차이점은 확장 가능 여부. 타입은 확장이 불가능하다. 따라서 가능한 한 type보다는 interface로 선언해서 사용하는 것을 추천. ■ 타입 가드 특정 타입으로 타입의 범위를 좁혀나가는(필터링하는) 과정 function logMessage(value: string | number) { if (typeof value === 'number') { // 이 i..
-
visibility, display, opacity 그리고 조건부 렌더링Web/React 2021. 12. 14. 19:22
React를 사용하다가 컴포넌트의 렌더링과 관련해서 헷갈리는 사항이 생겨 정리했다. visibility: hidden과 opacity: 0은 모두 해당 요소가 화면에 렌더링되지만 투명하게 보이게끔 만들어준다. 하지만 둘 다 요소를 투명하게 보이게 할 뿐, 해당 요소는 여전히 자리를 차지한다. (차지하는 자리만큼 뻥 비어보이게 된다) 둘의 차이점이라면 visibility: hidden은 뒤에 있는 요소를 클릭할 수 있지만, opacity: 0은 불가능하다는 것. 반면, display: none은 해당 요소를 DOM 트리까지만 가져가고 렌더 트리에서는 제외해준다. 즉, 레이아웃에 포함되지 않는다. 그래서 해당 요소가 자리조차도 차지하지 않게 된다. 하지만 DOM 트리까지 해당 요소를 가져가야 하기때문에, 해..
-
React.memo와 useCallback, useMemoWeb/React 2021. 12. 13. 19:20
■ React.memo React.memo는 고차 컴포넌트. 컴포넌트의 렌더링 결과를 Memoizing 함으로써, 이후의 불필요한 리렌더링을 건너뛴다. 이전 렌더링과의 비교는 'props가 같은지'로 판단. (이전 렌더링 때와 props가 동일하다면 Memoizing 결과 재사용) props 객체를 비교할 때는 얕은(shallow) 비교를 사용한다. 비교 방식을 수정하고 싶다면 두 번째 인자로 비교 함수를 만들어 넘겨주면 된다. export const Component = ({ prop, anotherProp }) => { return ( prop1: {prop} prop2: {anotherProp} ); } export const MemoizedComponent = React.memo(Component..
-
default export를 피해야 하는 이유?Web/자바스크립트 2021. 12. 4. 02:14
우아한테크코스 크루인 도비의 블로그를 보다가, 기억해두면 좋겠다 싶은 내용이 있어 원문을 읽어본 후 짧게 정리한 글. ES Modules의 default exports는 기존에 존재하던 'CommonJS 모듈 시스템'과의 호환을 위한 타협. 기존의 CommonJS 모듈은 다음과 같은 형태를 띠고 있기 때문이다. (객체로 export하는 형식) 호환성을 위해 지원되는 문법일 뿐, 여러모로 비효율적인 부분들이 많다고 한다. module.exports = function() {...} 1. default exports는 import하는 곳에 따라 자유자재로 이름을 붙여줄 수 있기 때문에, 같은 모듈이더라도 사용처에 따라 이름이 달라질 수 있다. 이는 곧 큰 단위의 리팩토링을 어렵게 만드는 요인이 된다. 반면,..
-
Javascript Visualized: Promises & async/awaitet cetera/TIL 2021. 12. 4. 01:26
■ Promises & async/await async function은 무조건 Promise를 return한다. await 키워드는 async 함수 내부에서만 사용 가능. 엔진이 await 키워드를 만나면 async 함수는 중단된다. 해당 await 키워드 이후의 async 함수(나머지 부분)는 microtask queue로 들어간다. 그리고 async 함수를 벗어나, 해당 async 함수가 호출된 실행 컨텍스트의 나머지 코드들을 마저 실행한다. 콜스택이 완전히 비게 되면, 이벤트루프가 대기 중인 task가 있는지를 찾아 microtask queue와 macrotask queue를 살펴본다. microtask queue에는 아까 들어왔던 'await 키워드 이후의 async 함수 부분'이 대기중이므로 ..
-
2021년 11월 넷째 주 기록Diary 2021. 12. 1. 04:22
1. 이펙티브 타입스크립트 스터디에 참가했다. 마침 타입스크립트 공부의 필요성을 느끼던 참에 하루가 스터디를 열어줘서 냉큼 참가하게 됐다. 이렇게 끊임없이 자극을 주는 사람들과 함께할 수 있다는 건 큰 축복이다. 괜스레 우아한테크코스에 또 한 번 감사를 느끼게 된다. 2. 생활 습관 스터디도 참가했다. 생활 습관 스터디는 얼마나 잘 참여할 수 있을지 잘 모르겠지만... 일단 이제 곁에서 직접적인 동기부여를 해줄 사람들이 사라졌기 때문에 인증 방식으로나마 사람들이 열심히 사는 모습을 보면서 동기 부여를 얻어야겠다. 3. 우아한테크코스 3기 프론트엔드 과정을 수료했다. 10개월 간의 대장정이 막을 내렸다. 사실 대장정이라고 하기엔 순식간에 지나가버려서 언제 끝났나 싶을 정도. 어디서 이런 사람들만 모아서 갖..