제네릭 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이다. 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. TS에서 제네릭은 클래스, 인터페이스, 함수에서 쓸 수 있음(제네릭 함수, 제네릭 인터페이스, 제네릭 클래스) 제네릭은 타입에 대한 함수라고 생각하면 된다는 ..제로초님 (선생님의 머리를 갖고싶어요) function add(x: T, y: T): T { return x + y } add(1, 2); add(1, 2); add('1', '2'); add('1', '2'); add(1, '2'); 제네릭 선언 위치 기억하기 function a() {} class B(..
타입스크립트 4.8 업데이트에 추가된 타입 {} Object (대문자로 시작) -> 이 두가지 타입은 모든 타입을 가리키며 모든 값을 받을 수 있다. (null과 undefined는 제외) unknown도 any와 마찬가지로 모든 값을 받을 수 있는데 unknown이 4.8버전부터 {} | null | undefined 와 같이 성립되기 때문에 조건문에 들어갔을 때 아래와 같이 된다. const z: unknown = "hi"; //모든 타입이 들어가기 때문에 hi도 들어갈 수 있다. if (z) { z; //z의 타입이 {}이다. 파라미터로 들어온 z 는 unknown인데 true일때는 {}인 것 } else { z; //unknown } 실제로 객체 타입은 object가 있는데 string의 원시값을..
//타입 좁히기(타입 가드) { function numOnStr(a: number | string) { // if (typeof a === "string") { // a.split(","); // } else { // a.toFixed(1); // } a.toFixed(1); // number면 쓸 수 있지만 string일수도 있기 때문에 Error } numOnStr("123"); numOnStr(1); } -> 매개변수 타입이 number라면 toFixed 메서드를 사용할 수 있지만 string일수도 있기 때문에 내부에서 바로 쓰게되면 빨간 줄로 에러가 뜬다. TS에러 메세지가 여러 줄이 뜰 때에는 결국에는 마지막 줄을 보면 된다. 마지막 줄에 원인이나 해결방법이 나와있다. 위에 a.toFixed를 ..
CHAPTER 1 this에 대한 오해들 function identify() { return this.name.toUpperCase(); } function speak() { let greeting = 'hello, I am' + identify.call(this); console.log(greeting); } let me = { name: 'alex', }; let you = { name: 'rachel', }; identify.call(me); identify.call(you); //me & you 의 이름 대문자변환 speak.call(me); //hello, I amALEX speak.call(you); //hello, I amRACHEL -> indentify()와 speak() 두 함수는 객체..
실제 업무를 겪으면서 FE개발자가 해결해야할 보안적 이슈(권한이 없는 사용자, 웹 스토리지), 비동기 처리, JWT 토큰 refreshtoken의 특징, API 요청이 여러 개 갔을 때(비동기 처리의 연장선) 그리고 무한 스크롤 페이징 처리 시 DOM의 최적화 등 해결방법에 대해 FE개발자님과 얘기를 나눴습니다. 외에도 최근에 관심있는 툴이나 제가 개인적으로 궁금했던 점을 여쭤볼 수 있었는데요. 개인적으로 이런 기회가 쉽게 있지않아 저에게는 값진 시간이었습니다. 아 또한, Next에 대해서도 여러가지 견해를 들을 수 있었습니다. 예를 들어 Next가 제공하는 이미지 최적화가 정말 효율적인가에 대해서 얘기하였는데 제공하는 기능을 그냥 갖다쓰는 것이 아니라 어떤 방법이 베스트인가부터 비교하면서 잘 생각하고 ..
TCP/IP 없는 인터넷 서비스는 상상할 수 없다. 우리가 개발하고 사용하는 모든 인터넷 서비스는 TCP/IP라는 토대에 기반하고 있다. 어떻게 네트워크를 통해 데이터가 오가는지를 이해하면, 튜닝 등을 통한 성능 개선이나 트러블 슈팅, 신기술 도입 등에 많은 도움이 된다. TCP/IP의 중요한 성질 데이터의 순서가 바뀌지 않으면서 데이터가 유실되지 않도록 가급적 빠르게 데이터를 보내려면 네트워크 프로토콜을 어떻게 설계해야 할까? TCP/IP는 이런 고민 아래 설계된 것이다. TCP와 IP 엄밀히 말해 TCP와 IP는 서로 다른 레이어의 것이라 분리해서 이해하는 것이 옳지만, 이해의 편의상 여기서는 이 장에서는 둘이 분리하지 않고 설명한다. Connection oriented 두 개의 엔드포인트(로컬, 리..
query param == query string (e.g. user?id=23) path param == path parameter (e.g. user/23 ) *용어를 섞어 쓰지만 위와 같은 의미로 해석하시면 됩니다. day에 해당하는 day word list를 삭제하는 것은 다른 툴을 추가하지 않고 순수 react로는 작업이 번잡해진다. word 컴포넌트에서 props를 받아 렌더링하고 있으므로 부모 컴포넌트인 Day에서 word의 상태가 변화됨을 감지하고 변화된 내용을 감지하려면 word의 deleteWord 함수를 역으로 올려줘야 할 거 같음 react-query를 통해 서버 데이터의 변화가 일어났을 때, 클라이언트의 state값을 변경시켜주는 게 베스트 방법일 듯 특히, wordList는 da..
우선 기존에 create-react-app 으로 만든 폴더를 TS를 적용하여 마이그레이션한다고 했을 때, 노드 패키지 매니저(npm or yarn)으로 typescript를 설치해줍니다. typescript만 추가하는게 아니라 아래와 같이 여러 개의 패키지를 추가로 설치해줍니다. npm i typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom js확장자를 ts로 변경하고 jsx 를 tsx로 변경해줍니다. 👾컴포넌트를 .ts 확장자로 변환하면 jsx를 제대로 인식하지 못하고 에러를 토해내는 에러를 만났습니다. jsx를 반환하고 있는 컴포넌트는 tsx로 변환해주면 되고 jsx를 반환하지 않는 js파일은 ..
- Total
- Today
- Yesterday
- getStaticPaths
- 항해99프론트후기
- nvm경로 오류
- aspect-ratio
- && 셸 명령어
- 형제 요소 선택자
- text input pattern
- 프리온보딩 프론트엔드 챌린지 3월
- is()
- nvm 설치순서
- 원티드 프리온보딩 FE 챌린지
- 항해99추천비추천
- tilde caret
- 프리렌더링확인법
- ~ ^
- 부트캠프항해
- getServerSideProps
- 원티드 FE 프리온보딩 챌린지
- float 레이아웃
- Prittier
- 타입스크립트 장점
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- fs모듈 넥스트
- 항해99프론트
- 틸드와 캐럿
- 타입스크립트 DT
- 원티드 3월 프론트엔드 챌린지
- D 플래그
- grid flex
- reactAPI
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |