1월, 2022의 게시물 표시

CRA Typescript + @emotion/react css props 오류 해결 방법 및 jsx pragma 선언 없이 css 사용하기

이미지
  공식문서에서 위 사진과 같이 사용하라고 나와있었다. 하지만 아래와 같이 오류가 발생햇다. Type '{ children: string; css: { color: string; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.   Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322) 찾아보니 상단에 작성되어있는 jsx pragma가 CRA와 충돌이 생겨서 발생하는 문제라고 한다. /** @jsx jsx */ 위 선언을 아래와 같이 변경하면 해당 문제를 해결할 수 있었다. /** @jsxImportSource @emotion/react */ 그런데 @emotion/react를 사용하는 모든 컴포넌트에서 /** @jsxImportSource @emotion/react */ 를 작성해야 한다는 번거로움이 있었다. 번거로움과 실수를 줄이기 위해서 tsconfig.json을 수정해서 jsx pragma를 사용하지 않고도 모든 컴포넌트에서 @emotion/react를 사용할 수 있게 설정을 변경하였다. 그런데 여기서 또 다른 문제가 발생한다. 위 사진과 같이 tsconfig.json을 수정할 경우 컴포넌트 자체에서 오류는 발생하지 않았지만 작성한 css가 적용되지 않는 문제가 발생했다. hotpink 색을 적용했지만 검정색으로 표시되었다. 해당 문제는 CRA의 바벨 설정을 수정하고 해결할 수 있었다. eject를 사용하여 수정하는 방법도 있지만 eject 할 경우 이전 상태로 되돌아 갈 수 없기에 eject 없이 CRA를 커스터마이징 할 수 있게 도와주는 craco 라이브러리를 이용했다. 아래

[React-Native] MacOS Catalina 버전 cooapods 설치(1.9.1)

이미지
현재 사용중인 Catalina 버전 React Native를 공부하면서 expo로만 화면을 띄워봤는데 직접 시뮬레이터로 화면을 띄워보고싶었다.  공식 문서 메뉴얼대로 설치하고있었다. 하지만 아래처럼 오류가 발생했다. 오류 메세지에서 제시해준 방법대로 pod install 했을때 설치되는 버전이 1.8.4 버전이었는데 1.9 이상을 설치해야한다고 한다. 찾아보니 현재 내 맥 버전에 깔려있는 ruby는 2.6.3 버전으로 cocoapods 1.9.x 이상 버전의 설치를 지원하지 않는다고 한다. 그래서 ruby 버전을 업데이트 해줘야 했다. 원하는 버전의 ruby를 다운받고 시스템 경로를 내가 세팅한 ruby로 변경해줘야 했다. $ brew update $ brew install rbenv $ rbenv install -l (설치 가능한 버전 목록이 나온다.) $ rbenv install 3.0.0 $ ruby -v (설치된 버전 확인) 설치하고나면 시스템 경로를 설정해줘야 한다. 아래 명령어를 터미널에 입력한다. $ vim .zshrc .zshrc 에 아래 설정 붙여 넣기 export PATH="$HOME/.rbenv/bin:$PATH" eval "$(rbenv init - zsh)" 위 내용 붙여넣고 아래 명령어 입력(저장 후 실행)한다. $ source ~/.zshrc 그리고 나서 설치한 버전 중 원하는 버전의 ruby가 적용되도록 명령어를 입력한다. 버전 설정 $ rbenv global 3.0.0 $ rbenv rehash 제대로 버전이 설정되었는지 확인한다. $ ruby -v 그리고 다시 실행해보면 정상적으로 실행된다.

[React Native] ERROR: Error installing cocoapods 에러 해결하기

이미지
 React native 공식문서를 보면서 설치하는 과정중에 에러가 발생했다. $ sudo gem install cocoapods 위 명령어를 사용해서 cocoapods를 설치하라고 한다. 하지만 아래와 같은 오류가 발생했다. ERROR:   Error installing cocoapods: ERROR: Failed to build gem native extension. 여러 블로그들에 해결방법이 있었지만 제대로 동작하지 않았고 stackoverflow에서 해답을 찾을 수 있었다. 아래 두 명령어를 입력하면 된다. $ brew cleanup -d -v $ brew install cocoapods 결과 확인  $ pod --version 출처: https://stackoverflow.com/questions/20939568/error-error-installing-cocoapods-error-failed-to-build-gem-native-extension