분류 전체보기

[Vite] vite로 이유 모르게 웹소켓 통신이 안되는 경우(ws, sockjs)

springboot로 만든 시그널링 서버와 react의 클라이언트 연결을 시도하는 중에 이유를 알 수 없게 연결이 되지 않았다. 여러 차례 다시 확인해봐도 코드 상으로 전혀 문제가 없는데, 연결이 전혀 되지 않았다. 이상한 느낌이 들어서 똑같은 코드를 cra해서 만들어보고 실행해보았다. 딱 한가지의 차이점이 있었는데 vite쪽 웹 소켓을 vite-hmr이라는 프로토콜을 사용하고 있었다. switching protocols가 발생하면서 cra는 /ws가 붙지만 vite는 붙지 않는다. 물론 cra로 진행한쪽은 통신이 잘된다. HMR은 Hot Module Replacement의 약자로 애플리케이션을 다시 시작하지 않고도 일부 컨텐츠만을 갱신할 수 있다는 vite의 특징이자 장점이다. 하지만 통신 프로토콜과는..

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

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

[TIL] 스토리북 찍먹하기

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

[항해99] 7주차 클론프로젝트 회고

👨‍💻클론 프로젝트 소개 원티드(wanted) 커뮤니티 클론 프로젝트 - 개발자들의 커뮤니티 Sokdak ⌨️ 💬 - 커리어와 라이프스타일에 대해 자유롭게 이야기 할 수 있어요 🙋🏻 클론 프로젝트 목표 미니 프로젝트와 비슷한 규모의 스코프 + 도전하고 싶은 기능 한 가지 (FE/BE 서로 합의 하에!) 클론 코딩이라고 모든 것을 복제할 수는 없습니다! 화면 구성은 동일하게 하되, 하나의 기능을 완료 후, 차근차근 추가해보세요 FE 기술 스택 react styled-components amazon s3 axios : ajax redux-toolkit : 전역 상태 관리 라이브러리 vite : 빌드 툴 react-hook-form : 유효성 검사에 유용한 훅 react-cookie : 쿠키 관련 처리 훅 r..

[TIL] 불편함을 못느꼈다면 그건 너무 잘 만든 것

📝알고리즘 문제 풀이 GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다. 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다. Contribute to synuns/algorithm-study development by creating an account on GitHub. github.com 동적 계획법(DP) 연습하기 좋은 문제. 개념만 이해하면 코드는 쉽게 쓸 수 있는 문제라서 연습하기 딱 좋다. 원티드 클론 코딩 디자인 시스템 프로젝트에 theme을 적용해보기 시작하면서 theme을 어떻게 구성하는지 궁금했다. 원티드 페이지에서는 이렇게 엄청나게 많은 css 세팅이 존재한다. 컬러 포인트가 파란색이라고 그 외에는 그렇게 많지 않을 거..

[항해99] 6주차 미니프로젝트 회고

백엔드와의 첫 협업을 경험하는 주차였다. 게시판에서의 CRUD만 기획하고 진행했다. 항해에서는 쉬어가는 주차라고 누누이 이야기했지만, 나에게는 심적으로 굉장히 힘들었던 주차였다. 하차하는 인원들이 너무 많아지면서 정들었던 동기들이 나가게 되면서 마음이 너무 힘들었다. 반 분위기도 어수선해지면서 안그래도 공부만 해도 힘든데 나만 잘해도 힘든 마당에 다른 것들이 전부 신경 쓰이다 보니 다들 한 번쯤은 하차를 고민했던 주차였던 것 같다. 그래도 버팀목이 되어주는 사람들이 있어서 마음을 다잡을 수 있었다. 힘이 되어준 같은 반 동기들에게 너무 감사한 마음이다. 미니 프로젝트는 결국 프론쪽 배포를 못하고 끝마쳤는데 상당히 씁쓸했다. 백엔드 팀원들에게 상당히 미안한 마음도 들었다. 팀원분들은 프론트 인원이 너무 부..

[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..