React 및 GraphQL - 01을 사용하여 Reddit 클론 만들기
9962 단어 reactredditclonetypescript
React
. 이를 위해 저는 Ben Awad의 Fullstack React GraphQL TypeScript Tutorial을 선택했습니다. 이것은 그가 만든 매우 긴 자습서입니다. 거의 14시간에 가까운 시간입니다.이 튜토리얼을 만든 것에 대한 엄청난 찬사입니다. 여기 트위터와 유튜브 링크가 있습니다. 꼭 가셔서 확인하시길 권해드립니다.
여기에 내 메모를 추가합니다. 여러분에게도 도움이 될 거라 생각하고, 어떻게든 의미를 느끼셨으면 좋겠습니다. 나는 내가 막힌 곳과 그 해결책을 추가했습니다. 자, 시작하겠습니다.
먼저
npm init -y
를 사용하여 package.json 파일을 시작합니다. 이-y
는 모든 기본 구성에 대해 yes를 나타냅니다.그런 다음 TypeScript를 사용하여 이 응용 프로그램을 빌드합니다. 해당 패키지를 개발 종속성으로 추가합니다. (패키지 매니저로 yarn을 사용하고 있습니다.)
yarn add -D @types/node typescript
typescript를 사용하기 때문에 JavaScript로 변환해야 합니다. Lets 및
watch
명령을 project.json
파일에 지정합니다. 변경 사항을 관찰하고 JavaScript로 변환합니다.또한 개발 환경에
nodemon
를 추가하고 있습니다....
"scripts": {
"watch": "tsc -w",
"start": "node dist/index.js",
"dev": "nodemon dist/index.js"
}
...
package.json
파일 구조는 위와 같습니다.yarn dev
를 실행하여 애플리케이션을 시작하십시오. 변경할 때마다 애플리케이션이 자동으로 실행됩니다.Prastgresql 관련 패키지를 추가합니다.
yarn add @mikro-orm/cli @mikro-orm/core @mikro-orm/migrations @mikro-orm/postgresql pg
Postgresql이 없으면 로컬 시스템에 설치할 수 있습니다.
VS Code tip: if you create a file like this
entities/Post.js
it will automatically create a folder.
Mikro ORM 문서로 이동하여 클래스 기반 엔터티를 가져옵니다.
여기에 같은 것이 있습니다.
Defining Entities | MikroORM
catch
객체를 반환하기 때문에 main()
호출 후 Promise
함수를 사용할 수 있습니다.mikro orm
에서 테이블을 생성하려면 이 구성을 package.json
파일에 추가하십시오. 그런 다음 src
폴더 아래에 이 파일을 만듭니다....
"mikro-orm": {
"useTsNode": true,
"configPaths": [
"./src/mikro-orm.config.ts",
"./dist/mikro-orm.config.js"
]
}
...
여기에 추가해야 할 또 다른 점입니다.
이와 같은 것을 내보내면
export default {
entities: [Post],
dbName: "rasikareddit",
type: "postgresql",
debug: !__prod__,
}
...
// import statement
import microOrmConfig from './file-location.ts'
이제 TypeScript는 불행합니다.
microOrmConfig.dbName
는 string
이기 때문입니다.아래와 같이 뒤집을 수 있습니다. 코드 줄 끝에
as const
가 있습니다....
export default {
entities: [Post],
dbName: "rasikareddit",
type: "postgresql",
debug: !__prod__,
} as const;
...
그러나 TypeScript에서도 오류가 발생합니다. 또한 위의 예에서는 자동 완성 제안을 사용할 수 없습니다.
export default {
entities: [Post],
dbName: "rasikareddit",
type: "postgresql",
debug: !__prod__,
} as Parameters<typeof MikroORM.init>[0];
// import all mising imports
그런 다음 Post Modal에 데이터 유형을 추가합니다. 그런 다음 마이그레이션 명령을 실행합니다.
npx mikro-orm migration:create
아래 오류가 발생하면
mikro-orm.config.ts
파일에 비밀번호를 추가하여 해결할 수 있습니다.
throw new ERR_INVALID_ARG_TYPE(
^
TypeError [ERR_INVALID_ARG_TYPE]: The "key" argument must be of type string or an instance of Buffer, TypedArray, DataView, or KeyObject. Received null
위의 오류에 대해 이 링크를 확인하십시오.
바로 지금 데이터베이스가 연결된 작업 프로젝트가 있습니다. 이상으로 이번 포스팅을 마치겠습니다. 이 시리즈의 2번째 포스팅부터 만나요.
여기까지 여기에서 내 코드를 찾을 수 있습니다.
rasikag/reddit-clone
여기에서 이 메모를 마무리하겠습니다. 곧 이 메모의 다음 부분을 게시할 것입니다.
이와 관련하여 질문할 사항이 있으면 여기에 댓글을 남겨주세요. 또한 내 이해에 따라 이것을 썼습니다. 따라서 잘못된 점이 있으면 주저하지 말고 저를 수정하십시오. 정말 감사합니다.
오늘의 친구들을 위한 것입니다. 곧 봐요. 고맙습니다
기본 이미지credit
Reference
이 문제에 관하여(React 및 GraphQL - 01을 사용하여 Reddit 클론 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rasikag/learning-react-with-ben-awad-01-ng8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)