@emotion을 사용하다보면 흔히 아래 오류를 볼 수 있다.You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop).,You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but ra..
https://github.com/woowacourse-teams/2023-team-by-team/pull/901 [FE] 모바일에서 하단 메뉴 잘리는 버그 픽스 by hafnium1923 · Pull Request #901 · woowacourse-teams/2023-team-by모바일에서 하단 메뉴 잘리는 버그 픽스 이슈번호 close #900 PR 내용 모바일에서 어색하게 보였던 부분 수정 헤더 크기 줄임 네비바 크기 줄임 채팅 gap 줄이고 글씨크기 줄임 브라우저 하단에 가렸github.com 팀바팀의 모든 모바일 뷰를 내가 구현하게 되었는데,,, 모바일과 컴퓨터에 따라 같은 페이지를 다른 방식으로 보여줘야했다. 때문에 홈페이지에 접속한 디바이스에 따라 판단해서 보여주기로 했다.유저 디바이스 정보..
아아 진짜 너무 귀찮습니다 아주 귀찮아요 SSE로 채팅 구현하는거? 진짜 너무나도 후회가 됩니다만 어쩔수없죠 이미 벌어진 일.. N개월간 실시간 채팅 버그 픽스했는데 글쓰는데도 N주가 걸린다니… 다들 추천하지 않는다면 그 이유가 있다는 것을 다시한번 깨닫습니다.(여러분도 명심하십쇼)기존 팀바팀에서 실시간 채팅을 구현한 방식은SSE 연결 → 이벤트 발생 → 채팅 조회 요청 → 렌더링의 무한 반복이었다. 채팅처럼 잦은 이벤트가 발생할 시 다수의 인원이 데이터 조회 요청을 보내니 서버에 과부하가 걸리는건 당연지사.. 팀바팀도 팀당 3명 이상의 인원이 동시에 요청을 보내면 채팅이 어마어마하게 느려졌다. 이를 위해 백엔드도 물론 조치를 취했지만 그보다 더 중요한 것은 조회요청을 알잘딱깔센하게 보내는 것.. (이거..
팀바팀 서비스를 우리가 직접 사용하며 느낀점은 팀 피드.. 실시간이었으면 어땠을까? 였다. 우리는 프로젝트하면서 팀 피드에서 토론을 했는데 다른 팀원의 의견을 보기위해서는 새로고침이나 창 바꿈이 필요하여 팀 피드를 사용하는 것이 현실적으로 많이 불편했다.🥸우리도 우리 서비스가 불편한데 사용자는 만족할 수 있을까?🥸라는 의견에서부터 나온 팀 피드 실시간화!🎊이 글에서는 SSE를 채택한 이유와 어떻게 구현했는지를 작성할 예정이다.왜 SSE 였을까?사실 SSE를 사용하는 것 보다 웹소켓을 사용하는 편이 다양한 문제를 만날 필요 없긴 하다.(당연함;; 웹소켓이 SSE 상위호환이니까) 그럼에도 팀바팀은 SSE를 선택했는데.. 아래에서 다른 방식도 설명하면서 이유를 정리해보겠다.HTTP 프로토콜 사용HTTP ..
팀바팀의 팀 피드 기능에 무한스크롤 기능이 있어서 구현해보았다. 사실 이 기능은 레벨3때 구현했는데 레벨4와서 요구사항이 바뀌는 바람에.. 정방향 무한스크롤(아래로 스크롤 할 때 무한스크롤)과 역방향 무한스크롤(위로 스크롤 할 때 무한스크롤) 둘다 구현하는 경험을 가져서 글을 작성하게 되었다.무한 스크롤 구현나는 useInfiniteQuery와 IntersectionObserver 사용하여 구현했다. 사실 스크롤 이벤트를 이미 사용하고 있기 때문에 스크롤 이벤트로 구현해도 되긴 하는데 계속 요구사항이 바뀌고 있어 현재 스크롤 이벤트를 사용하는 컴포넌트가 삭제가 될 수 있다는 점과 다음 fetch를 진행해야하는 트리거로 사용하기에 IntersectionObserver 가 좀 더 나에겐 편해서 사용하게 되었..
webpack은 정적 모듈 번들러로 웹에서 사용되는 모든 자원을 번들링 해주는 도구이다. HTML 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링 이라고 한다. 그동안 프로젝트를 할 때 CRA로 프로젝트를 시작했는데, CRA로 프로젝트를 생성한다면 필요없는 의존성을 가지게 되는 경우가 있기도 한다. 따라서 이번 프로젝트를 시작하면서는 우리가 필요한 설정만 입맛대로 할 수 있도록 webpack을 이용해보았다. 공부한다고 >유스 { config.resolve!.plugins = [new TsconfigPathsPlugin()]; return config; }, }; export default config; 6-2. storybook preview.tsx 설정 s..
