본문 바로가기

전체 글75

[React-Native] React-native 설치하기 React-Native 시작하기. React-Native 시작하기 전 NVM 설치 https://github.com/nvm-sh/nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash nvm install --lts 버전: node -v 16.14.0 / npm -v 8.5.2 리액트 네이티브 설치하기 npx react-native init LearnReactNative 리액트 네이티브를 설치하면 ios 폴더와 안드로이드 폴더가 생성됩니다. 안드로이드 스튜디오에 android 폴더를 열어 실행시킵니다. 우측 상단(AVD Manager) 아이콘을 누르고 Create virtual device를 눌러 실행시킵니다... 2022. 2. 28.
[React Query] React Query와 상태관리 어제 세미나를 진행한 우아한형제들 주문 프론트팀 배민근 님의 라이브 프론트엔드 세미나를 보면서 기록해 보겠습니다. 우아한형제들 Rel팀에서 전달하는 세미나를 들어보고 있습니다. 저 또한 잠시 써보았지만 정확하게 알면서 상태관리에 대해 더 알아가보자 작성하도록 하겠습니다. FE 상태관리 대해 State? 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있습니다. (문자열, 배열, 객체 등의 형태로 응용프로그램에 저장된 데이터) => 개발자 입장에서 관리해야하는 데이터 UIUX 중요성과 함께 프로덕트 규모가 많이 커지고 FE에서 수행하는 역할이 늘어나 관리하는 상태가 많아졌다. 상태관리 라이브러리 Redux, MobX, Recoil 등.. 상태관리는? 상태를 관리하는 방법에 대한 것 => 상.. 2022. 2. 23.
[Next.js] .env (dotenv-webpack) npm i dotenv-webpack // or yarn add dotenv-webpack next.js에서 지원하는 환경변수를 사용하기 위해서 .env.development 파일을 만들어서 위와 같이 작성했다. name=DEVELOPMENT NEXT_PUBLIC_API_URL=http://localhost:3001 근데, 이 변수를 컴포넌트에서 사용하고자 했을 때 undefined가 표시된다. const todos: NextPage = () => { const API_URL = process.env.NEXT_PUBLIC_API_URL console.log(API_URL) // undefined } 브라우저에서 .env파일을 통해 환경변수를 사용할 때는 process.env.NEXT_PUBLIC_변수명으.. 2022. 2. 10.
[Recoil] Next.js에서 Recoil 에러처리 Duplicate atom key Waring 동작에는 문제가 없지만 사실 next.js console에서는 Warning을 출력하고 있습니다. 저도 참 애를 먹는 작업이였는데 이 방법을 알고나니 간단하게 해결되었습니다. Duplicate atom key "pageNameState". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement. 이는 SSR이라서 여러면 atom을 생성하면서 경고 메시지가 출력되는 것입니다. 현재 공식 이슈로 open 되어 있습니다. 수정까지는 시간이 꽤 걸릴 수 있으니 경고 창을 보고 싶지 않다! 라면 우회 방.. 2022. 2. 9.

티스토리툴바