티스토리

계속발전하는 개발자

검색하기

블로그 홈

계속발전하는 개발자

dmdwn3979.tistory.com/m

dmdwn3979 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[npm] 리액트 패키지를 만들어 npm에 배포해보자 - 1 개인적인 웹 프로젝트를 개발하고 있던 도중, 평소 관심이 많았던 스크롤 이벤트에 대해 상당히 열이 받아 있었다... 다양한 스크롤 이벤트들이 많고, 특히 꽤나 Fancy 한 (앱x 이라든지...) 웹들은 다양한 스크롤 이벤트를 바탕으로 새로운 패러다임을 보여주기도 하는데, 이러한 이벤트들을 직접 구현하려니 꽤나 복잡하였다... 하지만 레퍼런스를 안보며 직접 창조한다 생각하고 개발하면 재미가 있기에? 이어가던 도중, 꽤나 괜찮은 아이디어라 판단 된 컴포넌트를 구상하게 되었다. 하나의 프로젝트만을 위해 이 컴포넌트를 만들어? 하기엔 너무 아까워 생각하던 와중, 오픈소스에 기여도 할 수 있고, 공부도 될겸 npm 패키지를 배포해보자라는 생각을 하게 되었다! 서론이 길었지만, 천리길도 한걸음 부터, 우선 Rea.. 공감수 0 댓글수 0 2023. 5. 30.
[구글 애널리틱스: 01] Google Analytics 이해하기 현재 개발 및 유지보수하게 된 서비스는 광고에 높은 수익 비중을 두고 있다. 따라서 광고를 효율적으로 노출하는 여러 방법과 관련된 기술을 익힐 필요성을 느끼게 되었고, 또한 그 속에서 사용하게 된 Google Analytics를 잘 사용할 줄 알아야 될 것 같다는 필요성 또한 느끼게 되었다. 구글 아날리틱스 Collection: 유저 인터렉션 데이터 수집 Configuration: 데이터 프로세싱 관리 Processing: 유저 인터렉션 데이터를 설정(Configuration)에 따라 처리 Reporing: 처리 된 모든 데이터에 접근 부여 analytics.js 제공하는 기능 유저가 사이트에서 보내는 총 시간 각 페이지에서 보낸 시간 및 페이지를 방문한 순서 클릭 된 내부 링크 새로운 트래커 객체를 생.. 공감수 0 댓글수 0 2022. 8. 21.
[데스크탑 애플리케이션: 01] Firebase + Nextron (Electron + Next.js) * 기업의 코딩테스트 과제로 데스크톱 채팅 애플리케이션을 만들어보는 토이프로젝트를 진행해 보았다. 마지막으로 진행했던 토이프로젝트가 소켓 통신을 이용한 크롬 익스텐션 채팅 어플리케이션 이었던 만큼, 주어진 시간 (10일)내에 어느 정도 결과물을 보일 수 있었던 것 같다. 요구사항은 사용자 리스트 출력, 개인 메세지(대화), 그룹 메세지(대화)의 구현이었고, 데스크탑 애플리케이션을 만들어 보는 것 이었다. Javascript를 이용해서 만들 수 있는 데스크탑 애플리케이션은 Electron이 있다. 그 중, React (SSR 기반의 Next.js)를 이용해야 하기 때문에 Next.js와 Electron을 합친 템플릿(Boilerplate)을 제공해준 Nextron 오픈 소스를 활용하였다. https://g.. 공감수 4 댓글수 4 2022. 7. 23.
[이미지 렌더링: 02] 웹 성능과 이미지 최적화 지난 무한스크롤 기능과 이미지 로딩에 이어, 이미지 렌더링의 최적화를 연습해보기 위해 두가지의 페이지를 추가 구현 해 보았다. 우선, 이미지를 렌더링하는데 있어서 컴포넌트 혹은 이미지를 특정 시점에 로딩함으로써 불필요한 이미지 렌더링을 줄임으로 초기 로딩 시간을 대폭 줄일 수 있다. 물론 이미지를 효율적으로 렌더링 하는 방법은 다양하지만 (위의 방법 외에도 source와 picture 태그를 이용한 렌더링 등) 이미지를 받아오는 서버를 직접 만들지 않는점을 고려하여 우선은 두가지만 진행하였다. 첫번째 방법은 Chrome 75에서 소개한 Native Lazy Loading 방식으로, 태그의 CSS property 중 loading에 lazy를 활용하는 것이다. 다음과 같이 loading property에 .. 공감수 0 댓글수 0 2022. 7. 6.
[이미지 렌더링: 01] 무한스크롤과 이미지 렌더링 타 사이트들을 돌아다니며, 크롬 개발자 도구의 Ligthouse 를 사용하여 성능 측정을 해보았다. 꽤나 많은 사이트들이 성능 점수에서 낮은 것을 확인할 수 있었고, 이에 대한 이유를 파악해보고자 하였다. 해당 사이트(어디인지는 비밀 ㅎ...)는 성능적으로 매우 아쉬운 점수를 보였다. 체감 상, 이 점수대의 성능에서는 웹 인터렉션이 빠르다 라는 체감을 전혀 받지 못하는 것 같다. 다소 버벅거림이 있는 성능, 주된 원인으로서 이미지라 생각했다. 해당 사이트는 다량의 이미지를 렌더링하는데, lazy loading과 같이 성능적인 설계를 전혀 고려하지 않았었다. 조금 더 근거를 얻기 위해 Lighthouse의 의견을 들어보았다. 이미지 인코딩과 크기, 차세대 형식 및 오프스크린 이미지 지연하기를 제외한 부분들.. 공감수 0 댓글수 0 2022. 7. 1.
[크롬 익스텐션: 06] StompJs & SockJs, 디자인 및 구현 - 2 해당 페이지는 클라이언트 측 예시 페이지이다. 아직까지 로그인 및 로그아웃만 구현되어있어 상당히 여백의 미? 를 강조하고있다 ㅎ... 우측 하단부에 보면 + 버튼을 볼 수 있는데, 크롬 익스텐션의 display 속성을 바꿔주며 채팅창을 보여주고, 가린다. 물론, 해당 서비스의 회원이 아니어서 엑세스 토큰을 발급받지 않은 상황이거나, 크롬 익스텐션을 사용하지 않는 웹은 버튼 및 채팅창이 보이지 않는다. 해당 서비스(웹)의 크롬 익스텐션 사용 여부 및 엑세스 토큰 발급 여부는 이벤트 리스너를 통해 통신하도록 하였다. // Client Component // Let Chrome Extension know you are using app useEffect(()=>{ document.dispatchEvent(ne.. 공감수 0 댓글수 0 2022. 6. 23.
[크롬 익스텐션: 05] StompJs & SockJs, 디자인 및 구현 - 1 저번 포스트에 이어, 생각보다 많은 부분들이 개발되었다. 우선, 서버가 개발되어 StompJs 와 SockJs를 이용하여 소켓 통신 테스트를 해볼 수 있었다. 우선 진행하기 앞서, sockjs를 지난 포스트에서 스프링과 소켓 통신을 자주 사용한다 하였는데, STOMP는 무엇인가?? STOMP is the Simple (or Streaming) Text Oriented Messaging Protocol 즉, STOMP는 텍스트 기반의 메세징 프로토콜로, STOMP 브로커를 사용하는 다양한 언어와 플랫폼, 브로커들 사이의 메세지 전송을 간편하게 한다. 제작한 서버는 STOMP의 브로커를 바탕으로 만들어진 Spring 서버이다. 따라서 클라이언트 측도, StompJs를 활용하면 훨씬 수월하게 연결 할 것이다... 공감수 0 댓글수 0 2022. 6. 23.
[리펙토링: 나들서울] Debounce & Throttling 삼성청년소프트웨어아카데미를 수료하며, 진행했던 프로젝트 중, 가장 애착이 있고 많은 노력을 쏟은 "나들서울" 프로젝트의 리펙토링을 진행하기로 하였다. 기존 끝내지 못했던 버그들을 완료 한 후 (렌더링 버그, Reducer 버그 등...) 프로젝트를 더욱 enrich 할 요소들을 탐색하던 중, 큐레이션의 꽃이자 프로젝트의 메인 요소 중 하나인 "좋아요" 및 "찜하기" 버튼과 관련된 부분을 건들여보고자 하였다. http://nadeulseoul.ga/ 나들서울 nadeulseoul.ga SNS 큐레이팅 웹 서비스 답게, 사용자는 큐레이터들의 코스를 찜할 수 있고, 지도에서 찾아 본 장소를 "좋아요"로 저장하여, 추 후 활용 할 수 있다. 현재 배포된 버전을 기준으로, 좋아요 버튼은 수시 때때로 먹통이 된다... 공감수 0 댓글수 0 2022. 6. 14.
[크롬 익스텐션: 04] 클라이언트 - 소셜 로그인 이번 토이 프로젝트의 주된 의도 중 하나인 소셜 로그인을 해보기 위해 (이전 프로젝트에서 OAuth2와 Node openID를 써본 경험은 있지만) 클라이언트 사이드를 구축하였다. 우선, 소셜 로그인은 카카오톡의 카카오로그인 (https://developers.kakao.com/docs/latest/ko/kakaologin/common)을 활용하였다. 우선 기초 설계로써, 프론트엔드와 백엔드가 어느 부분 까지 담당하고, 데이터를 넘겨주고 받을 것인지 정하는 것이 중요하다. 어느 부분이 무엇인가? 위의 그림을 보면 세개의 도메인에 토큰을 주고받는 과정을 확인 할 수 있다. 가장 좌측 BusinessClient는 Frontend Client, OAuth Server는 엑세스토큰을 발급해주는 KakaoLogi.. 공감수 0 댓글수 0 2022. 6. 9.
[크롬 익스텐션: 03] sockjs-client를 이용한 소켓 통신 크롬 익스텐션을 다루고 있는 가장 중요한 이유 중 하나였던 메인 기능, 소켓 통신을 이용한 채팅 구현... 해당 기능을 구현하기 위해 최소한의 UI를 완성하고, 개발에 들어갔다! 아래는 저번 포스트에 이어 개발 된 UI의 모습...! 우선 왼쪽의 화면은 제외될 수 도 있다... 2가지의 경우에 따라 다르게 될텐데 1. URL을 직접 유저에게 입력받는다. 해당 서버로 연결한다. 2. 탭 혹은 페이지에 입력된 URL을 바탕으로 서버에 연결을 시도한다. 2가지의 경우 중 어떠한 경우가 더 좋을지, 기술적으로 가능할지를 아직 고려하고있다... 아무래도 단일 어플리케이션으로써의 가치가 빛나려면 2번이 맞고, 이렇게 될 경우 어플은 독립적으로 알맞은 세팅을 이룬 서버와는 자동 연결되게 한다. 하지만 그렇게되면, 다.. 공감수 0 댓글수 1 2022. 6. 5.
[크롬 익스텐션: 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 기반, 깔끔하게 놓은 폴더 구조, 코드 변경에 따른 자동 리로드 등 꽤나 잘 만든 보일러템플릿이라고 생각한다! 다시 돌아와서 우선, 가장 공통적이고, 다수.. 공감수 0 댓글수 0 2022. 6. 3.
[크롬 익스텐션: 01] Chrome Extension(Manifest V3)xSocket 통신 여러 프로젝트를 진행하면서, 정말 이상하게도, 크롬 익스텐션에 자꾸 눈이 갔다... 무언가... 무궁무진한, 다양한 아이디어가 샘솟는... 그런 물건?을 찾아버린 느낌... 생각보다 쓰이지 않고, 생각보다 노다지라고 느껴져서 한번 개발을 해보고 싶다 라는 생각을 갖고 있던 와중, 대학 동기가 간단한 토이프로젝트 해보는거 어떠냐 라고 제시를하여 (Socket 통신을 이용한 채팅 서버 구현) 오... 그러면.... 채팅 + 익스텐션으로 무언가 판타스틱한게 나올 수 있지 않을까? 고민을 해보았다... 이러쿵 저러쿵 고민을 한 결과... 도입이 쉬운 라이브러리/오픈소스 같이, 직접적인 설치 및 세팅이 적은 (물론... 프론트딴에서...) 채팅 모듈을 익스텐션으로 구현해보자! 를 떠올리게 되었다. 당연 아이디어가.. 공감수 0 댓글수 0 2022. 6. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.