본문 바로가기

STUDY

 (287)
React | 이미지 크기 줄여 업로드하기 (image resize / browser-image-compression) npm browser-image-compression패키지를 사용하여 이미지 사이즈를 줄이는 방법 1. browser-image-compression install npm i browser-image-compression 2. 모듈 import import imageCompression from 'browser-image-compression'; 3. 컴포넌트 작성 file을 입력받을 input태그와 이미지를 미리보기 할 img태그 생성 *이미지 미리보기는 이전글 참고 - React | 이미지 업로드 후 미리보기 (on Change / image preview) 입력받은 파일을 담을 file state와 미리보기를 위한 fileUrl state도 생성 import React, {useState, useE..
React | id저장하기 (react-cookie) 쿠키에 아이디를 저장하고, 저장되어있을 경우 아이디 입력란에 나타나있도록 하기.. 1. install npm install react-cookie react-cookie Universal cookies for React www.npmjs.com 2. import import { useCookies } from 'react-cookie'; 3. 사용예시 hooks로 사용할 수 있다. const [cookies, setCookie, removeCookie] = useCookies(['rememberEmail']); import React, { useState, useEffect } from 'react'; import {useCookies} from 'react-cookie'; const LoginPage ..
React | 다음 우편번호 검색 서비스 (react-daum-postcode) 1. react-daum-postcode install $ npm install react-daum-postcode 2. 주소 검색을 이용할 컴포넌트에 import import DaumPostcode from 'react-daum-postcode'; 3. 필요에 맞게 커스텀하여 사용 onComplete : 사용자가 주소를 검색 후 특정 주소를 클릭하였을 때 발생하는 이벤트 style: css커스텀을 위한 props 이런식으로 사용하면 된다... 엄청 편리함! const FindAddr = () => { const postCodeStyle = { display: "block", position: "absolute", top: "50px", zIndex: "100", padding: "7px" } retur..
React | react-paginate로 빠르게 페이지네이션 구현하기 1. react-paginate install $ npm install react-paginate 2. 페이징 처리 할 컴포넌트에 import import ReactPaginate from "react-paginate"; 3. 필요에 맞게 커스텀 하여 사용 pageCount - 총 게시글의 개수(총 row 수) pageRangeDisplayed - 한 페이지에 표시할 게시글의 수 marginPagesDisplayed - breakLabel - 페이지 수가 많을 경우 건너뛸 수 있는 버튼 previousLabel - 이전페이지로 가는 버튼의 value값 nextLabel - 다음페이지로 가는 버튼의 value값 onPageChange - 페이지 버튼을 눌렀을 때 일어나는 이벤트 이를 이용해 페이지 증감 c..
CSS | sidebar 밑에 공간이 남을 때... 이렇게 사이드바의 길이가 짧을 경우에 해결방법 하나의 div를 추가하고, css를 이렇게 설정해주면 스크롤이 길어져도 sidebar가 잘리지 않는다... .sidebar-skeleton{ position: fixed; left: 0; height: 100vh; bottom: 0; width: 272px; z-index: -10000; }
React | react-router-dom을 이용한 sidebar 0. react, react-router-dom install $ npm install react react-router-dom 1. Sidebar.js 컴포넌트 생성 menus는 각 사이드바의 메뉴들을 담아놓은 배열. 실제로 사용할 땐 따로 파일을 만들어 import하기로.. map을 이용해 SidebarItem이라는 각각 컴포넌트들을 선언. menu라는 props에 각 object를 담아 전달. *map이용시 꼭 key값을 넣어주어야 함! //src/components/Sidebar.js import React from "react"; import { Link } from "react-router-dom"; import SidebarItem from "./SidebarItem"; function Si..
Ionic | 아이오닉 + 리액트 프로젝트 시작하기 0. Node.js가 설치되어있어야 함 아래 명령어를 입력했을 때 Node의 버전 정보가 뜨면 설치되어 있는 것. $ node -v 1. Ionic 설치 -g명령어를 통해 글로벌로 설치해주기. $ npm install -g @ionic/cli 2. 새로운 프로젝트 생성하기 현재 리액트를 사용하여 프로젝트를 만들 것이기 때문에 type은 리액트로 지정해주었습니다. 템플릿은 세 가지 종류 중 한 가지를 선택할 수 있습니다. $ ionic start [프로젝트명] [템플릿] --type=react // 예시 $ ionic start ionicReact blank --type=react 3. 브라우저에서 프로젝트 구동시키기 ionic serve를 입력하면 8100번 포트로 아이오닉-리액트 프로젝트가 브라우저에 ..
네이티브 앱, 웹 앱, 하이브리드 앱 Native App? 구글 플레이스토어, 앱 스토어에서 설치 가능 - 기기의 홈 화면에서 접근가능한 아이콘 생성 운영체제에 맞는 개발언어 사용 - Android는 Kotlin(혹은 Java), iOS는 Swift(혹은 Objective-C) 모바일 장치의 기능(GPS, 카메라, 전화번호부 등)을 최대한 사용할 수 있음 푸쉬 알림(Push Notifications) 가능 인터넷 연결이 되지 않은 오프라인 상황에서도 사용 가능 UI/UX 구성요소 대부분이 패키지 혹은 라이브러리화 되어 제공되므로 로딩시간이 단축됨 각 플랫폼 별로 따로 개발해야 함 - 개발시 더 많은 비용과 시간을 소모 업데이트를 자주해주어야 함 Web App? 따로 다운받을 필요 없음 - Safari나 Chrome과 같은 브라우저 환경에서 ..

티스토리툴바