B대면 노래방 | 211115

#일렉트론에 이미지 띄우기.

구글링을 해봐도 정보가 잘 나오지 않아서 며칠동안 다같이 헤맸었는데 깃에서 누군가 답변해놓은 것을 찾았다!

팀장님이 먼저 시도해보고 성공하신 후 메인 레포지토리에 올려놓으셨다. 그걸 fetch한 후 push를 해왔다.

바로 npm start를 하면 에러가 나서 npm i file-loader 로 file-loader를 install 하고 다시 npm start 하였더니 됐다.

나중에 다시 볼 때 이해하기 위해 사용한 코드를 적어놓는다.

/*lobby.js*/
import mirrorball from "../../img/mirrorball.png"


const Mirrorball = styled.img`
    position: absolute;
    margin-left: 43%;
    width: 150px;
    height: 150px;
`


<Mirrorball src={mirrorball}></Mirrorball>

 

 

#vscode

ctrl + k + f / 자동 indent

 

 

#room 생성 후 room list에 띄우기

해당 작업은 lobby 파트를 맡은 나의 몫이었으나 혼자 하기에 어려움이 있어 다른 팀원들과 함께 시도하였다.

12. useRef 로 useRef 로 컴포넌트 안의 변수 만들기 · GitBook (vlpt.us)

13. 배열에 항목 추가하기 · GitBook (vlpt.us) 참고하여 작성하였다.

 

바로 우리 프로젝트에 적용하기엔 제대로 이해가 되지 않아서 우선 제공된 코드가 잘 실행되는지 부터 확인하였다.

12 에서 App.js를, 13에서 CreateUser.js를 가지고 왔고, useState도 사용하였다.

다른 팀원분의 일렉트론으로 실행에 성공하여 내 레포지토리에서 B대면 노래방 프로젝트에 맞게 수정하여 구현해보았다.

/*lobby.js의 function 부분*/
function Lobby() {
    const [inputs, setInputs] = useState({
        roomname: '',
        memberCount: '',
        password: '',
    });
    const { roomname, memberCount } = inputs;
    const onChange = e => {
        const { name, value } = e.target;
        setInputs({
            ...inputs,
            [name]: value
        });
    };
    const [rooms, setRooms] = useState([
        {
            id: 1,
            roomname: 'velopert',
            memberCount: 'public.velopert@gmail.com'
        },
        {
            id: 2,
            roomname: 'tester',
            memberCount: 'tester@example.com'
        },
        {
            id: 3,
            roomname: 'liz',
            memberCount: 'liz@example.com'
        }
    ]);

    const nextId = useRef(4);
    const onCreate = () => {
        const room = {
            id: nextId.current,
            roomname,
            memberCount
        };
        setRooms(rooms.concat(room));

        setInputs({
            roomname: '',
            memberCount: ''
        });
        nextId.current += 1;
    };

    return (
        <Background>
            <Header>
                <Header_div><Link to="/" style={{color: 'black'}} sizes="40x110"><Go_intro_btn>back</Go_intro_btn></Link></Header_div>
                <Header_div><Title src={logo}></Title></Header_div>
                <Header_div></Header_div>
                <br></br>
            </Header>
            
            <Room_list_create>
                    <Room_list>
                        <h2>ROOM LIST</h2><br></br>
                        <RoomList rooms={rooms} />
                        <Room_search>Room 검색: <input type='text'></input><button>검색</button></Room_search>
                    </Room_list>
                    <Room_create>
                        <h2>ROOM CREATE</h2><br></br>
                        
                            <CreateRoom>
                                <Create_setting>
                                roomname={roomname}
                                memberCount={memberCount}
                                onChange={onChange}
                                onCreate={onCreate}
                                </Create_setting>
                            </CreateRoom>
                        
                    </Room_create>
            </Room_list_create>
            <Footer>
                <Copyright>
                    @Copyright 소프트웨어 공학 1조
                </Copyright>
                <Volume>
                    Input <input type='range'></input>
                    Output <input type='range'></input>
                </Volume>
            </Footer>
        </Background>
    )}

/*roomlist.js*/
import React from 'react';

function Room ({ room }) {
  return (
    <div>
      <b>{room.roomname}</b> <span>({room.memberCount})</span>
    </div>
  );
}

function RoomList({ rooms }) {
  return (
    <div>
      {rooms.map(room => (
        <Room room={room} key={room.id} />
      ))}
    </div>
  );
}

export default RoomList;

/*createroom.js*/
import React from 'react';

function CreateRoom({ roomname, memberCount, password, onChange, onCreate}) {
    return (
        <div>
          <input
            name="roomname"
            placeholder="방제"
            onChange={onChange}
            value={roomname}
          />
          <input
            name="memberCount"
            placeholder="인원수"
            onChange={onChange}
            value={memberCount}
          />
          <input type="password"
            name="password"
            placeholder="비밀번호"
            onChange={onChange}
            value={password}
          />
          <button onClick={onCreate}>방 만들기</button>
        </div>
      );
    }
    
    export default CreateRoom;

수정해서 실행하였는데 roomlist에 제대로 올라가지는 않는다. 잘못된 부분을 찾으려고 했는데 이 방식이 아니라 마운트를 했을 때 room list가 뜨는 방식으로 바꾸자고 해서 우선 이대로 놔두려 한다.

lobby.js에서 room_create의 구조를 바꿨으므로 css도 약간 수정해야 한다...