본문 바로가기
반응형

분류 전체보기171

[Socket Omok] 5. 바둑판, 바둑알 표시하기 바둑판 크기 계산하기 이제 가장 중요한 기능인 바둑판과 바둑알 표시 기능을 추가해야 한다. 개인적으로 이번 프로젝트에서 바둑알 착수 이벤트 감지에 이어 가장 어려운 부분이 아닐까 싶다. 우선 인터넷에서 바둑판 사진 하나를 다운로드해왔다. 그 후 픽셀 수를 통해 오프셋과 칸의 너비가 이미지의 몇% 정도 되는지 측정했다. 측정 결과 Offset은 3.62%, Width는 5.14%가 나왔다. 이 값을 통해 이제 바둑알의 위치를 정해줘야 한다. 바둑알 컴포넌트 const BOARD_OFFSET = 3.62; //% const BOARD_SPACE = 5.14; //% const stone = ({ white, x, y }) => { //console.log(`${white} (${x},${y})`); retu.. 2022. 6. 6.
[Socket Omok] 4. 플레이어 참가 기능 개발 Intro 기존에는 방을 만든 사람이 흑돌, 2번째로 들어온 사람이 백돌로 플레이하도록 하려 했지만, 플레이어가 흑돌 / 백돌 중 어떤 돌로 플레이 할지 선택할 수 있는 기능이 필요할것 같았다. 그래서 만약 흑돌 / 백돌에 플레이어가 참가중이지 않다면 '참가' 버튼을 표시하고, 플레이어가 참가중이라면 해당 플레이어의 ID를 표시하는 기능을 추가했다. GamePanel 컴포넌트 const GamePanel = ({ roomname, blackPlayer, whitePlayer }) => { const Player = ({ name, onClick }) => { return ( {name !== "" ? {name} : 참가} ); }; const blackPlayerCallback = () => { soc.. 2022. 6. 6.
[Socket Omok] 3. 대기실 기능 개발 Intro 개발 환경을 구축하고 사용자가 처음 접속하면 보여질 방과 관련된 기능들을 개발했다. 사용자가 방을 생성하고, 다른 사용자가 생성된 방에 참가하면 오목 경기를 시작시킬 것이다. 그 후에 들어오는 사용자들은 관전자로 놔둘 생각이다. React를 처음 써봐서 기능을 개발하며 많이 헤맸지만, 생각보다 간단하고 강력한 기능을 제공해줘서 금방 이정도까지 만들 수 있었던것 같다. 방 생성 input에 방 이름을 입력하고 Enter를 치거나 '방 만들기' 버튼을 클릭하면 해당 이름으로 방이 생성된다. 아래의 경우 방이 생성되지 않도록 설정했다. 같은 이름의 방이 이미 존재하는 경우 사용자가 이미 다른 방에 참가중인 경우 방 이름에 아무것도 입력하지 않았을 경우 코드는 아래와 같다. 이벤트 발생 시 roomn.. 2022. 6. 5.
[Socket Omok] 2. 개발환경 구성하기 Intro 이번 시간엔 아래의 개발환경을 구축해보도록 하겠다. Back-end: NodeJS + Express Front-end: React DevTool: Visual Code, Git 프로그램 설치 각 프로그램은 아래의 링크를 통해 설치하면 된다. Visual Code https://code.visualstudio.com/download NodeJS https://nodejs.org/ko/ Git CLI: https://git-scm.com/downloads GUI: https://desktop.github.com/ .gitignore https://www.toptal.com/developers/gitignore/api/visualstudiocode,node,react,git 환경설정 NodeJS를 .. 2022. 6. 2.
[Tistory] 새 글 아이콘이 회색이 됐을 때 주황색으로 원상복구하기 회색 새 글 아이콘 원상복구하기 어제 새 토이프로젝트 관련 카테고리를 추가하다가 카테고리 설정을 이것저것 건드려봤는데 지금 보니 아래 사진처럼 새 글 표시가 죄다 회색으로 바뀌어있었다. 카테고리 설정을 변경하면 새 글 아이콘이 아래의 주황색 아이콘에서 https://t1.daumcdn.net/tistory_admin/blogs/image/category/new_ico_5.gif 아래 링크의 회색 아이콘으로 변경되어버린다고 한다. https://t1.daumcdn.net/tistory_admin/blogs/image/category/new_ico_1.gif 다른 블로그에선 이미지를 새로 업로드하거나 CSS를 통해 아이콘을 수정했지만, 난 다른 속성들은 그대로 냅두고 img의 src만 주황색 아이콘 URL로.. 2022. 6. 1.
[Socket Omok] 1. 프로젝트 시작 프로젝트 시작 배경 이번 학기에 소켓 프로그래밍 과목을 수강했다. 종강이 얼마 남지 않았는데, 종강 이전까지 소켓을 사용한 간단한 프로젝트를 완성해 제출해야 한다. 2주 만에 만들만한 프로젝트 아이디어를 생각하던 중 이름을 보면 알 수 있듯이 웹에서 소켓을 사용해 오목 게임을 할 수 있는 사이트를 만들기로 했다. 사용할만한 소켓 라이브러리는 WebSocket과 Socket.io가 있었는데, WebSocket의 경우 TCP/IP 소켓과 달리 HTTP 프로토콜 내에서 동작하기 때문에 배운 내용과는 거리가 멀다고 생각되어 Socket.io를 선택했다. Socket.io도 WebSocket을 사용하긴 하지만, 이는 WebSocket을 이용한 통신이 가능한 경우 관련 메타데이터를 추가해줄 뿐이지 WebSocket.. 2022. 5. 31.
[It's My Waye] 15. 1차 버전 애플리케이션 배포 1차 버전 애플리케이션 배포 넣고자 했던 기능이 모두 들어간건 아니지만 필수 기능들을 포함된 애플리케이션이 완성됐다. 완성된 앱은 Key를 이용해 Signed Bundle로 빌드해야 플레이스토어에 배포할 수 있다. Key를 이용해 빌드하면 app-release.aab라는 파일이 생기는데, 이 파일을 플레이 콘솔 화면에 드롭하면 된다. 이전에 앱을 개발하면서 간간이 업데이트 해왔기 때문에 버전 코드가 1이 아니다. 그동안은 정식 버전이 아니라서 공개 테스트로 출시 및 업데이트 했고, 이번 1차 버전 앱은 1.08 버전이 될것 같다. 이제 플레이스토어에 마이웨이라고 검색하거나 아래의 링크를 통해 앱을 설치할 수 있다. https://play.google.com/store/apps/details?id=com... 2022. 5. 31.
[It's My Waye] 14. 진동, 전체화면 알람 기능 추가 진동 기능 구현 DB의 알람 반복 횟수, 간격 컬럼을 진동 사용 여부, 전체화면 알람 사용 여부로 변경하고 기능을 구현했다. 진동은 0.5초 간격으로 1초간 울리도록 설정했다. if(alarm.vibrate) { if(Build.VERSION.SDK_INT < Build.VERSION_CODES.O) { vibrator?.vibrate(longArrayOf(1000, 500), 0) } else { vibrator?.vibrate( VibrationEffect.createWaveform( longArrayOf(1000, 500), intArrayOf(255, 0), 0)) } } 진동과 관련한 더 자세한 내용은 아래의 글에 따로 정리해뒀다. [Android] Vibrator 클래스로 진동 제어하기 Vib.. 2022. 5. 31.
[It's My Waye] 13. 알람음 선택, 볼륨 조절 기능 추가 알람음 선택, 볼륨 조절 [It's My Waye] 12. 알람 DB 구조 수정 알람 DB 구조 수정 개발 중 기존 알람 설정 기능의 반복 횟수와 간격이 쓸모가 없다는 생각이 들었다. 그와 반대로 진동과 전체화면 알람 설정과 같은 중요한 데이터가 DB에 빠져있었다. 이래서 devjaewoo.tistory.com 이전 글의 알람 설정 변경 UI를 보면 알람음 탭이 있다. 이 탭을 누르면 알람음을 선택하고, 볼륨을 조절할 수 있도록 UI를 구성했다. 알람음 목록은 RecyclerView, 볼륨은 SeekBar를 사용했다. 기기의 벨소리 목록을 가져오는 방법은 아래의 글에 따로 정리해뒀다. [Android] Ringtone 재생 및 목록 가져오기 Ringtone 재생 val ringtoneUri: Uri = .. 2022. 5. 31.
반응형

티스토리툴바