frontend

Typescript 경로 모듈화, 경로 정규화 과정과 5.8.0 버전에서의 최적화

개요자바스크립트나 타입스크립트 프로젝트에서 모듈이나 컴포넌트를 불러 올 경우 다음과 같은 형태로 모듈이나 컴포넌트를 불러오는 경우를 많이 경험할 수 있다.import { whereAmI } from "../../../../../../where/the/hell/are/you";상대 경로와 절대 경로를 사용해서 모듈이나 컴포넌트를 불러오는 방법은 매우 일반적이지만 이보다 더 좋은 방법을 소개하려고 한다.기존의 문제점상대 경로 상대 경로 방식으로 모듈을 불러오는 방식은 매우 간편하다는 장점이 있다. 일반적인 IDE에서는 내부 모듈의 위치를 상대 경로로 자동으로 작성해준다. 하지만 모듈을 다른 폴더로 옮길 경우에 해당 모듈을 사용하는 모든 파일의 경로를 수정해야 한다. 물론 이와 같은 경우에도 IDE가 알아서 ..

Typescript 5.8.0의 조건부 반환 타입 검사 기능

개요Typescript로 개발을 하면서 때론 매개변수의 유형에 따라 다른 타입의 값을 return하는 함수를 작성하고 싶을 수 있다.예를 들면 다음과 같다.declare const record: Record;declare const array: string[];function getObject(group) { if (group === undefined) { return record; } return array;}const arrayResult = getObject("group");const recordResult = getObject(undefined);해당 코드에서 arrayResult 변수의 타입은 string[] 이 되어야 하고 recordResult의 타입은 이 되어야..

[RN] Warning: A props object containing a "key" prop is being spread into JSX 에러

개요프로젝트를 진행하던 중 의문의 에러가 발생했다. React-Native의 Material-Top-Tab-Navigation이 있는 컴포넌트에 들어가면 해당 에러가 발생했다. 단순한 경고라고 생각하고 넘어갈 수도 있지만 콘솔에는 ERROR로 출력되는 모습이다. 나중에 앱 빌드할 때 문제가 될 수 있으니 해결하고 넘어가려 했다.해결 방법24년 5월 8일 공식 라이브러리의 issue에서 에러 해결법을 찾을 수 있었다. https://github.com/react-navigation/react-navigation/issues/11989 A props object containing a "key" prop is being spread into JSX · Issue #11989 · react-navigation..

[RN] React Native cli Android에서 react-native-vector-icons 라이브러리 사용하기

개요앱 개발을 할 때는 여러 아이콘을 사용하는 경우가 많다.React Native에는 아이콘들을 간편하게 가져와서 사용할 수 있도록 지원하는 react-native-vector-icons 라이브러리가 있다. 사용할 수 있는 아이콘들은 다음 링크에서 볼 수 있다.https://oblador.github.io/react-native-vector-icons/ react-native-vector-icons directory oblador.github.io Expo에서는 자동으로 라이브러리를 사용할 수 있도록 설정해 주지만 React Native cli에서는 라이브러리를 사용하려면 수동으로 설정해주어야 한다.사용 방법인터넷에 검색하면 여러 방법들이 나와 있으나 해당 방법이 가장 간편하다. android/build..

[React] 프로퍼티에 필수, 기본값 지정 / 자식 프로퍼티 사용

필수 프로퍼티 특정 컴포넌트에 반드시 전달되어야 하는 프로퍼티가 있다면, 프로퍼티를 필수 프로퍼티로 지정하여 보낼 수 있다. 필수 프로퍼티는 특수 변수 isRequired를 사용하여 전달할 수 있다. 필수 프로퍼티 사용하기 먼저 App.js에서 object형 프로퍼티와 정수형 프로퍼티 2개를 넘겨 줄 것이다. App.js import Ex from './03/Ex'; import './App.css'; function App() { return ( ); } export default App; 여기서 우리는 requiredNumValue를 기본값으로 지정할 것이다. props는 기본적으로 문자형으로 전달된다. 때문에 prop-types를 사용하여 프로퍼티 자료형을 지정해줘야 한다는 것을 잊어선 안된다. i..

[React] 리액트 시작하기

준비 먼저 컴퓨터에 Node.js를 설치해야 한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 해당 페이지에서 다운로드를 받을 수 있다. 위 링크로 들어가면 위와 같은 화면이 나올텐데 이 글을 작성한 날짜 기준으로 안정적, 신뢰도 높은 버전이 18.12.1이므로 18.12.1을 설치하는 것을 권장한다. 만약 프로젝트마다 여러 버전의 Node.js를 사용해야 한다면 NVM(Node Version Manager)를 설치하면 된다. https://github.com/coreybutler/nvm-windows/releases Releases · cor..