전체 글
-
221103 TIL하루 30분 TIL 2022. 11. 4. 00:34
1. width : min-content/ max-content / fit-content 동료의 코드를 보다 어떤 것인지 궁금해서 찾아봤다. min-content 와 max-content는 담고 있는 컨텐트에 의해 width의 값이 결정됨 min-content는 엘리먼트의 너비를 줄일 수 있을 만큼 최소로 줄이고 싶을 때 사용, max-content는 너비를 최대한 늘이고 싶을 때 사용, 텍스트의 배경색을 적용할 때 유용하게 사용 fit-content max-content와 auto의 하이브리드 모드 가용너비가 부족하지 않은 경우 max-content처럼 컨텐트의 최대 너비를 엘리먼트의 width값으로 사용 그러나 가용너비가 부족한 경우 auto 처럼 가용 너비에서 여백(margin)읠 제외한 너비를 w..
-
221102 TIL(Attrs)하루 30분 TIL 2022. 11. 2. 00:58
1. Styled-Components Attrs required의 property를 가지는 input 컴포넌트를 아래와 같이 여러개 쓴다고 가정하자 똑같은 props를 매번 써주기 귀찮다. 이럴 때 쓰는 것이 attrs const Input = styled.input.attrs({ required: true })` background-color:red ` 즉, html tag가 갖고있는 고유의 attribute를 넣어 재사용하기 위한 컴포넌트를 만들 때 attrs()를 사용하면 유용하다 Use styled components for static styles and dynamic styles that don't change very often; Use inline styles (through .attrs)..
-
221025 TIL하루 30분 TIL 2022. 10. 26. 00:58
1. 렌더링 조건문에서 && 보다 삼항연산자를 쓰는 게 낫다. 🔴 BAD condition && 🟢 GOOD condition ? : null 이유는 조건이 0이라면 0이 UI에 뜰 것이고 undefined이라면 아래와 같은 에러가 뜰 것이다. if condition is 0, 0 is displayed in the UI if condition is undefined, you’ll get an error: "Uncaught Error: Error(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null." 실제로 예전에 아래와 같은 코드를 ..
-
TIL 221013(catch문에서 타입 unknown )하루 30분 TIL 2022. 10. 14. 20:02
1. catch문에서 타입 unknown TypeScript 버전 4.0 부터 캐치문에서 unknown 타입을 쓸 수 있다고 한다. 그리고 타입 체크를 하지 않은 any 타입보다 어떠한 형태로든 타입 체크를 하게 만드는 unknown이 더 안전하다. 또한 4.4부터 --useUnknownInCatchVariables 설정으로 캐치문의 디폴트 타입을 unknown으로 쓸 수 있다 참고자료 https://stackoverflow.com/questions/69021040/why-catch-clause-variable-type-annotation-must-be-any
-
[JavaScript] 이벤트 버블링/캡쳐링/ 위임JavaScript 2022. 10. 10. 17:07
오늘은 자주 접했지만 자세히 알지 못했던 이벤트 버블링, 캡쳐링, 위임에 대해서 알아보려고 한다. 1. 목표 이벤트 버블링, 캡쳐링, 위임에 대한 개념을 이해한다. 이벤트 위임의 패턴 및 사용하는 이유에 대해 이해한다. 2. 이벤트 버블링/ 이벤트 캡쳐링 이벤트 위임에 들어가기 앞서 이벤트 버블링과 캡쳐링에 대한 개념을 먼저 알아야 한다. 2-1) 이벤트 버블링 특정 엘리먼트의 이벤트 발생 시 조상까지 이벤트가 전달되는 현상 body div p const $p = document.querySelector('p') const $div = document.querySelector('div') const $body = document.querySelector('body') function Alert(messa..
-
[자료구조(스택/큐)] 괄호문자제거알고리즘 2022. 9. 25. 15:49
문제 입력된 문자열에서 소괄호 ( ) 사이에 존재하는 모든 문자를 제거하고 남은 문자만 출력하는 프로그램을 작성하세요. ▣ 입력설명 첫 줄에 문자열이 주어진다. 문자열의 길이는 100을 넘지 않는다. ▣ 출력설명 남은 문자만 출력한다. ▣ 입력예제 1 (A(BC)D)EF(G(H)(IJ)K)LM(N) ▣ 출력예제 1 EFLM 결과 O 내가 푼 방식 function solution(s){ let stack = []; for(let x of s) { if(x === ')') { if(stack.indexOf('(') === -1) { stack = []; } else { stack.splice(stack.lastIndexOf('(')) } } else { stack.push(x) } } return stack..
-
220921 TIL하루 30분 TIL 2022. 9. 21. 23:28
1. uuid, nanoid는 map 함수의 리스트의 key 값으로 적절하지 않다. 리액트는 키를 할당할 때 매번 동일한 key 값을 가지는 것을 이상적으로 본다. 하지만 uuid의 경우 변경이 생길 때마다 새로운 값을 할당하게 되므로 React가 가상 돔을 조정할 때 데이터 최적화를 할 수가 없게된다. (직접 uuid나 nanoid를 key를 넣지 않고 객체의 id 부여하는 건 괜찮다) 단순히 중복되지 않은 값에 초점을 맞추게 되어 놓치기 쉬운 실수 이다. 2. useCallback은 언제 써야 할까? 모든 최적화, 추상화의 코드는 비용을 수반한다. 그렇기 때문에 그 '비용'을 상쇄시킬 만한 '절감'이 이루어 지지 않는 다면 오히려 역효과를 내기도 한다. (메모이제이션을 위한 추가 메모리 할당, dep..