Web/React14 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. 프로젝트에서 공통으로 쓰이는 css 속성을 한곳에 정리 프로젝트가 커지다 보면 CSS를 수정해야 될 때 하나하나 찾아서 수정하는 것이 아니라 공통된 속성을 한곳에 정리하면 유지보수시에 매우 편리하다. React에서는 파일 구조를 잘 나눠서 만들어 보도록 하겠다. src안에 common이라는 폴더를 만들고 color와 size에 대한 css 속성들을 정리한다. 다음과 같이 key와 value로 설정해 놓으면 공통 속성을 정의한 후에 쉽게 사용하고 바꿀 수 있다. @value key: value; @value makerBlack: black; @value makerWhite: white; @value makerLightGrey: #e8e7e6; @value makerLightPink: #ffeae8; 그리고 사용하려는 .css 파일에서 다음과 같이 선언해 주고 .. 2020. 12. 11. React | button에서 onClick 이벤트 핸들링 프로젝트에서 button을 클릭했을때 해당 url 주소로 넘어가기 위해 onClick 이벤트 핸들링을 했어야 했다. 처음에 사용했던 방식으로는 그냥 버튼을 클릭했을때 this.handleClick으로 해결하려 했으나 여러개의 버튼이 별개의 url로 이동하기 위해 state로 변경하였다. state, 즉 상태값을 따로 지정 해야 했는데 react에 익숙하지 않아 고생했다.. 먼저 constructor에 state 정보를 저장한다. constructor(props) { super(props); this.state = { Data: [ { id: 1, company: "Apple Store", url: "url주소", src: "./img/apple__logo.png", }, { id: 2, company: .. 2020. 8. 11. 이전 1 2 3 4 다음
