Frontend

이 글은 아래의 글 부터 이어집니다. https://0422.tistory.com/332 실시간 동시편집 구현 연대기 (1) - CRDT와 OT 들어가며 네이버 부스트캠프에서 진행중인 그룹프로젝트로 algoitni라는 알고리즘을 동료, 친구들과 화상, 음성, 채팅을 공유하며 코드를 함께 작성할 수 있는 서비스를 만들고 있다. https://algoitni 0422.tistory.com 우리 프론트엔드 팀은 우선은 CRDT 구현에 도전해보기로 했다. 굉장한 기술적 도전이 될것이라 판단했기때문이다. 어떻게 구현하지? 구현하기위해서는 필요한 것들부터 알아야한다. CRDT, 즉, 클라이언트 측에서 원활하게 상호 병합을 문제없이 하기위해서는 어떤 조건을 만족해야할까? A 사용자에서 병합하나, B 사용자에서 병합하..

들어가며 네이버 부스트캠프에서 진행중인 그룹프로젝트로 algoitni라는 알고리즘을 동료, 친구들과 화상, 음성, 채팅을 공유하며 코드를 함께 작성할 수 있는 서비스를 만들고 있다. https://algoitni.site/ 😺 AlgoITNi 너 알고리즘 얼마나 알고있니? algoitni.site 실시간 동시편집 이번 프로젝트에서 가장 어려운 문제는 코드를 함께 작성할 수 있는 이었다. (사실 쉬운게 없었다...) 다행히도 시중에는 이런 기능을 제공하는 프로그램들이 꽤 있다. Google Docs, Notion이 그렇다. 이들은 어떻게 구현했을까? OT와 CRDT 알아보기 실시간 동시편집을 구현하는데에는 크게 두가지 기술을 적용시킬 수 있다. OT (Operational Transformation) OT..

쿠키에 대한 개념, CORS간 쿠키요청에 대한 글은 이전 글을 참고해주면 된다. 참고 이 글은 배포환경에 아닌(배포환경은 same-site다) 개발환경에서의 cross-domain, 즉 localhost와 백엔드 서버간의 쿠키 인증, 그리고 api테스트에 대해 다룬다. 여기서 설정한 것들은 배포환경과는 별개의 로직이다. 배경과 문제상황 도입하게 된 배경 우리 서비스는 OAuth2.0을 사용해 구글, 깃허브 로그인을 진행하고, 이후에 얻어지는 서버 자체의 JWT토큰을 set-cookie를 통해 httpOnly쿠키를 set해주는 방식으로 인증을 구현했다. 들어가기에 앞서 우리 서비스의 쿠키 옵션을 살펴보자. httpOnly O secure O same-site Lax httpOnly JS로는 쿠키를 조작할 ..

