TIL
[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] 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] 실전에서 배우기
좋은 레퍼런스 좋은 프로젝트는 코드도 좋다. 코드를 많이 많이 살펴보고 기술도 뭐 쓰는지 배워보자 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] 불편함을 못느꼈다면 그건 너무 잘 만든 것
📝알고리즘 문제 풀이 GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다. 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다. Contribute to synuns/algorithm-study development by creating an account on GitHub. github.com 동적 계획법(DP) 연습하기 좋은 문제. 개념만 이해하면 코드는 쉽게 쓸 수 있는 문제라서 연습하기 딱 좋다. 원티드 클론 코딩 디자인 시스템 프로젝트에 theme을 적용해보기 시작하면서 theme을 어떻게 구성하는지 궁금했다. 원티드 페이지에서는 이렇게 엄청나게 많은 css 세팅이 존재한다. 컬러 포인트가 파란색이라고 그 외에는 그렇게 많지 않을 거..
[TIL] 씁쓸한 마무리
미니 프로젝트 종료 😭아쉬웠던 점 발표 내용중 게시판을 카드나 리스트를 나열하는 방식은 많이 구현해봐서 게시글을 다른 방식으로 특별하게 보여주고 싶었는데요. 이 부분에서 슬라이더를 제작했는데 기획에 맞게 슬라이더를 커스텀하는 부분에서 많은 시간이 걸렸습니다. 전역적으로 관리해야하는 데이터가 있는지 고민을 많이 해보았는데요. 각 페이지에서 전역적으로 관리해야하는 데이터나 관리한다고 얻을 수 있는 이점이 없다는 생각이 들어서 기술 스택에 redux-toolkit이 올라가 있기는 하지만 결국 redux를 사용하지 않기로 했습니다. msw를 이용해서 mock data 작업을 했는데요. api 배포 이전에 통신 과정을 거쳐서 데이터를 실제로 데이터를 사용하는 것처럼 개발하다가 서버 배포 이후에 실제 api로 대체..
[TIL] 미니 프로젝트 기술 레퍼런스 찾기
Vite 환경변수 설정 가장 흔하게 리액트앱을 만드는 CRA (create-react-app)의 경우 .env 파일에 REACT_APP_을 prefix로 써야 리액트 앱이 인식할 수 있다. 그리고 앱에서 process.env.으로 접근하여 사용할 수 있었다. Vite는 따로 dotenv 패키지를 설치해주지 않아도 되고, 공식 문서에 따르면 파일 prefix를 VITE_로 적어줘야 한다고 한다. 그리고 앱에서 import.meata.env.로 접근할 수 있다. https://velog.io/@riley_dev/React-vite%EC%97%90%EC%84%9C-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-.env-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0 [Re..