root세팅에 이어서 하위 프로젝트 세팅에 대한 글을 써보겠다하위 프로젝트 세팅디자인 시스템먼저 디자인 시스템은 똑같은 vite앱을 세팅하고 거기서 shacn-ui로 컴포넌트들을 세팅만 해놓는 형태가 될 것이다 결국엔 하나의 ui컴포넌트 창고 역할을 하는셈이다shacn-ui 공식문서를 보고 세팅을 하면 완료하지만 클라이언트 앱에서 디자인 시스템을 import해서 사용하려면 package.json에 따로 추가 설정을 해줘야한다{ "name": "@bumpygg/design", "private": true, "version": "0.0.0", "type": "module", "main": "src/index.ts", // 컴포넌트 "types": "src/index.ts", ..

모노레포란기존의 멀티레포 처럼 각각의 프로젝트가 각각의 저장소에 위치하는걸 멀티레포라고 한다모노레포는 이와 달리 하나의 저장소안에 여러 프로젝트를 위치시킬 수 있고그에 따른 장단점이 존재한다장점패키지 의존성을 관리하기 편리하다공용 컴포넌트나 함수 등을 여러 프로젝트가 사용할 수 있다반복적인 작업이 줄어서 앱의 확장성을 높일 수 있다단점앱이 많아질 경우 하나의 저장소가 비대해 질 수 있다같은 언어를 사용 할 때만 권장된다(node+react 등)한번의 빌드시간이 오래 걸린다앞서 개요에서 언급한 것 처럼 tailwindcss+shacn-ui를 디자인 시스템으로 사용할 것이기 때문에 앞으로 확장된 프로젝트에서도 작업속도나 초기 세팅 비용이 줄어들 것으로 기대된다모노레포 도구모노레포 구축을 도와주는 도구로는 y..

평소에 op.gg라는 서비스를 자주 이용하기도 하고 라이엇의 공개 api가 있다는걸 알게 되서 개인프로젝트에 도입해보려 한다https://www.op.gg/?hl=ko_KR 롤 전적 검색은 OP.GG - 챔피언 공략과 게임 전적, 라이엇 아이디 태그 검색리그오브레전드 전적 검색은 OP.GG! LCK 공식 스폰서 OP.GG에서 롤 전적 검색과 챔피언 공략을 확인해보세요. 소환사의 협곡, 칼바람 나락, 우르프, 아레나 등 다양한 모드에 필요한 모든 데이터를www.op.gghttps://developer.riotgames.com/apis#account-v1/GET_getByPuuid Riot Developer Portal developer.riotgames.com 디자인쪽에 크게 공수를 덜기 위해서 전체적인 ..

웹소켓을 마지막으로 이후 작업은 기존에 했던 작업들의 유지보수 혹은 회의실 내 토픽체크에 대한 웹소켓 등 따로 포스팅 할 만한 작업은 아니였기에 개발일지는 마무리 지으려고 한다 이후 팀내에 RTC팀이 SFU방식 N:M실시간 통신을 구현하는데 성공해서 회의실내에 화상통화 구현이 가능했다RTC구현 방식에 대해 설명하면 포스팅도 너무 길어지고 상당히 복잡하기 때문에 이는 생략하겠다 그렇게 남은 작업이였던 애니메이션과 스켈레톤처리 등 작업의 퀄리티를 올릴 수 있는 작업들을 진행했고 팀원들 모두가 만족 할 만한 수준으로 성황리에 프로젝트가 마무리되었다(아래는 프로젝트 github다)https://github.com/part4-project/effi_frontend GitHub - part4-project/effi..

웹소켓을 이용해서 채팅을 구현하기로 했고 우리는 spring + react조합이라서 node + react에서 자주 사용하는 socketIO를 사용하지 않고 stomp.js와 sock.js를 사용해서 구현하게 되었다여기서 sock.js는 웹소켓을 지원하지 않는 브라우저에서도 웹소켓이 사용 가능하게 해주는 것이고stomp.js는 websocket위에서 동작하는 프로토콜로써 클라이언트와 서버가 전송할 메세지의 유형, 형식, 내용들을 정의하는 매커니즘이다추가로 stomp.js의 특징은- 규격을 갖춘 메시지를 보낼 수 있는 텍스트 기반 프로토콜- publisher, broker, subscriber를 따로 두어 처리하는 pub/sub구조라는 점- 연결시에 헤더를 추가하여 인증 처리 구현이 가능- stomp 스펙..

저번에 api작업을 마치고 에러핸들링 작업을 준비했다. 유저들이 해당 작업이 성공했는지 실패했는지 알기 위해 상단에 토스트컴포넌트를 띄워서 alart창처럼 활용해서 '~가 성공(실패)했습니다' 등 각 상황에 맞는 문구로 보여주고자 했다고려해야 할 점- 팀 협업인 만큼 에러핸들링 형태를 맞춰야했고 각자 해당 방식으로 작업할 때 통일이 안되는 변수가 있을 수 있기 때문에 중간에 config단계에서 처리할 수 있으면 좋을 것 같다- 에러 문구는 서버에서 받으니 이를 활용해서 변수화해야 재사용성이 높아질것이다- 성공문구는 클라이언트 측에서 정하는것이며 변동 될 일이 없으니 상수문자열로 넣어도 무관할 것 같다접근방법 & 해결법 inviteGroup: async (targetEmail: string, groupI..