전체 글259

• 

  React-Query란? React-Query야 반가워! 근데 어렵군... React-Query란? React-Query는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술이다. 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편리하게 해주는 데 사용된다. 앱이 간단하다면 useState와 context API만 사용하더라도 대부분의 client state를 다룰 수 있다. 그러나 복잡도가 올라가고 성능 향상의 필요성이 생긴다면 도구가 필요해진다. React-Query는 Redux보다 진입 장벽이 낮으면서, hook 기반의 로직으로 되어 있어 해당 훅을 사용하는 컴포넌트에서 상태 값의 변경을 간편하게 파악하여 리렌더링을 유발하게 해준다. React-Query의 기능과 장점 React-Query는 .. Programming/React 2022. 12. 12.

• 

  cross-env: 동적으로 노드 서비스의 환경 변수를 관리해주는 패키지 nest.js로 작성된 서버를 실행하려는 과정에서 yarn start를 해도 뭔가 오류가 나면서 실행이 제대로 되지 않았다. 이유는 scripts의 서버 실행 명령어 부분에 cross-env가 적용되어 있었기 때문이다. cross-env는 노드 서비스의 환경 변수를 동적으로 변경해주는 패키지로, OS간 환경 변수 설정 방법이 다름에 따라 발생하는 호환성 문제를 해결해준다.. 노드에 환경 변수는 왜 필요하고, 이것을 동적으로 변경해준다는 의미는 무엇인지를 먼저 알아보자. 기존의 환경 변수 설정법 노드 서비스를 개발하고 배포할 때, env 환경 변수 값을 사용하여 구상한다고 한다. 그런데 process.env.NODE_ENV를 모드 마다 직접 손으로 타이핑하여 바꾸는 것은 번거롭기 때문에, 아래와 같이 sc.. Programming/Node.js 2022. 12. 12.

• 

  Vite의 환경 변수와 모드 Vite로 빌드된 웹 프로젝트를 실행 후 로그인을 시도했는데 404 not found 에러가 나왔다. 원인은 .env 파일에 있어야 할 VITE_API_URL이 없었기 때문이다. 그래서 .env 파일을 생성해주고, VITE_API_URL을 입력해주었다. 그런데 Vite는 환경 변수를 import.meta.env 객체를 활용하여 관리하기 때문에, 어려운 부분은 아니지만 공식 문서를 잠시 정리해봤다. https://vitejs-kr.github.io/guide/env-and-mode.html Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io Vite가 환경 변수를 관리하는 법 Vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, 아.. Programming/ETC 2022. 12. 12.

• 

  Android Debug Bridge 설정하기 React Native 앱을 안드로이드 스마트폰에서 개발자 모드로 실행하기 위해서 Android Debug Bridge 설정이 필요하다. 안드로이드 adb 설치 및 설정 방법 Android ADB (Android Debug Bridge)는 PC와 스마트 폰 간에 통신을 할 수 있는 명령어도 도구입니다. 안드로이드 개발자에게는 apk 설치, log 출력의 등의 개발에 많은 활동에서 adb를 거의 매일 사용하고 있 kibua20.tistory.com Programming/React Native 2022. 12. 9.

• 

  [Java] JDK 환경 설정하기 Java도 새로 깔아야 하는구먼 https://languagestory.tistory.com/11 윈도우 JDK(JAVA Development Kit) 설치 1. 시험환경 ˙ 윈도우 ˙ JDK 17 Win x64 2. 목적 ˙ 윈도우 환경에서 JDK를 설치한다. ˙ 설치한 JDK 환경을 설정한다. 3. 적용 ① 오라클 다운로드 센터에서 JDK for Developers를 클릭한다. - URL : https://www.oracl languagestory.tistory.com Programming/Java 2022. 12. 9.

• 

  [React Native] AsyncStorage 공식 문서 번역하기 React Native 코드 공부하다 마주친 녀석 🚧 AsyncStorage · React Native Deprecated. Use one of the community packages instead. reactnative.dev Deprecated 되었다. 대신 community packages를 써라(!) AsyncStorage는 앱 전역적인 암호화되지 않은, 비동기적인, 지속적인, 키-값 저장 시스템이며, LocalStorage 대신 쓰여야 한다. 간단하게 사용할 때를 제외하고 AsyncStorage를 직접 쓰는 것보다, 상단에서 추상화하는 것을 권한다. 왜냐하면 AsyncStorage가 전역적으로 작동하기 때문이다. iOS에서는 serialized된 dictionary 형태의 작은 값들과 구분된 .. Programming/React Native 2022. 12. 9.

