본문 바로가기

Web29

React 프로젝트 Ionic Capacitor 사용하여 Android, Ios Build하기 Android, Ios App 배포를 위한 Capacitor 사용법 및 빌드 적용 방법에 대해서 정리한 글입니다. 제가 담당하고 있는 프로젝트는 추후 앱으로도 출시하기 위해 처음부터 Ionic 환경으로 시작한 웹뷰 형식의 웹사이트입니다. 이 글에서는 신규 프로젝트를 Ionic으로 생성하는 방법 보다는 기존에 Ionic으로 작업했던 React 프로젝트를 Android, Ios로 Build하는 작업에 집중하겠습니다. Ionic이란? Ionic - 웹앱을 네이티브앱으로 래핑하는 개발 방식을 사용합니다. Ionic UI Frameworks : 모바일 UI + 웹UI 쉽게 도와주는 UI 컴포넌트들을 제공 Ionic Native : Capcaitor 나 Cordova 플러그인을 활용해 쉽게 디바이스 제어 기능 제공.. 2022. 4. 22.
React Query와 상태관리 React Query와 상태관리 회사에서 새로운 프로젝트 진행을 하게 되었는데 기존 프로젝트에서 사용하던 Store에 대해 고민하였고 Store에서 API를 호출하는 과정에 Store를 이렇게 사용하는게 맞나 하는 의문점이 생겼습니다. 그 후 React Query에 대해서 알게 되었고 학습하고자 '우아한테크세미나 React Query' youtube와 배민 기술 블로그를 보고 정리하게 되었습니다. Reference에 해당 유튜브 링크를 공유해 드립니다. 상태 관리 FE에서 상태관리란? UI/UX의 중요성과 함께 프로덕트 규모가 커지면서 FE가 관리해야 하는 상태가 많아졌다. 개발자 입장에서 관리해야하는 데이터들을 효율적으로 관리하는 방법으로 사용된다. 모던 웹 프론트 환경에서는 여러가지 상태들이 존재하고.. 2022. 3. 30.
쿠키 vs 세션 vs 캐시. 무엇이 다를까? 쿠키(Cookie) 브라우저를 사용하는 환경(로컬 컴퓨터)에 서버에서 받은 데이터를 쿠키 저장소에 저장 정보의 유효기간을 지정할 수 있다. 유효기간 미지정 시 메모리에 기록되기 때문에 지정하지 않으면 웹 브라우저가 닫힐 때 삭제된다. 지정했다면 웹 브라우저를 닫아도 삭제되지 않는다. (하드디스크에 저장) 경로 값을 통해 도메인의 기준 경로(+ 하위 경로까지) 지정할 수 있고 같은 도메인을 사용하는 서버에서만 전송 가능하다. (mail.naver.com / blog.naver.com에서는 전달 가능) 쿠키의 장점 다시 서버에 요청할 필요가 없기 때문에 속도가 빠르다. 서버 부하가 낮다. (서버에 정보 요청 빈도 수가 줄어듬) 쿠키의 단점 중요한 사용자 정보가 저장되는 경우 보안에 취약하다. 총 300개의 .. 2021. 7. 15.
#3 JavaScript 코드 품질 # 크롬으로 디버깅 하는 방법 Chrome으로 디버깅하기 Watch – 표현식을 평가하고 결과를 보여줍니다. Add Expression 버튼 +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여줍니다. 입력한 표현식은 실행 과정 중에 계속해서 재평가됩니다. Call Stack – 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시합니다. 실행은 index.html 안에서 hello()를 호출하는 과정 중에 멈췄습니다. 함수 hello 내에 중단점을 설정했기 때문에, 콜 스택(Call Stack) 최상단엔 hello가 위치합니다. index.html에서 함수 hello를 정의하지 않았기 때문에 콜 스택 하단엔 'anonymous’가 출력됩니다. 콜 스택 내의 항목을 클릭하.. 2020. 12. 31.

티스토리툴바