Programming148

• 

  [MUI] select 요소의 border 없애기 MUI에는 select라는 요소가 있다. 클릭하면 아래로 선택 가능한 목록이 펼쳐지는 형태의 컴포넌트다. 그런데 이 요소의 border, 그러니까 기본 상태에서의 border와 활성화 되었을 때의 border 모두를 없애는 방법이 공식 문서에 구체적으로 나와 있지 않아서 stack overflow 등의 도움을 빌려야 했다. 이렇게 UI 프레임워크를 사용하면서 스타일링을 해야 하는 경우가 이전 프로젝트에서도 꽤 있었는데, 특히 border를 없애는 작업은 앞으로도 자주 활용될 것 같아 정리해 본다. 환경 - React - Material UI 코드 ( { if (selected.length === 0) { return 구분; } return orgType;}} > 유치원 대학교 기타 )} /> Programming/HTML, CSS 2022. 12. 13.

• 

  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.