바둑을 배우는 나의 여정을 따라오세요

저는 백엔드에서 Go를 사용하고 프론트엔드에서 TypeScript를 사용하여 React를 사용하여 작은 게임을 개발하고 있습니다. 저는 주로 Laravel 프레임워크를 사용하여 PHP로 작업합니다. 그래서 Go는 저에게 새로운 프로그래밍 언어이며 배우는 가장 좋은 방법은 직접 해보는 것입니다. 그러니 이 프로젝트를 구축하는 나의 여정을 따라오세요. 이미 절반 정도 완료했지만 향후 PR을 공유하겠습니다.

게임 이름은 Suspect Recall입니다. 여기에서 제가 지금까지 가지고 있는 내용을 볼 수 있습니다: https://www.suspectrecall.com 먼저 몇 초 동안 용의자를 본 다음 용의자가 어떤 속성을 가지고 있는지 기억해야 합니다. 이 프로젝트의 초점은 아니지만 디자인은 나중에 조금 더 개선하겠습니다.

다음 할 일은 무작위 용의자를 찾는 것입니다. 코드의 해당 부분에 대한 PR을 열었습니다: https://github.com/artisanphil/suspect_recall/pull/4 코드 리뷰를 환영합니다! 또한, 얼마나 많은 사람들이 해당 웹사이트를 방문하는지, 얼마나 많은 실수를 하는지 알 수 있도록 답변을 저장할 계획입니다.

코드 구조 개요

원래는 백엔드와 프론트엔드라는 두 개의 폴더가 있었는데 실제로는 백엔드 코드를 루트에 두고 프론트엔드 폴더를 백엔드 폴더 안에 두는 것이 실제로 가장 효과적이라는 것을 알았습니다.
프런트엔드 코드를 배포할 필요는 없으며 빌드에서 생성된 코드만 배포하면 됩니다. 로컬 개발을 위해 코드를 실행하는 방법은 Readme 파일에서 알아보세요.

방금 프로젝트를 다운로드한 경우 프론트엔드 폴더에서 npm install을 실행하여 종속성을 'node_modules' 폴더로 가져와야 합니다.
프론트엔드 폴더에 .env 파일을 생성하고 REACT_APP_MODE=development를 추가합니다. 이는 라이브 다시 로드로 프런트엔드 코드를 실행할 때 다른 포트에서 실행되는 API 엔드포인트를 호출하기 위한 것입니다. 그런 다음 npm run start를 실행하세요.

이제 localhost:3000으로 이동하여 프런트엔드를 볼 수 있습니다. 보시다시피 api 엔드포인트는 작동하지 않으므로 루트 폴더로 이동하여 go run .을 실행해 보겠습니다. 다른 포트(포트 8080, 포트 8080, 프론트엔드는 3000입니다).

c := cors.New(cors.Options{
        AllowedOrigins:   []string{"http://localhost:3000"},
        AllowedHeaders:   []string{"Origin", "Content-Type", "Accept"},
        AllowCredentials: true,
    })

프로덕션에서 실행할 때는 정적 파일을 생성하는 npm run build로 프런트엔드 코드를 빌드한 후 백엔드 코드만 실행하므로 모두 동일한 포트에서 실행됩니다. 그런데 코드를 Google App Engine에 배포했습니다.

용의자를 동적으로 가져오고(현재 하드 코딩된) 프런트엔드에서 해당 엔드포인트를 호출하기 위한 새 API를 추가하는 이 PR을 검토하세요: https://github.com/artisanphil/suspect_recall/pull/4

코드 개선 방법에 대한 의견을 보내주셔서 미리 감사드리며, 귀하의 질문에 최선을 다해 답변해 드리겠습니다.

향후 진행 상황을 보려면 다음 저장소를 시청하세요: https://github.com/artisanphil/suspect_recall

위 내용은 바둑을 배우는 나의 여정을 따라오세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!