유미의 기록들

애뮬레이터가 아닌 안드로이드 휴대폰에서 실행하고자 한다 1️⃣ 휴대폰 기기를 개발자모드로 활성화 해준다 *개발자 모드는 앱을 개발하기 위해서, 세부적인 설정을 변경하기 위해서 사용한다. 하지만 개발자 모드를 사용할 일이 거의 없어 숨겨져 있는데 이를 활성화를 시켜주어야 한다 - 개발자 모드 활성화 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 번호 빌드번호를 연속으로 5~6회 정도 클릭하면 "개발자 모드 켰습니다" 라는 문구가 나온다 그러면 개발자 옵션이 활성화 된다 2️⃣ 안드로이드가 설치되어 있는 경로를 복사한다 3️⃣ cmd창을 관리자 권한으로 실행하고 연결된 디바이스를 확인한다 cd C:\Users\VIP\AppData\Local\Android\Sdk\platform-tools adb dev..

회원관리, 판매내역, 거래내역 등 테이블이 있는 페이지에 기간 설정을 추가하려고 한다 ✅ React-DatePicker 라이브러리 설치 npm install react-datepicker https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com 기본 default는 달력의 요일이 영어로 표시되어 있는데 한글로 표시하려고 한다 ✅ date-fns 설치 npm install date-fns 코드 상단에 사용하고 싶은 언어를 import해준다 import { ko } from "date-fns/esm/locale"; locale={ko} props로 추가해준다 날짜 형식은 ' / ' 형태로 나오는데 '년 월 일'..

서버로 데이터를 요청하고 받아오기 앞서 동기, 비동기 처리와 HTTP프로토콜에 대해 설명하겠다 2개 이상의 프로세스가 있을 경우에 동기, 비동기의 개념을 설명할 수 있다 프로세스 (Procecss) 운영체제로부터 자원을 할당받은 작업의 단위 동기 vs 비동기 동기 (Synchronous) 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어지는 방식 - 직렬적 어떤 일을 처리하는 동안 다른 일을 하지 못하고 기다려야 한다 따라서 일이 순차적으로 진행되며, Blocking이 발생한다. 비동기 (Asynchronous) 프로세스의 완료를 기다리지 않고 동시에 다른 작업을 처리하는 방식 - 병렬적 어떠한 일을 처리하는 동안 다른 일을 할 수 있다 따라서 완료 순서가 보장되지 않으며 Blocking이 발생하지 않..

DashBoard 페이지에서 캘린더로 월별 판매건수, 매출액을 한 눈에 볼 수 있도록 구현하겠다 ✅ FullCalendar 라이브러리 설치 npm install @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction @fullcalendar/react https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullc..

본격적으로 프로젝트를 시작하기 전, 대략적인 디자인 시안을 만들어보았다 총 카테고리는 대시보드, 회원관리, 거래내역, 판매내역, 마케팅관리(보류)로 구성하였다 먼저 src에 총 4개의 폴더를 생성하였다 - components 각 페이지의 Body를 구성하는 코드 - pages 각 페이지를 전체를 구성하는 코드 - styles 스타일css 코드 - templates 전체 템플릿 스타일을 구성하는 코드 App.js import {BrowserRouter,Route, Routes} from "react-router-dom"; import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import LoginPage from "./pages/login_..

React Native로 앱개발은 거의 마무리를 짓고 관리자페이지를 만들기 위해 React를 해보려고 한다 1. Node.js설치 Node.js란 - 기존 javascipt는 웹 브라우저에서만 사용이 가능하였지만 운영체제상에서 일반 애플리케이션 프로그램처럼 실행시켜주기 위한 런타임 - 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능함 - npm 도 같이 설치가 된다 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * 안정적인 버전으로 다운 받는 것이 좋다 * cmd에서 node -v 명..

필수항목을 다 입력했을 때, 버튼이 활성화 되도록 구현하겠다 //입력값 유효성 검사 onValueChange = (value) => { this.setState(value,()=>{ let isValidForm = true; if (this.state.companyNo.trim().length < 10) { // 조건 필요시 추가 isValidForm = false; } if (this.state.passwd.trim().length == 0) { isValidForm = false; } console.log("isValidForm", isValidForm); this.setState({ validForm: isValidForm }); }); } * id인 사업자 번호는 10자리수가 넘어야 함 *vali..

상품을 숨김 버튼을 클릭했을때 Home으로 가면서 refresh되어야 홈에 있던 상품이 없어지게 된다 즉, Home으로 갈때 상품을 불러오는 API를 다시 호출을 해야한다 Home에서 Item_Detail로 갈 때 부품목록을 호출하는 메소드인 refresh함수를 props로 전달한다 goGoodsDetailScreen=()=> { this.props.navigation.push('GoodsDetail',{id:this.props.item.id, userID:this.props.item.userID, refresh:this.goGetGoods}); } //부품 목록 호출 메서드 goGetGoods = () => { this.setState({indicator : true}); this.callGetGood..

1. assets 폴더 확인 android/app/src/main/assets 폴더가 있는지 확인하고, 없다면 만들어준다 2. bundle 파일 생성 프로젝트 폴더에서 아래의 명령어로 bundle파일을 생성한다 npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 이렇게 index.android.bundle 파일이 생성된 것을 확인할 수 있다 3. android studio에서 빌드 상단 메뉴바에서 build > build apk 를 실..

상품 Detail 페이지에서 이미지를 넘길때 슬라이더를 구현해보고자 한다. react-native-web-swiper 라이브러리를 사용할 것이다 ✅ swiper 라이브러리 설치 npm i react-native-web-swiper https://github.com/reactrondev/react-native-web-swiper GitHub - reactrondev/react-native-web-swiper: Swiper-Slider for React-Native and React-Native-Web Swiper-Slider for React-Native and React-Native-Web - GitHub - reactrondev/react-native-web-swiper: Swiper-Slider fo..