분류 전체보기

들어가며 네이버 부스트캠프의 그룹프로젝트 과정에서 진행했던 AlgoITNi의 배포전략, 선택한 이유, 방법들을 기록해두고자 한다. 프론트엔드에서 배포는 어떻게 이뤄지는가? 프론트엔드의 배포는 결국 html,css,js 정적파일을 서빙하면 끝이다. (SSR 제외) 좀더 세부적인 동작은 이전에 작성한 아래의 게시글을 참고해주면 좋을 것 같다. https://0422.tistory.com/312 프론트엔드 웹서버 직접 만들기 (1) - Content-Type, MIME 프론트엔드 개발을 해본 사람이라면 vscode의 live-server, webpack-dev-server, vite등등 다양한 도구를 사용해서 프론트엔드 서버를 띄워본 경험이 있을 것이다. 심지어 express를 사용한 서버에서도 static ..

부스트캠프의 모든 과정을 마쳤다. 정말 길다면 길고 짧다면 짧은 5개월 굉장히 많은것을 배우고, 느낄 수 있었다. 배우고 느낀것을 챌린지, 스프린트, 그룹프로젝트로 크게 3가지로 나누어서 살펴보자. 챌린지챌린지에서는 CS미션이 매일매일 쏟아지며 정말 힘겹게 미션을 해결했던 기억이 있다. 챌린지를 통해서는 어떻게 큰 문제를 작은 문제로 분할할 것인지, 그 방법을 터득할 수 있었다 정의조차 잘 되지 않는 거대한 문제를 마주하다보니 어렵기도 어렵거니와 좌절감을 느끼기도 했었다. 하지만 4주동안의 훈련 과정을 통해 문제를 해석하고, 해결하기 위한 작은 체크포인트를 만들고, 하나씩 정복해나갔다. 챌린지에서 배운 것들을 되돌아보자. 소통을 통한 함께자라기챌린지를 통해 정의되지않은 답이 존재하지 않는 문제에 대해 토..

https://0422.tistory.com/334 실시간 동시편집 구현 연대기 (3) - Yjs를 도입해보자 이전 게시글에서 문제가 있어서 Yjs를 도입하기로 했다. 이 글을 통해 어떻게 도입했는지 작성해보려고한다. Yjs알아보기 공유 타입 선택하기 Yjs는 다양한 타입을 지원한다. map도있고, array도 있 0422.tistory.com 이전 게시글에서 CRDT를 Yjs를 사용해서 구현했다. 하지만, 언젠가는(하겠지...?) 직접 구현해놓고 싶기때문에 라이브러리를 통해 만들어둔 기능을 언제든 내가 만든 모듈로 교체할 수 있도록 처리해둘 것이다. 문제점 실제 구현부인 handleRecieveCodeMessage, 즉 통신을 통해 다른 피어의 코드 데이터를 받았을때의 로직인데, 대부분이 Yjs의 모듈..

이전 게시글에서 문제가 있어서 Yjs를 도입하기로 했다. 이 글을 통해 어떻게 도입했는지 작성해보려고한다. Yjs알아보기 공유 타입 선택하기 Yjs는 다양한 타입을 지원한다. map도있고, array도 있다. 하지만, 우리는 코드 에디터니까 text를 선택했다. 이렇게 사용할 수 있다. insert를 통해 n번 인덱스에 문자를 삽입하는 형태다. toString을 통해 실제 텍스트를 얻어올 수 있다. delete역시 동일한데, insert와 다르게 length를 두번째 인자로 받는다. 어떻게 병합하지 여기서 핵심만 보자면 // Merge changes from remote const update = Y.encodeStateAsUpdate(ydocRemote) //update용 객체(Uint8Array다) ..

이 글은 아래의 글 부터 이어집니다. 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..

그룹 플랫폼 팀에 지원 이번 윈터테크 인턴십은 프론트엔드가 코어, 광고, 그룹플랫폼 3가지 형태로 구성되어있었다. 나는 이 중 광고와 그룹플랫폼에 지원했다. 그 중, 그룹플랫폼에 조금 더 신경을 써서 이력서를 작성했다. 왜냐하면, 창업과 서비스를 만들어내는 것에 관심이 있는 나와 잘 맞다고 생각하기 때문이었다. 팀에 참여한다면 부스트캠프에서 학습한 백로그 기반의 애자일 스프린트를 진행하면서 빠르게 소통하며 프로덕트를 만들어보는 경험을 해보고싶었다. 또한, 만든 프로덕트가 사용자에게 전달되는 과정을 확인해보며 사용자의 데이터를 확인하고, 어떻게 그 데이터를 프로덕트에 다시 활용하는지, 팀에서 데이터를 기반으로 어떻게 의사결정을 하는지도 확인해보고 싶었다. 그리고 결정된 내용을 코드를 통해 직접 구현해서 프..

부스트캠프 멤버십 그룹프로젝트 3주차를 마쳤다. 벌써 4주차다... 2주차 밖에 남지 않았다. 배운 것 이번주는 꽤나 많은 도움을 받은 한 주였다. 도움을 줄때도 기분이 좋지만, 이제는 도움을 받을때도 참 기분이 좋다. 그 사람이 나를 위해 시간을 내고, 같이 고민해줬다는 것에 참 감사하다. 개발 환경 개선하기 이전 주에 구현했던 내용들에 엣지케이스가 상당히 많아서 이번주에는 이 부분을 개선하려고 노력을 많이 했다. 그러나 우리 서비스의 경우에는 쿠키를 통해 토큰을 전송하기에, 로컬-배포환경의 차이가 발생할 수 밖에 없었다. 이걸 해결하지 못하면 개발시에 오류를 만나보지 못하게 되고 배포하기 전까지 확인하기 어렵다는 문제점을 맞이했다. 지금까지 개발-로컬환경의 차이가 이렇게 크게 나는 경우(로컬에서 ap..

쿠키에 대한 개념, 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..