모달이란 무엇인가? 모달은 이목을 집중시키기 위해 사용하는 화면 전환 기법이다. 프론트엔드에서는 반드시 구현하게 되는 그것이다. 공통 모달을 위하여. 왜? 모달이 딱 하나라면 딱히 고민하지 않겠지만, 우리 서비스는 정말 모달이 많다. 반복해서 사용되기에 이를 공통 컴포넌트로 만들어줄 필요가 있었다. 더불어, 모달 자체 규격이 존재하지 않았기에 조금 더 고민해볼 필요가 있다. 어떻게 구현할 것인가? 모달을 구성하는 방법을 찾아보니 여러 방법이 있지만 크게 두 가지로 분류되는 것 같았다. 1. 루트에 하나만 생성하여 전역 상태(type, props)를 변경하며 재사용 이런 느낌으로 사용할 수 있을 것이다. export const ModalWrapper = () => { const { setModalState..

WebRTC를 사용하게 된 이유 화상 공유, 음성 공유가 필요했기때문이다. WebRTC를 사용하면 웹어플리케이션 및 사이트가 별도의 소프트웨어 없이 웹 브라우저에서 음성, 영상, 미디어 , 텍스트, 파일까지 주고받을수 있다. WebRTC란 WebRTC는 Web Real-Time Communications의 약자로 웹상에서 실시간 통신이 가능하게 해주는 기술이다! 기본적으로 WebRTC는 P2P통신에 최적화 되어있다. 1:1 통신상황을 그림으로 표현하면 이런 상태인 것이다. 그런데 이렇게 연결하기란 쉬운일이 아니다. 기본 동작 P2P연결은 초대장을 생각하면 이해하기 쉽다. 서로가 서로에게 초대장을 보내고, 연결을 수락하면 P2P연결을 시작한다. 그런데 어떻게 서로에게 초대장을 보낼 수 있을까? Client..

기존에 웹서버를 직접 구현해봤었는데, 이제는 그 원리를 알았으니, 이미 만들어진 좋은 도구를 사용해야할 때라고 생각해서 번들러를 도입하고자 했다. 그러던 중, 어떻게 번들링이 일어나는지 의문이 생겼고, 번들링 과정에 대해 찾아보게됐다. 번들러를 왜쓰고, 기능은 무엇이 있으며, 어떻게 번들링이 일어나는지 알아보자. 번들러 왜쓰는데 React, Angular, Vue 등 프레임워크가 등장하고, 점점 js파일이 많아지면서 하나의 페이지에서 사용되는 js파일들이 엄청나게 많아지기 시작했다.이러면 한 페이지가 로드될때 모든 js파일을 네트워크를 통해 받아와야 한다. 번들링 없이 ESM만을 사용해 만든 프로젝트의 경우, 이런식으로 모든 js파일을 http요청을 통해 받아오는 것을 확인할 수 있다. 이 모든 파일을 ..

이전 게시글 (https://0422.tistory.com/312) 을 통해 나름대로 웹서버를 구현해보았다. 그렇다면 진짜 사용되는 모듈들은 어떻게 구현되어있는지 확인해보자. webpack-dev-server 이녀석은 서버를 어떻게 띄우고 있을까? 이건 examples에 있는 코드인데, 확인해보면 lib/Server에서 Server Class를 가져와서 server인스턴스를 만든 후 server.start()를 통해 시작시키고 있는 것을 확인할 수 었다. 그럼 Server Class를 뜯어보자. https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js 여기서 확인해보자. 확인해볼만한 부분은 1번과 2번일 것이다. 일단 initiali..

프론트엔드 개발을 해본 사람이라면 vscode의 live-server, webpack-dev-server, vite등등 다양한 도구를 사용해서 프론트엔드 서버를 띄워본 경험이 있을 것이다. 심지어 express를 사용한 서버에서도 static 설정만 하면 전부 설정이 완료된다. 그런게 나는 지금까지 이런 도구를 사용하면서 과연 이게 어떻게 동작하는가?에 대해서는 한번도 생각해본 적이 없었다. 이번 기회를 통해 제대로 파악해보자. createServer https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 J..

지금까지 테스트를 작성하려고 노력은 했지만 돌이켜보니 클라이언트 코드에서는 한번도 테스트코드를 작성한 적이 없었다. 유지보수하기 좋은 코드를 쓰려면 테스트코드는 필수라고 생각한다. 문제점 내가 사용하는 jest는 node환경에서 돌아간다. 브라우저와 node환경은 다르다. 여기서 문제가 되는 부분은 node에는 DOM객체와 API가 없다는 것이다. 이걸 어떻게 사용해볼까? 고민을 했다. 서치 결과가 대부분 리액트에서 테스트하는 방법이라는 문제가 있어서 좀 더 오래 걸린 것 같다. jsdom jsdom은 이전 RSS파싱을 통한 블로그 피드 제작에 썼던 라이브러리라 사용방법을 알고있었다. nodejs환경에서 DOM요소를 건드릴 수 있게 해준다. https://www.npmjs.com/package/jsdom..

https://blog.cau-likelion.org/ CAU-Likelion Blog 멋쟁이 사자들을 위한 블로그 피드 blog.cau-likelion.org 멋사 중앙대만을 위한 블로그 피드를 제작해보았다. nextjs와 typescipt를 사용해서 간단하게 rss를 파싱하는 방식으로 진행했다. RSS란 Rich Site Summary또는 Really Simple Syndication의 약자로, 어떤 사이트에 새로운 컨텐츠가 올라왔을때, 해당 사이트를 방문하지 않고 컨텐츠를 이용하기 위한 방법이다. 블로그별 RSS주소 tistory : [blogName].tistory.com/rss velog : v2.velog.io/rss@[velogID] naver : rss.blog.naver.com/[nave..