유통기한 관리_개인프로젝트 (10) 썸네일형 리스트형 CORS for multiple origins cors npm 패키지는 origin value에 대한 함수를 작성하는 옵션을 제공한다. 여러 도메인에 대해 CORS를 활성화하는 데 도움이 된다. const cors = require('cors'); const allowedDomains = ["http://localhost:3000", "https://d-day.netlify.app"] app.use(cors({ origin: function(origin, callback) { if(!origin) return callback(null, true); if(allowedDomains.indexOf(origin) === -1) { const msg = `This site ${origin} does not have an access. Only specifi.. heroku 서버 - 이미지 업로드 오류 발생 - 이미지 직접 호스팅 개발 환경에서는 이미지 업로드 기능과 업로드 한 이미지를 가져오는 데 문제가 없었다. 그러나 heroku 서버에 배포 후 아래와 같은 문제점들이 발생했다. herokuapp.com/images/NoImage.png 접근이 가능하지만 uploads폴더에 업로드 이미지가 정상적으로 저장이 안된다. 기존에 있는 이미지는 읽어올 수 있는데 배포 후 새로 업로드한 이미지를 못읽어온다면, heroku가 배포했을때 그 상태의 파일만 읽어오고 이후에 새로 디스크에 추가된 파일들은 호스팅에서 지원하지 않는게 원인일 수도 있다는 생각이 들었다. 그래서 이미지를 직접 호스팅하는 방안으로 찾아보았다. devcenter.heroku.com/articles/s3#s3-setup Using AWS S3 to Store Static.. 배포하기 수정 할 기능도 있고 추가로 구현할 기능도 많았지만 1차적으로 배포한 후에 계속 작업을 이어나가려고 합니다. 아래와 같은 방법으로 순차적으로 진행했습니다. 클라우드 DB 이용하기 MongoDB 클라우드 셋업 Managed MongoDB Hosting | Database-as-a-Service .env에 mongoURI 업데이트 heroku로 백엔드 배포 heroku 셋업 Cloud Application Platform | Heroku 시작점 설정: Procfile 참고: .env의 내용으로 MONGO_URI을 설정했지만, 해당 파일은 .gitignore에 설정되어있기에 heroku > apps > settings에 들어가 Config Vars 항목에 적용해주면 됩니다. netlify로 프론트 배포 net.. Suspense가 뭔가요? 컴포넌트가 읽어들이고 있는 데이터가 아직 준비되지 않았고 React에 알려줄 수는, 데이터 불러오기 라이브러리에서 사용할 수 있는 메커니즘입니다. 아래 코드는 렌더링 할 때 Home 컴포넌트가 렌더링되는 지 테스트한 경우입니다. Home component를 lazy하게 가져오기 때문에 fallback에 정의된 Loading...이 DOM에 그려집니다. import React, { Suspense, lazy } from 'react' const Home = lazy(() => import('./pages/home/Home')) function App() { return ( ) } CORS 처리 서로 다른 도메인이 데이터를 요청했을 때 허용 권한이 없으면 발생한다. 상황 client단에서 server로 데이터를 요청했다. { const result = await axios.get("/products"); console.log(result); }} > 리스트 불러오기 해결 방법 server단은 npm install cors 설치 후에 아래 코드를 추가했다. const cors = require('cors'); app.use(cors()); client단은 package.json에 "proxy": "http://localhost:8080" 데이터 받아올 도메인을 작성했다. mongoose '__v' 필드 MongoDB에서 직접 insert할 경우에 나타나지 않고 mongoose를 통해서 데이터를 삽입하면 '__v' 필드가 생긴다. 의미하는 바는 버전 키라고 하는데 문서의 내부 개정판을 설명하고 기본 값은 0이다. 삭제하는 방법 스키마를 만드는 부분에 { versionKey : false } 추가 해주면 된다. const productsSchema = new Schema({ name: { type: String, required: true}, image_url: { type: String}, expiration_date: { type: Date, default: Date.now }, status: { type: String, default: "active" } },{ versionKey: false }); collection naming convention in mongodb-빈 리스트가 돌아오는 이슈!! 몽고DB는 테이블이 collection이다. mongoose.model() 메서드가 내부적으로 만들어 내는 것은 소문자로 변환 시키며 뒤에 s를 붙인 복수 형태가 된다. var BookSchema = mongoose.Sechema({name:String}); var Book = mongoose.model('book',BookSchema); // books 모델은 단수 컬렉션을 복수로 자동으로 설정해주고 있다. React에서 event handling 하는 법 정리 React element 이벤트 핸들링 기본 React에서 events 이름은 반드시 camelCase를 사용해야 한다. React에서 event handler는 JSX형태로 함수를 표기한다. // 기존 DOM element에서 사용하는 방법 Activate Lasers // React에서 사용하는 방법 Activate Lasers onClick와 같이 camelCase로 이벤트 이름을 설정하고, event handler의 연결은 JSX 표기인 { }을 사용하고 있다. anonymous 형태의 arrow function 사용하기 function LocalStorage() { const handleGetKeyWord = (e) => { debounce(() => { console.log(e.target.v.. 이전 1 2 다음