기록장

이전 글에서 크기 콤보박스까지 만들어서 렌더링해봤다. 이번 글에서 나머지를 작성해보자 map 콤보박스는 크기 콤보박스에서 만들어놓았던 컴포넌트를 사용할 것이다. 1. Combobox 컴포넌트를 이용하여 map 추가 const maps = [ { key: 1, name: "숫자" }, { key: 2, name: "과일" }, { key: 3, name: "여자아이돌 그룹" }, { key: 4, name: "남자아이돌 그룹" }, maps 배열을 위에 선언해준 뒤 위 코드를 크기 콤보박스 생성한 줄 아래에 쓰고 렌더링 해보면 잘 뜨는 것을 확인할 수 있다.. 이건 똑같은 컴포넌트를 이용한 것이기 때문에 자세히 적지는 않겠다. 2. 공개 비공개 라디오 버튼 만들기 (Checkbox.jsx를 componen..

이번에는 로비에서 방만들기 버튼을 누르면 뜨는 창을 만들어보도록 하자! (로비는 조금 하긴 했는데 서버랑 연결해야하는 부분이 있기 때문에 나중에 작성하도록 하겠다..) 기획서에서 그려봤던 화면은 이러하다.. 필요한 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..