전체 글

컴포넌트의 props에 컴포넌트를 넘겨야 할 때, props의 이름과 컴포넌트의 타입을 선언해주어야 한다. import { JSX, ReactElement, ReactNode, useEffect, useState } from 'react' interface Props { component: ReactElement component1: JSX.Element component2: ReactNode } 하지만 이 컴포넌트의 타입은 `ReactElement` , `Element` , `ReactNode` 세가지가 있으며, 세가지 모두 리액트의 요소를 나타낸다. 이 타입들의 차이는 무엇이 있을 지 알아보자. ReactElement 리액트에서는 JSX 문법으로 UI를 표현하고, 트랜스파일러는 JSX문법을 crea..

타입스크립트에서는 조건에 따라 다른 로직을 실행할 수 있다. Condition ? true : false 삼항연산자를 활용한 조건부 로직 그렇다면, 타입도 조건에 따라 다르게 할당할 수 있을까? 예를들면, Condition이 true면 AType, false면 BType 처럼 말이다. 조건부 타입이 필요한 상황 타입에도 조건부 를 부여할 수 있다. 즉 , 조건부 타입이 가능하다. 현업에서 조건부 타입이 필요했던 상황과 활용방법에 대해 알아보자. 요구사항 요구사항은 버스와 지하철, 사무기관의 정보를 보여주는 화면을 개발하는 것이였다. 서버에서 내려주는 spec은 아래와 같았다. type Bus = { name: string lat: number lng: number } type Subway = { name..

이 게시글은 실무에 바로 적용하는 프런트엔드 테스트 강의를 듣고 정리한 게시글 입니다. 더 자세한 내용과 예시는 강의 참고를 추천드립니다. 올바른 테스트 코드를 작성하려면 어떤 규칙이 있을까요? 1. 테스트코드는 인터페이스 기준으로 작성합니다. React 컴포넌트를 컴포넌트한다고 했을 때, 컴포넌트 내부의 state를 강제로 직접 변경해서 테스트하는 것이 아닌, 컴포넌트와 통신할 수 있는 외부의 인터페이스를 통해 테스트를 해야 합니다. 위의 코드는 `SpecificComponent` 의 `isShowModal` state를 강제로 수정하여 테스트하고 있어요. 이럴때 생기는 문제점은 뭐가 있을까요? 1. 변경되는 상태가 많은 경우, 테스트코드 상에서 하나하나 직접 변경해주어야 합니다. 2. 어떤 상황에서 ..

sdk 설치파일 다운받기 https://docs.flutter.dev/get-started/install/macos Choose your first type of app Configure your system to develop Flutter on macOS. docs.flutter.dev 들어가면, Desktop, IOS, Android, Web 네가지가 있는데, 아무거나 클릭해도 상관 없습니다. 저는 IOS 눌러서 들어갔어요. 본인 Mac 운영체제가 Intel인지, Silicon 인지 잘 확인하고, 운영체제에 맞는 설치 zip 파일을 다운받아주세요. 저는 Silicon 버전으로 받았어요. 설치된 파일이 Download 폴더에 저장이 될텐데요, 찾기 쉬운 폴더에 압축을 풀어주세요. mac 기준으로 Fi..