NPM/packages (8) 썸네일형 리스트형 [#. ngrok] undefined is not an object (evaluating 'b.apply') error 해결하기 ngrok을 이용해서 디바이스 기기에서 제공 주소로 들어가 화면을 확인하는 데까진 성공했다 하지만 다른 페이지로 이동하려고 클릭하는 순간 발생했다 (Node + React 기준으로 React 페이지에서 발생) undefined is not an object (evaluating 'b.apply') safari에서 접근하면 뜨는 에러라고 한다 index.js 수정 const store = createStore(persistedReducer, compose( applyMiddleware(ReduxThunk, promiseMiddleware), window.navigator.userAgent.includes('Chrome') ?// 추가 window.__REDUX_DEVTOOLS_EXTENSION__ && w.. [#. ngrok] install failed ngrok error 해결하기 로컬 웹 서버를 모바일 디바이스에서 확인하기 위해 ngrok을 이용하려고 한다 ngrok NAT와 방화벽 뒤에 있는 로컬 서버 를 안전한 터널을 통해 공개 인터넷에 노출시켜 주는 도구 즉, 포트 포워딩과 같은 네트워크 환경 설정 변경없이 로컬에 실행중인 서버를 안전하게 외부에서 접근 가능하도록 해주는 도구 먼저 아래 명령어를 통해 ngrok을 설치하려고 했다 npm install -g ngrok 하지만 에러가 발생했다 ngrok@4.2.2 postinstall: `node ./postinstall.js` Failed at the ngrok@4.2.2 postinstall script. 서치해 보니 Mac에서만 발생하는 에러라고 한다 기본적으로 npm은 수명 주기 스크립트(예: postinstall)를 일.. [#. admin-bro] express-session deprecated undefined resave option; express-session deprecated undefined saveUninitialized option; 에러 해결하기 node에서 admin-bro를 세팅하고 서버를 실행했더니 express-session deprecated undefined resave option; provide resave option node_modules/@admin-bro/express/lib/buildAuthenticatedRouter.js:56:41 express-session deprecated undefined saveUninitialized option; provide saveUninitialized option node_modules/@admin-bro/express/lib/buildAuthenticatedRouter.js:56:41 뭔가가 deprecated 되었다는 메시지가 계속 뜬다 developer0809.tistory.co.. [#. Sequelize] sequelize 설치하기, sequelize-auto command not found 해결 node react 프로젝트에서 seqeulize를 사용하기 위해 처음에 sequelize-auto를 설치했는데 sequelize sequelize-auto comman not found 커맨드 에러가 계속 뜬다 sequelize-auto는 더 이상 지원하지 않기 때문에 sequelize를 설치해야 한다 sudo npm install -g sequelize sudo npm install -g sequelize-cli sequelize를 전역으로 설치해 줬기 때문에 mysql2도 전역으로 설치해야 한다 sudo npm install -g mysql2 터미널에 sequelize를 입력하면 잘 설치된 것을 확인할 수 있다 github.com/sequelize/sequelize-auto sequelize/seq.. [#. react-images-uploading] react에서 react-images-uploading를 이용해서 이미지 올리기, 이미지 수정/삭제하기 상품을 구입한 사람에게만 이렇게 리뷰를 쓸 수 있는 영역이 노출되도록 했다 리뷰에는 텍스트와 이미지를 둘다 올릴 수 있다 이때 이미지를 업로드하기 위해 react-images-uploading를 이용해 보자 www.npmjs.com/package/react-images-uploading react-images-uploading The simple images uploader applied Render Props pattern. This approach allows you to fully control UI component and behaviours. www.npmjs.com ① react-images-uploading 설치 npm install --save react-images-uploading ② .. [#. react-image-gallery] npm 패키지를 사용해서 상품 상세 페이지에 이미지 슬라이드 image slide 만들기 Node + React로 쇼핑몰을 개발하고 있다 react-image-gallery 패키지를 설치해서 상품 상세 페이지에서 이미지 슬라이드를 사용해 보자 www.npmjs.com/package/react-image-gallery react-image-gallery React carousel image gallery component with thumbnail and mobile support www.npmjs.com ① react-image-gallery 설치 npm install react-image-gallery --save ② css 설정 src/index.css 최상단에 css 파일을 import 해준다 @import "~react-image-gallery/styles/css/image-galle.. [#. react-ratio] React에서 video, image 비디오, 이미지 항상 같은 비율로 width, height 사이즈 유지하기 youtube clone 코딩을 하면서 모바일 기기로 직접 찍어서 업로드한 동영상이 detail 페이지에 떴을 때 video에 width = 100% 을 줬더니 height은 통제가 안 된다 모바일 기기 세로로 촬영해서 그렇다 video width = 100%로 유지하고 height은 비율을 유지하면서 반응형으로 바뀌었으면 좋겠다 www.npmjs.com/package/react-ratio react-ratio Small component that allows you to create responsive elements that will keep their ratio on different screen sizes. www.npmjs.com 쉽게 사용 가능한 package가 있다 ① 설치 npm insta.. [#. js-cookie] Cookie package 쿠키 패키지 사용해서 쿠키 set/get 하기 쿠키 사용하기 이전 글에 쓴 HTTP의 특징(비연결성, 상태없음) 때문에 쿠키를 사용하려고 한다 쉽고 간편하게 사용하기 위해 cookie.js 라이브러리는 사용해보자 ① cookie.js 설치 ⑴ NPM으로 설치 npm i js-cookie ⑵ CDN으로 사용 둘 중 편한 방법으로 사용한다 ② set/get // default 사이트 전체에서 확인 가능 Cookies.set('name', 'value') // 7일 뒤 쿠키 만료 Cookies.set('name', 'value', { expires: 7 }) // 7일 뒤 쿠키 만료 + 현재 경로에서만 확인 가능 Cookies.set('name', 'value', { expires: 7, path: '' }) Cookies.get('name')// 'value' Coo.. 이전 1 다음
