전체보기 (62) 썸네일형 리스트형 배포하기 수정 할 기능도 있고 추가로 구현할 기능도 많았지만 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 ( ) } Currying 유인동 강사님의 함수형 프로그래밍(ES5)-인프런 강의를 들으면서 커링을 주제로 포스팅하려고 합니다. 커링이란? 예를 들어, _curry함수는 아래와 같이 진행됩니다. 함수를 인자로 받고 즉시 다음 함수를 리턴합니다. 그리고나서 이 함수는 첫번째 인자로 a를 받고 또 다시 다른 함수를 실행합니다. 내부 안쪽에서 인자 a, b를 적용합니다. function _curry(fn) { return function(a) { return function(b) { return fn(a+b); } } } 즉, 커링은 인자를 여러 개 받는 함수를 분리하여, 인자를 하나씩만 받는 함수의 체인으로 만드는 방법입니다. 함수형 프로그래밍 기법 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 기법입니다. const add1.. 가비지 컬렉션 자바스크립트 엔진 내에선 garbage collector가 끊임없이 동작합니다. garbage collector는 모든 객체를 모니터링하고, 도달할 수 없는 객체는 삭제합니다. let user = { name: "John" }; user엔 객체 참조 값이 저장됩니다. 다시말해, 전역 변수 user는 {name: "John"}이라는 객체를 참조합니다. user = null; user의 값을 다른 값으로 덮어쓰면 참조가 사라집니다. 가비지 컬렉터는 이제 객체 {name: "John"} 데이터를 삭제하고, 메모리에서 삭제합니다. 참조 두 개 참조를 user에서 admin으로 복사했다고 가정해보고 let user = { name: "John" }; let admin = user; 위에서 한것 처럼 user의 값.. 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 모델은 단수 컬렉션을 복수로 자동으로 설정해주고 있다. 파일마다 EOL(End Of Line)을 왜 넣어야 할까 여러 버전의 유닉스 OS간의 공통된 API 및 인터페이스를 정의해놓은 POSIX 명세 중 text file 부분을 보면 유닉스 시스템은 text file들을 서로 구분할때 EOL을 사용하기 때문에 파일을 만들때마다 파일의 끝에 EOL을 넣어주는 것이 안전하다. 구현하는 방법은 항상 파일 작성이 끝나면 엔터키를 통해 맨 아래줄에 공백을 만들어주거나, 프리티어를 통해 저장시 자동으로 파일 맨 끝에 개행이 되게끔 하는 방법이 있다. "endOfLine": "auto" 이전 1 ··· 4 5 6 7 8 다음