React 및 GraphQL - 01을 사용하여 Reddit 클론 만들기

배워야겠다는 생각이 들었다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