공부 | typescript 제네릭 정리
2022. 11. 20. 21:25
공부/공통
타입스크립트 제네릭 정리 ❓상황 타입스크립트 기본 개념 중 하나인 제네릭 정리 📖 제네릭이란? 재사용성이 높은 컴포넌트를 만들 때, 자주 활용되는 기법이다. 특히, 한가지 타입보다는 여러가지 타입이 동작하는 컴포넌트를 만들 때 주로 활용된다. 🧮 정리 기본 문법 제네릭은 변수명 뒤쪽에 꺽쇠()와 타입을 넣으면 된다. 이때, 타입은 string, number가 아닌 제네릭 타입 변수를 넣어준다. 주로 알파벳 T를 사용한다. 그리고 제네릭 타입변수 T를 일반 타입(number, string )처럼 활용하면 된다. 제네릭 함수 만약 함수의 인자가 어떤 타입이 들어올지 몰라 any 타입으로 지정한다면, 함수의 return 타입도 또한 any 타입이다. function foo(name: any): any { re..
오류 | git push -u origin main
2022. 11. 18. 02:10
공부/오류
error: failed to push some refs to 'https://github.com/tenenger/-------------' ❓상황 git push -u origin main 명령어 입력시, 발생한 오류 🔎 원인 파악 현재 로컬 branch의 이름이 master인데, git hub에 push할때는 main branch를 push하겠다고 하니 컴퓨터가 오류를 내뱉는 것이었다. 그런데, 내 git hub 계정에는 초기 branch 이름을 main으로 설정했는데, 왜 master branch가 생겼을까 의문이 들었다. 알고보니, 예전 master branch를 clone을 해서 내 컴퓨터에 복사했기때문에, main branch가 아니라 master branch가 생긴것이었다. 참고로 알아두면 ..
공부 | typescript enum 정리
2022. 11. 12. 14:36
공부/공통
타입스크립트 enum 정리 ❓상황 타입스크립트 기본 개념 중 하나인 enum 정리 📖 typescript 란? 자바스크립트에 타입이 추가된 자바스크립트 확장버전이라고 생각하면 쉽다. 기존에 자바스크립트를 사용할때는, 코드 작성시에 타입을 적지 않기때문에 구문에러가 발생해도 코드상에는 문제가 없기때문에 오류를 발견하기 어렵다. 만약, 코드 작성할때 타입을 명시한다면 타입스크립트를 자바스크립트로 컴파일하는 단계에서 구문에러가 catch 되는 연유로인해, typescript가 javascript보다 더 사랑받는 존재이지 않나 싶다. 🧮 정리 기본 문법 자바스크립트의 객체 형태와 유사하게 key는 문자열, value는 숫자나 문자열을 갖는 형태로 나타낼 수 있다. enum Direction { Up = 'Str..
오류 | addEventListener 이벤트 탐지
2022. 10. 25. 23:09
공부/프론트엔드
자바스크립트로 HTML 요소 추가시 기존에 등록한 addEventListener 이벤트가 정상적으로 작동하지 않는다. ❓상황 자바스크립트로 HTML 요소를 innerHTML로 추가시 기존에 등록한 addEventListener 이벤트가 정상적으로 작동하지 않는 상황 🔎 원인 파악 오류가 아니라, innerHTML로 HTML 요소를 추가하면, 형제 노드와 하위 노드에 등록된 addEventListener가 없어진다고 한다. [javascript] 자손의 이벤트 리스너를 파괴하지 않고 innerHTML에 추가 할 수 있습니까? - 리뷰나라 다음 예제 코드에서는 onclick“foo”라는 텍스트가 포함 된 범위에 이벤트 핸들러를 연결합니다 . 핸들러는 alert(). 그러나 부모 노드의에 할당하면 innerH..
공부 | HTML, CSS 말 줄임(단일 행, 다중 행) 스타일 정리
2022. 10. 12. 21:46
공부/프론트엔드
단일 행과 다중 행에서 글자가 많을 경우 말줄임(...) 스타일 적용하기 ❓상황 단일 행과 다중 행 말줄임을 강의 수강했을때 처음 접하게 되었고, 이를 학습하여 정리하게 되었음. 📖 말 줄임이란? 글자의 길이가 긴 경우, 특정 구간을 넘어가면 ...을 표시하여 텍스트의 길이를 제한할 수 있다. 흔히 쇼핑몰에서 텍스트가 많은 상품명이 있는 경우가 많다. 의식하진 않았겠지만, 텍스트가 많다고해서 디자인이 뒤틀리거나 하지 않다. 그 이유는 말 줄임 스타일을 적용함으로써 디자인을 변화시키는 것을 감소하기 때문이다. 🧮 정리 말 줄임 : 단일 행 텍스트의 양이 많아서, 한 줄로 표현되지 않고 여러줄로 표현되었다고 가정해보자 Lorem Ipsum is simply dummy text of the printing a..