📚 1. 사전 지식 저장소 종료 : 로컬 Storage, Session Storage, Cookie 각 저장소별 특징 localStorage : local에 도메인 별로 지속되는 storage - 시간 제한 X, 브라우저가 꺼져도 죽지 않음 - 값을 지우려면 직접 지워야 함 - 용량 제한만 존재 sessionStorage : 세션(프로세스, 탭, 브라우저) 종료될 때까지 지속되는 storage - 세션 종료 시 지워짐 - 여기서 세션은 탭 단위 cookie : 서버와 클라이언트측 양쪽에서 cookie 데이터를 사용하는 api가 존재 - 서버쪽 사용이 필수적이고 잦다면 localStorage가 아닌 cookie 사용 - e.g. '광고 7일동안 보지 않기'. localStorage는 '기간' 기능이 없기 ..
📚 1. 사전 지식 참고 : pnpm vs npm vs yarn pnpm pnpm은 npm의 단점을 개선한 모듈 관리 프로그램이다. npm과 yarn의 가장 큰 문제인 프로젝트 간 사용되는 dependencies의 중복 저장을 보완하였다. npm과 yarn은 node_modules 내부에 flat 하게 패키지를 설치하여 관리한 반면, pnpm은 이러한 호이스팅 방식 대신 다른 devdependencies를 해결하는 전략인 content-addressable storage를 사용했다. server 컴포넌트 vs client 컴포넌트 참고 : 'use client' Server 컴포넌트 : 서버로부터 data받아오기 Client 컴포넌트 : 파일 첫 줄에 'use client' 붙이면 적용. event li..
📚 1. 사전 지식 dependencies vs devDependencies 참고 : stackoverflow dependencies(배포용) $ npm install 라이브러리로 설치한 항목들 애플리케이션 동작과 연관된 라이브러리 devDependencies(개발용) $ npm install 라이브러리 --save-dev 혹은 $ npm install 라이브러리 -D로 설치한 항목들 개발할 때 필요한 라이브러리 설치 🤩 2. 실제로 구현하기 1. 기존 package.json 2. 변경할 사항은? dependencies : tailwindcss, RTK, StompJS, react-query, axios, html-toimage, moment, react-query .. devDependencies : ..
📚 1. 사전 지식 React Native 공식문서 React vs React Native React : Facebook에서 만든 프론트엔드 Javscript 라이브러리 DOM이 생성이 되고 난 후에 Virtual DOM을 이용하여 변화된 곳을 캐치하여 변화된 DOM으로 변경 Virtual DOM 작동방식 화면 출력을 ReactDOM 사용 JSX문법을 사용 : HTML문법 React-Native : React의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈 소스 프레임워크 Bridge를 이용하여 ios, android 각각의 네이티브 언어에 접근 화면 출력을 AppRegistry 사용 JSX문법을 사용 but HTML 문법 X 기존으l CSS 지원 X, flexbox 이용한 레이아웃 제작 제공 ..
😡 에러 상황 $ pip3 install seaborn을 입력하여 모듈을 설치했음에도 계속 module을 찾지 못한다고 뜸 🧐 대응한 방법 1. python Path를 설정 2. 최근에 React Native환경 세팅할 때 잘못 건드렸나 싶어서 관련 프로그램을 삭제하고, 설정했던 것들도 제거 3. google에 검색해도 설치 방법만 뜰 뿐, 이런 구체적인 case에 대한 해결책은 찾기 어려웠음 -> chatGPT 질문 👏 해결 방법 2번 그대로 $python3 -m pip install seaborn을 입력하니 거짓말처럼 해결되었다. 글을 작성하며 에러 메시지를 다시 보니 에러메시지에서 [notice]로 나에게 알려주고 있었다. 이를 계속 무시한 나... 🤔 느낀점 에러를 검색해보기 전에, 에러메시지를 ..
😡 에러 상황 Recat Native로 android환경에서 실행하고자 $npm run android를 입력하니 아래와 같은 오류가 발생하였다. Failed to install the app. Make sure you have the Android development environment set up : ~ Error : spawn ./gradlew EACCESS 🧐 대응한 방법 이번에는 chatGPT에게 질문을 하였다. 👏 해결 방법 GPT가 알려준대로 명령어를 실행하니 바로 해결되었다. 그렇다면 내가 입력한 chmod는 어던 # chmod : 파일이나 디렉터리의 권한을 변경하는 명령어 # chmod +x gradlew : gradlew파일에 실행할 수 있는 권한을 줌 🤔 느낀점 GPT 최고
😡 에러 상황 Mac환경에서 React Native를 실행하게 위해 $npm run ios를 치자 아래와 같은 오류가 발생하였다. 🧐 대응한 방법 GPT에게 에러코드 전체를 복사하여 해결책을 질문하였지만, 해결하지 못하였다. 그리고 시간이 조금 지나 공식문서를 둘러보던 중 해결 방법을 찾아내었다 ! 👏 해결 방법 위의 명령어 순서대로 터미널에 입력하니 설치하는데 시간이 조금 걸렸다. 다시 $npm run ios를 입력하니 성공적으로 실행이 되었다. 🤔 느낀점 공식문서가 아니라 블로그만을 참고하여 문제를 해결하려고 하니 빠뜨린 부분들이 상당수 있었따. 블로그가 100% 정확하지 않다는 점을 기억하며, 공식문서가 있다면 무조건 공식문서를 먼저 정독하도록 하자. 그리고, 블로그는 참고는 하되 절대 신뢰하지는 ..
📚 1. 사전 지식 React Query와 Stale 출처 React Query는 기본적으로 캐싱된 data를 stale 한 상태로 여긴다 # stale : 신선하지 않은. 신선하다 함은, 서버에서 조회한 데이터는 그때 당시의 데이터 snapshot이고, 외부 요청으로 서버 데이터가 변경이 되었다면 내 브라우저가 가진 데이터는 오래된 낡은 데이터가 되었으므로 stale 하다고 말하는 것 stale 한 상태가 되면 다음의 경우 refetch 된다. 1. 새로운 query instance가 마운트 될 때 : 즉, page를 이동했다가 왔을 때 2. 브라우저 화면을 이탈했다가 다시 focus 할 때 3. 네트워크가 다시 연결될 때 4. 특별히 refetchInterval(시간 간격)을 설정한 경우 또한, qu..
