전체 글
[TIL] 왜 이렇게 바쁜가요?😭
지속적인 폰트 렌더링 styled-components의 Globalstyles.js에 폰트를 적용했던게 문제였다. 폰트 부분만 CSS파일로 빼고 index.js에 import시키면서 해결했다. 이런 현상을 FOUT(Font Of Unstyled Text)라고 한다. css가 적용되기 전에 텍스트가 보여지는 현상이다. styled-components의 globalstyle에서 font-face를 적용하면 일어나는 문제라고한다. [Fix] 폰트 깜빡임 · Issue #23 · Trys-Ketch/trys-ketch-client 요약 최초 렌더링 이후에 버튼 클릭 시 폰트 깜빡임 완료조건 최초 렌더링 이후에 추가적인 깜빡거림 없음 github.com [React] 리액트 깜빡임 해결기(feat. 폰트) 일단 ..
[항해99] 9주차 실전프로젝트(2) 회고
😎이번주에 한 일 🤼♀️우리팀이 한 일 WebRTC + WebSocket WebRTC Signaling Server와 client가 WebSocket을 이용하여 통신 Signaling Server를 매개로 각 클라이언트가 서로의 SDP(Session Description Protocol) 를 교환하며 Peer Connection 연결 webRTC 연결이 필요한 페이지들에서 webRTC 연결을 담당하는 컴포넌트를 유지함으로써 연결이 끊기지 않게 유지 다른 클라이언트들과 연결된 Peer Connection의 정보는 각 클라이언트에서 관리됨 더 이상 webRTC 연결이 필요 없는 경우 연결을 초기화함 WebSocket WebSocket을 이용하여 서버에 게임 진행 관련 데이터를 전달함 ( 게임 준비, 시작,..
[TIL] 실전에서 배우기
좋은 레퍼런스 좋은 프로젝트는 코드도 좋다. 코드를 많이 많이 살펴보고 기술도 뭐 쓰는지 배워보자 GitHub - woowacourse-teams/2022-moamoa: 🪐 스터디를 "모아모아" 🪐 🪐 스터디를 "모아모아" 🪐. Contribute to woowacourse-teams/2022-moamoa development by creating an account on GitHub. github.com 참고하기 정말 좋은 코드들이 많은 프로젝트이다. min-height child height 100% 모달 제작중에 min-height를 설정해준다음 내부 요소가 많아지면 늘어나는 형태를 하고 싶었다. 하지만 min-height를 설정해주면 내부 height 100%가 잘안먹힌다 height: 1px; ..
[TIL] 느려터진 apt를 구제해주세요
ubuntu apt가 속도가 너무 느리다.. 며칠 전부터 vscode 업데이트할 때도 몇시간 걸리는 걸로 뜨고, java sdk를 설치하려고하니 거의 불가능한 정도의 설치 속도를 보여준다. [ Windows ] WSL2 Ubuntu 20.04를 22.04로 업그레이드 하기 WSL2 Ubuntu 20.04를 22.04로 업그레이드 하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ WSL Ubuntu 22.04로 업그레이드 하기 ] 입니다. : ) 0. Ubuntu 22.04 - Ubuntu 22.04 LTS Jammy Jellyfish 는 Canonical Linux OS의 장기 goddaehee.tistory.com 일단 WSL Ubuntu를 업데이트 시켜보라는 stackoverflow의 조언이 있었다..
[항해99] 8주차 실전프로젝트(1) 회고
이번주 한 일 TEAM 1. 프로젝트 기획 프로젝트 기획을 이틀이나 하게되었는데 이유는 한번 엎었기 때문이다. 기획을 엎는 결정이 상당히 힘들었지만, 기획에 치명적인 결함이 있다는 게 느껴졌기 때문에 하루를 더 들여서 기획했다. 결론은 텔레스트레이션 like인 그림 게임을 하게 되었다. 우리 식대로 조금의 차별화가 될 예정이다. 2. API 명세 API 명세를 작성하는 게 쉽지 않았다. 웹소켓 통신이 필요했기 때문인데, 이게 스펙이 웹소켓이어야 하는지 웹소켓이라면 어떻게 주고 받아야 할지가 상당히 애매했다. 일단 수정이 많이 필요하게 되겠지만, 대충 이런 기능에 이런 게 필요하겠다는 정도만 짚고 넘어갔다. 3. ERD 작성 ERD도 api 명세와 마찬가지로 데이터 베이스에 어떤 것들을 저장해야하는지 확실..
[React] React 배포하기 (EC2, S3)
프로젝트 빌드하기 이 글을 보고계신 분들은 이미 리액트 프로젝트가 있을거라고 생각한다. 빌드 명령어를 통해서 파일을 빌드한다. $ npm run build $ yarn build CRA를 사용했다면 build 폴더가 생성되면서 빌드 파일들이 들어있다. index.html과 js로 파일들이 변환된다. 이 상태로 서버에 올려봤자 서버에 접속한 사용자는 어떤 화면도 볼 수 없다. 서버에 접속할 때 사용자는 index.html을 볼 수 있도록 설정을 해주어야 한다. S3 이용하기 이 때 S3의 정적 웹사이트 배포를 이용하면 접속할 때 index.html과 js를 브라우저에서 확인할 수 있도록 할 수 있다. 이 기능을 이용하면 따로 해주어야하는 것이 없기 때문에 React를 배포할 때 대부분 S3서버를 이용한다...
[React] Github Actions로 CI/CD 적용하기
S3 서버 CI/CD를 적용하기 이전에 배포할 서버부터 만들어야 한다. 배포 서버는 S3를 이용하도록 하겠다. S3관련해서 글을 정리할려고 했지만 이 글 만큼 정리가 잘 되어있는 글은 없는 것 같다. AWS S3로 React 배포하기 AWS S3, CloudFront, Route 53을 사용해서 React 배포하기 velog.io S3배포가 마치면 CI/CD도 설정하러 가보자 CI/CD CI/CD는 Continuous Integration / Continuous Deployment의 약자이다. 지속적 통합과 지속적 배포가 하나가 되어야 하기에 자동 배포로만 이해했다면 반만 이해했다고 볼 수 있다. Github Actions라는 너무 좋은 기능이 나와서 대부분 요즘에는 이것을 사용하는 것 같다. CI/C..
[Vite] vite로 이유 모르게 웹소켓 통신이 안되는 경우(ws, sockjs)
springboot로 만든 시그널링 서버와 react의 클라이언트 연결을 시도하는 중에 이유를 알 수 없게 연결이 되지 않았다. 여러 차례 다시 확인해봐도 코드 상으로 전혀 문제가 없는데, 연결이 전혀 되지 않았다. 이상한 느낌이 들어서 똑같은 코드를 cra해서 만들어보고 실행해보았다. 딱 한가지의 차이점이 있었는데 vite쪽 웹 소켓을 vite-hmr이라는 프로토콜을 사용하고 있었다. switching protocols가 발생하면서 cra는 /ws가 붙지만 vite는 붙지 않는다. 물론 cra로 진행한쪽은 통신이 잘된다. HMR은 Hot Module Replacement의 약자로 애플리케이션을 다시 시작하지 않고도 일부 컨텐츠만을 갱신할 수 있다는 vite의 특징이자 장점이다. 하지만 통신 프로토콜과는..