전체 글

[Vite] Vite proxy 설정 (Error: connect ECONNREFUSED ::1:8000 at TCPConnectWrap.afterConnect [as oncomplete])

문제상황 현재 React 프로젝트에서 Vite를 사용하고 있다. 리액트는 빌드되어 백엔드에서 정적 파일로 배포할 것이다. 따라서, 현재 리액트에서 보내는 요청은 모두 localhost:8000/api로 시작하는 주소로 보내고 있다. 따라서 배포가 된다면 {서버 IP}:8000/api로 보내야 할 것이다. 같은 서버에서 백엔드가 정적 파일을 전달할 것이기 때문에 클라이언트는 상대경로를 이용해 api 요청을 보낼 수 있을 것이다. (/api/test => {서버 IP}:8000/api/test) 하지만, 로컬의 경우는 여전히 localhost:8000으로 api 요청을 보내야 한다. 해결과정 이를 해결하기 위해 proxy 설정이 필요했다. 개발 환경에서 보내는 요청은 localhost:8000으로 보내고 빌..

[네이버 부스트캠프] 네이버 부스트캠프 웹・모바일 8기 그룹 프로젝트 2주차 회고

2주차가 끝났다. 그룹 프로젝트의 1/3을 진행했다. 우리 팀은 빠른 개발 속도를 앞세워 다양한 기능을 구현하고 있다. WebRTC와 관련된 부분은 어느정도 안정되었고 이제 남은 기능은 공동편집, 채팅 기능이 있다. 우선 기능을 만들고 개선하는 작업이 필요할 것 같다. 잘한 점 UX적인 측면을 개선해볼 수 있는 도전을 했다. 팀원과 얘기하는 과정에서 코드 에디터에 하이라이팅이 들어가면 UX적으로 더 좋을 것 같다는 생각을 갖게 되었다. 하지만, 내가 만들었던 textarea에는 부분적으로 색을 입히는 등의 커스텀을 할 수 없었다. 또한, python을 기본으로 지원하는 에디터를 만들었지만 python의 키워드들을 파싱해서 색을 입히는 작업에 들어가는 시간도 만만치 않을 것 같았다. 따라서, 세부적인 내용..

WebRTC란 무엇이며 어떤 과정을 갖는가?

WebRTC라는 개념이 있다. WebRTC는 무엇을 위한 기술이며 어떤 과정을 거치게 될까? WebRTC란? Web Real-Time Communication. 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술 WebRTC를 구성하는 일련의 표준들은 플라그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유와 화상 회의를 가능하게 한다. 쉽게 생각해서 P2P 실시간 커뮤니케이션이 가능하게 해주는 기술이다. WebRTC를 사용하면 카메라, 마이크를 넘어 고급 영상 통화 애플리케이션 및 화면 공유 등에도 활용 가능하다. WebRTC의 과정 WebRTC를 사용하기 위해서는 어떤 과정이 필요할까?..

[네이버 부스트캠프] 네이버 부스트캠프 웹・모바일 8기 그룹 프로젝트 1주차 회고

본격적으로 그룹 프로젝트가 시작되었다. 다양한 사람들을 만나서 다양한 프로젝트를 했지만 기존과 마음가짐이 약간 다른 것 같다. 기존에는 "어떤 서비스를 만들것인가"에 집중했다. 화려하고 다양한 기능을 가진 서비스를 시간안에 만드는 것이 목표였다. 하지만, 이번 그룹 프로젝트는 서비스를 만드는 과정에서 "어떤 기술적 도전을 할 것인가"에 대한 고민을 하게 되었다. 단순히 서비스를 만드는 것에 그치지 않고 기술적 도전을 통해 성장하는 발판이 되었으면 좋겠다. 들어가며 이번 우리 서비스의 주제는 "실시간 공동편집"이다. 실시간으로 소통하며 코드를 공동편집 할 수 있는 웹 서비스를 기획하게 되었다. 이 과정에서 화상채팅, 텍스트 채팅, 코드 공동 편집 기능이 필요했다. 각각의 기능을 구현하기 위해 필요한 기술로..