전체 글

[크롬 익스텐션: 06] StompJs & SockJs, 디자인 및 구현 - 2

해당 페이지는 클라이언트 측 예시 페이지이다. 아직까지 로그인 및 로그아웃만 구현되어있어 상당히 여백의 미? 를 강조하고있다 ㅎ... 우측 하단부에 보면 + 버튼을 볼 수 있는데, 크롬 익스텐션의 display 속성을 바꿔주며 채팅창을 보여주고, 가린다. 물론, 해당 서비스의 회원이 아니어서 엑세스 토큰을 발급받지 않은 상황이거나, 크롬 익스텐션을 사용하지 않는 웹은 버튼 및 채팅창이 보이지 않는다. 해당 서비스(웹)의 크롬 익스텐션 사용 여부 및 엑세스 토큰 발급 여부는 이벤트 리스너를 통해 통신하도록 하였다. // Client Component // Let Chrome Extension know you are using app useEffect(()=>{ document.dispatchEvent(ne..

[크롬 익스텐션: 05] StompJs & SockJs, 디자인 및 구현 - 1

저번 포스트에 이어, 생각보다 많은 부분들이 개발되었다. 우선, 서버가 개발되어 StompJs 와 SockJs를 이용하여 소켓 통신 테스트를 해볼 수 있었다. 우선 진행하기 앞서, sockjs를 지난 포스트에서 스프링과 소켓 통신을 자주 사용한다 하였는데, STOMP는 무엇인가?? STOMP is the Simple (or Streaming) Text Oriented Messaging Protocol 즉, STOMP는 텍스트 기반의 메세징 프로토콜로, STOMP 브로커를 사용하는 다양한 언어와 플랫폼, 브로커들 사이의 메세지 전송을 간편하게 한다. 제작한 서버는 STOMP의 브로커를 바탕으로 만들어진 Spring 서버이다. 따라서 클라이언트 측도, StompJs를 활용하면 훨씬 수월하게 연결 할 것이다...

[리펙토링: 나들서울] Debounce & Throttling

삼성청년소프트웨어아카데미를 수료하며, 진행했던 프로젝트 중, 가장 애착이 있고 많은 노력을 쏟은 "나들서울" 프로젝트의 리펙토링을 진행하기로 하였다. 기존 끝내지 못했던 버그들을 완료 한 후 (렌더링 버그, Reducer 버그 등...) 프로젝트를 더욱 enrich 할 요소들을 탐색하던 중, 큐레이션의 꽃이자 프로젝트의 메인 요소 중 하나인 "좋아요" 및 "찜하기" 버튼과 관련된 부분을 건들여보고자 하였다. http://nadeulseoul.ga/ 나들서울 nadeulseoul.ga SNS 큐레이팅 웹 서비스 답게, 사용자는 큐레이터들의 코스를 찜할 수 있고, 지도에서 찾아 본 장소를 "좋아요"로 저장하여, 추 후 활용 할 수 있다. 현재 배포된 버전을 기준으로, 좋아요 버튼은 수시 때때로 먹통이 된다...

[크롬 익스텐션: 04] 클라이언트 - 소셜 로그인

이번 토이 프로젝트의 주된 의도 중 하나인 소셜 로그인을 해보기 위해 (이전 프로젝트에서 OAuth2와 Node openID를 써본 경험은 있지만) 클라이언트 사이드를 구축하였다. 우선, 소셜 로그인은 카카오톡의 카카오로그인 (https://developers.kakao.com/docs/latest/ko/kakaologin/common)을 활용하였다. 우선 기초 설계로써, 프론트엔드와 백엔드가 어느 부분 까지 담당하고, 데이터를 넘겨주고 받을 것인지 정하는 것이 중요하다. 어느 부분이 무엇인가? 위의 그림을 보면 세개의 도메인에 토큰을 주고받는 과정을 확인 할 수 있다. 가장 좌측 BusinessClient는 Frontend Client, OAuth Server는 엑세스토큰을 발급해주는 KakaoLogi..

[크롬 익스텐션: 03] sockjs-client를 이용한 소켓 통신

크롬 익스텐션을 다루고 있는 가장 중요한 이유 중 하나였던 메인 기능, 소켓 통신을 이용한 채팅 구현... 해당 기능을 구현하기 위해 최소한의 UI를 완성하고, 개발에 들어갔다! 아래는 저번 포스트에 이어 개발 된 UI의 모습...! 우선 왼쪽의 화면은 제외될 수 도 있다... 2가지의 경우에 따라 다르게 될텐데 1. URL을 직접 유저에게 입력받는다. 해당 서버로 연결한다. 2. 탭 혹은 페이지에 입력된 URL을 바탕으로 서버에 연결을 시도한다. 2가지의 경우 중 어떠한 경우가 더 좋을지, 기술적으로 가능할지를 아직 고려하고있다... 아무래도 단일 어플리케이션으로써의 가치가 빛나려면 2번이 맞고, 이렇게 될 경우 어플은 독립적으로 알맞은 세팅을 이룬 서버와는 자동 연결되게 한다. 하지만 그렇게되면, 다..

[크롬 익스텐션: 02] Manifest V3

Chrome Extension을 개발하기 위한 Manifest V3는 다양한 UI를 제공한다. 그리고 그 UI를 핸들링하기 위해서는 manifest.json을 잘 파악하고 시작해야 한다. 혼자서 처음부터 해야 잘 알지 하며.... 이것 저것 만져보다가... 결국 boilerTemplate을 찾았고... 현실과 타협했다... 솔직히 귀찮은건 질색이긴하다.... (boiler template - https://github.com/lxieyang/chrome-extension-boilerplate-react) TypeScript 지원, Manifest V3 기반, 깔끔하게 놓은 폴더 구조, 코드 변경에 따른 자동 리로드 등 꽤나 잘 만든 보일러템플릿이라고 생각한다! 다시 돌아와서 우선, 가장 공통적이고, 다수..