기록장

이번에는 로비에서 방만들기 버튼을 누르면 뜨는 창을 만들어보도록 하자! (로비는 조금 하긴 했는데 서버랑 연결해야하는 부분이 있기 때문에 나중에 작성하도록 하겠다..) 기획서에서 그려봤던 화면은 이러하다.. 필요한 component들을 정리해보자면 -> 이 창 자체는 MakeRoom.jsx이고 -> (1)에서 만들었던 Template.jsx 사용 -> text를 입력하는 Nameinput.jsx -> 목록 중에서 선택할 수 있는 Combobox.jsx -> 라디오 버튼 구현하는 Checkbox.jsx (원래 이름은 라디오버튼으로 해야하는데 처음에 체크박스인줄 알고 만들었다가 이름수정 아직 안함;;) -> 아직 안적었지만 로비창 구현할 때 만들어놨던 Button.jsx 사용 (이건 확인버튼과 취소버튼을 만..

(1)에서 만든 구글로 로그인하기를 포함한 메인 화면을 만들어보자. 기획단계에서 메인 화면을 구상할 때, 중간에 게임 로고와 그 아래 로그인 버튼이 있으면 좋겠다고 생각했다. 간단히 표현하자면 이런식이다. 1. 템플릿 컴포넌트 만들기 (Template) : 젤 바깥 테두리 2. 로고 컴포넌트 만들기 (Logo) : 로고 이미지 3. 로그인 버튼 수정 + css 추가 1. 템플릿 컴포넌트 만들기 (Template) ./component 아래에 만들었다. import React from 'react'; import styled from 'styled-components'; const TemplateBlock = styled.div` width: 512px; height: 600px; position: rel..

(기억해놓으려고 기록하는 것) www.npmjs.com/package/react-google-login 참고 소셜 로그인 중 구글 로그인을 구현해보려고 한다. 1. react-google-login 설치 내 프로젝트로 가서 react-google-login을 설치한다. 2. Googlebutton.js 작성 구글링 했을 때 잘 설명되어있는게 없었다;; 함수형 컴포넌트는 내가 아직 공부를 덜 한 개념이고 class 컴포넌트로 작성된 걸 찾아서 참고했다. 내 프로젝트/components 라는 폴더를 만들고 그 아래에 Googlebutton.js 파일을 생성하여 작성 import React, { Component } from 'react'; import { GoogleLogin } from 'react-goo..

※ 주의 ※ 글쓴이는 mac os를 사용합니다 모델 훈련을 위해 나만의 데이터셋을 만들 때, 직접 사진을 다운받고 라벨링을 하고자 한다 ! -> labelImg 라이브러리를 사용하면 된다 1. labelImg 라이브러리 설치 terminal에서 pip install labelImg 입력 (너무 옛날에 다운받아서 정확히 기억은 안나지만 ㅠㅠ 이렇게 했었던것 같아서,,) 2. labelImg 실행 terminal 창에서 labelImg 를 입력하면 이러한 창이 뜬다. 3. 라벨링 하기 Open Dir 로 사진들이 저장된 디렉토리를 선택하면 첫번째 사진이 뜨고 오른쪽 아래에는 파일들의 리스트가 보여진다. 바운딩 박스 정보 저장은 -> Change Save Dir 를 통해 경로 설정 우리는 yolo 데이터셋을 ..