개발일기

[TIL] 죽어있는 웹사이트에 생명 불어넣기

프로젝트가 게임인데 꽤 밋밋하다는 피드백이 있었다. 해결책은 이 세가지 정도 있을 수 있다. 1. 효과음 넣기 2. 애니메이션 넣기 3. 인터렉션 넣기 인터렉션은 디자인 및 여러가지 기획이 필요하기 때문에 당장에는 어렵고 1, 2번을 넣어보도록하자! 효과음 넣기 react에서 효과음 넣기 괜찮은 라이브러리를 발견해서 공부해본다. use-sound GitHub - joshwcomeau/use-sound: A React Hook for playing sound effects A React Hook for playing sound effects. Contribute to joshwcomeau/use-sound development by creating an account on GitHub. github.com..

[TIL] 소셜 로그인 한페이지에서 함께 처리하기

뭐가 문제일까? sns 인증 과정이후에 페이지 내에서 callback으로 토큰 값을 받아서 토큰 값을 서버로 보내주는 식으로 인증과정을 거쳐가고 있었다. 다만 이 설계가 한가지의 sns 로그인이었다면 문제가 없겠지만, 세가지의 sns 로그인을 처리하려면 각각의 sns로그인이 어떤 sns인지 식별할 수 있어야한다. 1. sns 인증 과정 이후 callback 2. url parameter에 code가 존재하면 token으로 로그인 api 요청 https://trys-ketch.com/login?code={token} 3. 서버의 로그인 절차 이후 response를 받아서 토큰값 쿠키에 저장 어떻게 처리하면 될까? 이전에는 이렇게 callback되고 있었는데, https://trys-ketch.com/log..

[TIL] SSE와 고군분투하기

SSE로 인한 Timeout 수정하기 SSE가 작동하고 있는 동안에는 다른 모든 요청이 느려진다. axios로 api를 호출하면 timeout이 발생한다. useRef를 붙여서 eventSource 객체를 관리해봤는데 이상하게 해결이 됐다. ⇒ (나중에는 결국 백엔드에서의 이슈였던 것으로 밝혀졌다고…) useRef의 원리에 따라서 증거를 찾아나가 보면, 모든 렌더링에서 동일한 객체를 제공하기 때문인 것 같다. 원래는 eventSource 생성을 함수 최상단에서 다음과 같이 생성했었다. const evtSource = new EventSource(${process.env.REACT\_APP\_API\_URL}/api/sse/rooms); const evtSource = useRef(null); const ..

[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. 폰트) 일단 ..

[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의 조언이 있었다..

[TIL] 더 열심히 하는 수 밖에

Vite + SockJS [Vite] vite로 이유 모르게 웹소켓 통신이 안되는 경우(ws, sockjs) springboot로 만든 시그널링 서버와 react의 클라이언트 연결을 시도하는 중에 이유를 알 수 없게 연결이 되지 않았다. 여러 차례 다시 확인해봐도 코드 상으로 전혀 문제가 없는데, 연결이 전혀 되 synuns.tistory.com 이거 때문에 이틀을 날렸다. 프로젝트 전에 웹소켓 연결을 한번 시도해보자고 하면서 vite로 프로젝트를 구성해버려서 vite의 프로토콜 설정이 달라 발생했던 문제였다. 결국에 CRA로 실행해서 해결했다. 해결했다고 보기에는 쉽지 않지만 아직 config를 설정하기에는 자료가 많지가 않다. 그래도 소스코드를 여러번 보면서 소켓 기능에 대해서 더 공부할 수 있었다...

[TIL] 스토리북 찍먹하기

스토리북 스토리북은 컴포넌트 기반의 뷰를 위한 독립적인 UI 개발 환경입니다. 처음 리액트를 기반으로 개발되었고, 이후 Vue, Angular, Web Components, Svelte 등 다양한 프레임워크를 지원하고 있습니다. 스토리북은 컴포넌트를 목록화하여 보고 싶은 컴포넌트를 언제든 확인 가능하도록 만들어줍니다.하나의 디자인 시스템이라고 생각하시면 편하실 것 같네요. 스토리북의 컴포넌트는 Mockup 상태 값을 넣어줄 수 있도록 되어있어 각종 상태 값에 따라 바로바로 디자인이 변경되는 것을 확인하실 수 있고 또한, 각 개체별로 볼 수도 있지만 페이지 단위로 여러 가지 컴포넌트를 묶어 보여줄 수도 있습니다. 위와 같은 기능을 제공함으로써 개발 요건을 반영하여 기획, 디자인 파트와 같이 확인하며 협업이..