• 

  [react-native]react-native-paper Snackbar: 액션에 맞는 temporary한 하단 메시지 띄워주는 도구 https://callstack.github.io/react-native-paper/snackbar.html Snackbar · React Native Paper Snackbars provide brief feedback about an operation through a message at the bottom of the screen. callstack.github.io Programming/React Native 2022. 12. 8.

• [react-query] 기본이 되는 QueryClientProvider와 QueryClient https://blog.rhostem.com/posts/2021-02-01T00:00:00.000Z blog.rhostem.com 프론트엔드 웹 개발 기술 블로그 blog.rhostem.com 카테고리 없음 2022. 12. 8.

• [react-native-global-props] 전역적으로 폰트 적용하고 싶을 때 https://velog.io/@sangbooom/React-Native-global-font-%EC%84%A4%EC%A0%95 React Native global font 설정 RN에서 전역적으로 동일한 글꼴을 사용하고싶다.모든 Text 노드에 수동으로 적용하는 것은 지나치게 비효율적이다.내가 적용한 방법은 다음과 같다. velog.io 카테고리 없음 2022. 12. 8.

• [RecoilRoot] RecoilRoot란? https://velog.io/@hwanieee/Recoil-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 Recoil 사용하기(feat. 간단 예제) Installation CRA(npx create-react-app)로 리액트 파일을 생성한 후 아래 cli로 리코일을 설치한다. >js // app.js import React from 'react'; import { RecoilRoot, atom, se velog.io Programming/React 2022. 12. 8.

• Flow: type checker TypeScript 사용자의 Flow 탐험기 (1) — 설치 및 설정 우선 나는 TypeScript 를 2년 넘게 실무에서 사용하고 있다. 엄밀히 말하면, 순수 JavaScript 코드 만으로 프로그래밍을 하지 않은 시간이 그 정도 된다. (나만의 생각일 수도 있지만) Type System 을 이용 medium.com Programming/Javascript, Typescript 2022. 12. 8.

• polyfill이란? https://velog.io/@katanazero86/polyfill%ED%8F%B4%EB%A6%AC%ED%95%84-%EC%9D%B4%EB%9E%80 polyfill(폴리필) 이란? polyfill 이란 ? velog.io Programming/ETC 2022. 12. 8.

• 

  [buck] 빌드 툴 buck https://h2s1880.medium.com/buck%EC%9C%BC%EB%A1%9C-ios%EC%95%B1-%EB%B9%8C%EB%93%9C%ED%95%B4%EB%B3%B4%EC%9E%90-d811ad541416 Buck으로 iOS앱 빌드해보자! **ck이 아니라 Buck입니다. 물론 작업하다보면 **ck 될 수도 .. h2s1880.medium.com Programming/ETC 2022. 12. 8.

• 

  [git] Windows 10에서 환경 설정하기 회사컴 환경 설정 중에 예전 7기 공식문서 접근이 안되어서 다시 검색해서 해보는 Git 환경설정 1. Windows용 공식 Git installer를 다운로드 한다. https://git-scm.com/ Git git-scm.com 우측의 청록색 화면에 'Download for Windows'를 클릭한다. 맨 위 청록색으로 링크된 'Click here to download'를 클릭한다. 그러면 위와 같은 .exe 파일이 다운로드 된다. 2. 설치 과정 설치 과정에서 조작한 부분은 두 가지다. default editor Initial branch 첫째로 default editor는 git에서 commit message 등을 남길 때 자동으로 에디터 창을 열어 주곤 하는데, 그럴 때 사용할 기본 에디터를 고.. Programming/Git 2022. 12. 8.

• 삶이 무기력 할 때마다 꺼내보면 좋을 영상 https://youtu.be/kAfYEtj8XaU 눔 창업주 정세주님의 EO 인터뷰 영상 My/Riverlog 2022. 12. 7.