Leta Learns

개요 비대면으로 각자의 공간에서 여러 사람들과 노래방 시스템을 이용할 수 있는 서비스 팀원 5명이서 협업 온라인과 오프라인 병행. (오프라인이 주) 기간 2021.09.29 ~ 2019.12.12 (보고서 작성, 개발 등 모든 과정에 소요된 기간) 개발 환경 사용 언어: HTML, CSS, JavaScript(ES6+) 사용 소프트웨어: node.js module(socket.io, react), electron 주요 기능 로그인 (이모티콘과 닉네임 설정 후 로그인) 방 생성 (방제 입력 후 생성) 방 참가 노래 예약 음성 채팅 문자 채팅 방 퇴장 결과물 B대면 노래방 시연 영상 후기 팀플 시작 전, 가장 걱정되었던 부분은 팀원 간의 실력 차이가 크다는 점이었다. 팀원 5명 중 3명이 프로젝트 경험이 없..

#room list에서 room간 간격 띄우기 적당한 간격 맞춰서 6px로 입혀주었다. css 형식 몰라서 이걸로 한 5분 썼다. ㅎㅎ //roomlist.js 7번 line //div에 style 걸어서 margin 주기 #room list에서 'room_' 없이 바로 방제만 띄우기 javascript에서 문자열 자르는 방법을 알아야 했다. 파이썬처럼 그냥 [5:] 이런식으로 슬라이스 시도했다가 틀려서 구글링 했다. https://gent.tistory.com/414 [JavaScript] 문자열 자르기 (substr, substring, slice) 자바스크립트에서 문자열을 자르기 위해서는 substr(), substring(), slice() 함수를 사용하면 된다. 문자열을 뒤에서부터 자르기 위해서..

#음성채팅 기능 테스트 중 #npm uninstall npm 설치하는 폴더 위치를 잘못 설정해서 npm uninstall을 하였다. 이유는 모르지만 안 되길래 그냥 node_modules랑 package-lock.json 삭제하고 적절한 폴더로 이동한 후 다시 npm install 하였음. 팀원 한 분의 fork에서 클론 받아올 때 클론 받아온 후에 branch checkout 해주어야 한다. (브랜치 변경) 왼쪽 아래 master 눌러서 origin/sub로 checkout branch 해주기. 이것저것 하다보니 두시간만에.. 성공!

#채팅 구현 (room.js) 메시지 입력하고 버튼을 누르면 emit 서버에서 on해서 받고 socket.to(roomName).emit('showChat', 내용) user.socket.on('showChat', 내용) #git push 취소하는 법 $ git log --oneline #커밋 기록들 확인 $ git reset --soft [취소하고자 하는 커밋] #hard 리셋의 경우 --soft 대신 --hard #JS element는 function 명명 시 Pascal Case로 작성 #채팅창 메시지 입력란에 메시지가 입력이 되지 않는 상황 해결중 ...? room.js에 멤버리스트 띄우는 useEffect 삭제했더니 또 된다...? onChange 안 쓰고 하려고 했는데 일단 onChange로는..

211122 ... 팀플하러 모이긴 했는데 한 게 하나도 없다. 소켓 이용한 구현 들어가니까 정말 하나도 이해가 안 된다. 나 포함 세 명의 팀원들이 이해를 못했고.. 한 명은 프론트 전담... 그래서 한 명(팀장님)이 혼자 고군분투 중.. 팀장님... 죄송해요.... ㅎㅏ... 소켓에 대해 너무 무지하다. 대충 이해라도 할 수 있어야 팀장님 코드 보면서 공부라도 할 텐데 그냥 모르겠다. 211201 room 안에서 참가자 리스트 띄우기 구현.. 근데 난..... 딱히 한 거 없다... 소켓 어려워..... 아직 코드도 제대로 이해 못함...

#lobby에서 room 만들고 해당 room 입장 room 만들 때 roomname을 지정해서 각각의 roomname마다 다른 방에 들어간다. (room id보다 roomname으로 구분하는 게 수월할 것으로 판단됨) /*lobby.js*/ import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); const onEnter = roomname => { navigate('/room', {replace:true, state: { nickname : {roomname}}})}; #room 화면에 방제 띄우기 {history.state.usr.nickname.username} //중괄호 중요! {history.state[하고 ..

오늘 팀플은 저녁 늦게라도 시간 내서 만난거라 짧게 진행했다. 구현을 하고 싶었으나.. 오늘은 socket.io 공부만 하다가 끝났다.. ㅎ 소켓 공부는 https://edu.goorm.io/learn/lecture/557/%ED%95%9C-%EB%88%88%EC%97%90-%EB%81%9D%EB%82%B4%EB%8A%94-node-js 의 '주요 확장 모듈 - socket.io' 파트를 참고하였다. 한 눈에 끝내는 Node.js - 구름EDU 이미 모두 갖추어진 실습환경에서 직접 코드를 작성하고 실행하며 Node.js(노드)의 기본을 다질 수 있는 프로그래밍 강좌입니다. edu.goorm.io #socket.io emit으로 발생시키고 on으로 받아온다. socket.on('event 이름', 함수) ..

#일렉트론에 이미지 띄우기. 구글링을 해봐도 정보가 잘 나오지 않아서 며칠동안 다같이 헤맸었는데 깃에서 누군가 답변해놓은 것을 찾았다! 팀장님이 먼저 시도해보고 성공하신 후 메인 레포지토리에 올려놓으셨다. 그걸 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%; widt..

#vscode html 자동완성 html 파일 만들고 ! 친 후 enter #html과 css 파일 연결 link:css 친 후 href에 css 파일명 입력 #css flex-wrap: wrap; #다음 줄로 넘어감 flex-wrap: nowrap; #다음 줄로 넘어가지 않음 #html input type="range" Input header에서 (intro화면으로 넘어가는) back 버튼과 타이틀을 정렬하는데 꽤나 시간이 소요됐다. back 버튼을 div로 묶고, 타이틀은 h1 태그를 이용하였다. (추후 타이틀은 이미지로 교체 예정) div와 h1의 width를 33%로 설정하여 세 부분으로 나누었다. 버튼을 왼쪽 정렬하기 위해 margin-left를 0px로 설정. 타이틀을 중앙 정렬하기 위해 fl..

git clone [clone할 git 링크] cd [해당폴더] npm install => 여기서 node-gyp-build 없다는 에러 나서 npm install node-gyp-build 해줌 그 후 다시 npm install npm start 했는데.. 에러남. ㅋㅠ (아예 삭제하고 다시 했더니 됨...) local 저장소로 옮기는 법 (git) git add -> commit -> push vscode / ctrl + shift + P : show all commands git history (extension 다운) 시계 모양 누르면 git history 뜸