유미의 기록들

서버로 데이터를 요청하고 받아오기 앞서 동기, 비동기 처리와 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 명..

팀프로젝트를 진행하기 위해서 브랜치를 생성하도록 하겠다 여러명이서 동시에 작업을 진행할 때, 바로 하나의 main 브랜치에 모으게 되면, 다른사람의 작업에 영향을 주거나, 충돌할 수 있다. 따라서 자신의 전용 브랜치를 만들어 각자 작업을 진행 한 후, main 브랜치로 모으게 되면 독립적으로 소스코드를 변경할 수 있으며, 문제가 발생했을 때 기록이 남게 되어 원인을 쉽게 찾아낼 수 있다. ✔️ 깃의 브랜치 생성 git branch {브랜치 이름: front/design} ✔️ 원하는 브랜치 Switch git checkout {브랜치 이름:front/design} ✔️ 추가하고 커밋 & push git add . git commit -m "설명" git push origin {브랜치 이름 :front/d..

Git 이란 ? 버전을 편리하게 관리할 수 있도록 도와주는 도구, VCS(Version Control System : 버전 관리 시스템) 중의 하나라고 할 수 있다 VCS는 소프트웨어 개발 및 유지 보수 과정에서 발생하는 소스코드, 문서, 그래픽 파일, 이미지 등 컴퓨터의 대부분의 파일을 관리할 수 있다 ● 버전 관리 시스템의 종류 - CVC (Centralized Version Control System): 중앙의 서버에서 클라이언트가 파일을 받아서 사용하는 방식 ❗ 서버가 에러가 발생하거나 오프라인일 경우 버전관리 시스템을 사용하지 못하는 문제가 있다 - DVC ( Distributed Version Control System) : 각 클라이언트들이 모두 서버의 백업본을 가짐으로써의 위의 문제를 해결..

필수항목을 다 입력했을 때, 버튼이 활성화 되도록 구현하겠다 //입력값 유효성 검사 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..