리액트 네이티브에서 슬라이드 버튼을 구현하기 위해 웹의 리액트처럼 translateX 기능이 있는지 궁금하여 찾아보니 Animated 네임스페이스가 리액트 네이티브에서 애니메이션을 담당한다는 것을 발견했다.아래는 애니메이션에 관련된 함수나 클래스들을 묶어놓은 네임스페이

위 코드는 배열 상태에 새로운 객체를 추가하는 기능을 하고 있다.새로운 요소를 추가하는 식으로 상태를 업데이트하는게 아니라기존의 배열 안의 위 객체를 수정해주려면 어떻게 해야할까 생각해보게 되었다.위 방식으로 수정해준다면 상태를 사실 업데이트하는게 아니게 된다.상태의

또 다른 방식으로는두번째 타입이 가독성이 떨어지고 내장되어 있는 ReadonlyArray 타입이 더 가독성이 좋다고 생각한다.

takeArray 함수 안으로 들어간 people 배열은 readonly로 인식되고 변경 불가능해진다. 이렇게 함수 내부에서 인자에 대해 readonly를 걸어주면 매번 데이터를 만들때마다 readonly 타입을 지정해줄 필요가 없다. 효율적인 함수 설계라고 생각이 든

PropsWithChildren 타입을 이용하여 Props에 children 속성을 패스할수 있게 지정해준다.이 코드에서 핵심 포인트는 두가지라고 생각했다.React.isValidElement()React.cloneElement()배열에 들어있는 각 아이템들을 렌더링

제네릭 컴포넌트 선언 사용

앱이 카메라 접근에 대해 허가를 받아야하는 상황입니다.npm i react-native-permissions경로: ios/MyApp/Info.plistinfo.plist 파일을 열고 아래 키 밸류 값을 추가해줍니다.reactNativePermissionIOS 항목 추가

interface로 선언된 타입의 경우 implicit index signature 가 지원되지 않는다고 합니다.type alias의 경우는 암묵적 index signature 가 적용되어 index signature를 명시적으로 선언하지 않아도 타입 체크를 통과하는

자바스크립트에서 이벤트리스너를 사용할때 e.target.innerText 를 사용한 적이 있던 기억이 있었기에 타입스크립트에서 아래와 같은 코드가 정상작동하리라 생각했다.위 코드에서는 innerText 부분에서 에러가 발생했는데 이유는 e.target의 타입이 Even

readonly 키워드를 모든 속성에 지정해주는 작업을 반복하는 걸 줄여주는 법이 있었다..Readonly 유틸리티 타입을 사용하는 것이었다.tsc의 타입 체크를 확인해보면 아래와 같이 의도한대로 모든 속성에 readonly 가 적용되었음을 알 수 있다.

Cage 인터페이스에 animal속성은 readonly가 아니므로 수정가능한 상태다.

이 책의 저자는 프론트 엔드 개발을 프레임 워크 없이 하자는 주의를 갖고 있으나 그렇다고 프레임 워크를 아예 배제하자는 극단적인 사고 방식을 갖고 있지는 않은 것으로 보인다.이 책의 장점은 프론트 엔드 개발의 역사를 초반부에서 간략히 소개해주면서 프론트 엔드 개발자가

회사 업무에서 경로 처리 문제에서 애를 먹고 있었다.예를 들어, 커뮤니티 페이지가 있고 그 페이지에 여러 종류의 카테고리 메뉴가 있다고 가정하자.이 여러 종류의 카테고리 메뉴는 각각 다른 게시판에 연결이 되어 있다.위 소모임 카테고리에는 3개의 게시판이 할당되어 있고

먼저 리액트의 구성요소인 아래 두 패키지를 설치해준다.그리고 타입스크립트로 작성할 것이기 때문에 타입스크립트도 설치해준다.그 후 프로젝트의 기본 뼈대를 만들기 위한 코드를 작성해주자. 타입스크립트는 빌드된 웹앱에서는 아무 역할이 없기 때문에 devDependencies

자바스크립트 버전 중 ES6(ECMAScript 2015) 이상의 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스크립트 코드로 바꿔주는 혹은 트랜스파일(transpile) 해주는 자바스크립트 컴파일러라고 공식 홈페이지에서 정의하고 있다.react 프로젝트를 세팅

api 함수를 react-router-dom에서 제공하는 loader를 사용하면 컴포넌트가 렌더링 되기 전에 api와 통신후 응답을 받고나서 렌더링에 들어가는 것을 확인했다.컴포넌트 마운트 단계에서 상태에 api에서 받아온 값이 화면에 뿌려지지 않는 이슈를 해결할 수

Object.keys()는 객체의 키값들을 배열에 집어넣고 그 배열을 리턴해주는 메서드. 위 메서드는 아래와 같은 패턴으로 자주 쓰였다. 위 코드를 작성해보니 에러가 발생하는 것을 발견했다. obj의 타입을 보면 키값은 string 리터럴로 되어있다.

tsconfig.jsonindex.ts에 아래의 에러가 발생.타입 체크를 통과하지 못했지만 컴파일은 진행된다.타입스크립트와 기존의 정적 타입 언어들의 다른점은 타입스크립트는 타입 체크와 컴파일이 독립적으로 작동. 기존 정적 타입 언어들은 의존적으로 작동하여 타입 체크

위 코드의 target 타입을 보면 유니온 타입이 명시적으로 지정되어 있으나 Machine 타입과는 전혀 관련이 없는 독립적인 타입으로 Machine 타입에 변경이 생겼을 경우에도 개발자가 일일이 찾아서 유니온 타입을 변경해줘야한다. 타입 체커는 개별 타입으로 인식해