개발일지

[npm] 리액트 패키지를 만들어 npm에 배포해보자 - 1

개인적인 웹 프로젝트를 개발하고 있던 도중, 평소 관심이 많았던 스크롤 이벤트에 대해 상당히 열이 받아 있었다... 다양한 스크롤 이벤트들이 많고, 특히 꽤나 Fancy 한 (앱x 이라든지...) 웹들은 다양한 스크롤 이벤트를 바탕으로 새로운 패러다임을 보여주기도 하는데, 이러한 이벤트들을 직접 구현하려니 꽤나 복잡하였다... 하지만 레퍼런스를 안보며 직접 창조한다 생각하고 개발하면 재미가 있기에? 이어가던 도중, 꽤나 괜찮은 아이디어라 판단 된 컴포넌트를 구상하게 되었다. 하나의 프로젝트만을 위해 이 컴포넌트를 만들어? 하기엔 너무 아까워 생각하던 와중, 오픈소스에 기여도 할 수 있고, 공부도 될겸 npm 패키지를 배포해보자라는 생각을 하게 되었다! 서론이 길었지만, 천리길도 한걸음 부터, 우선 Rea..

[구글 애널리틱스: 01] Google Analytics 이해하기

현재 개발 및 유지보수하게 된 서비스는 광고에 높은 수익 비중을 두고 있다. 따라서 광고를 효율적으로 노출하는 여러 방법과 관련된 기술을 익힐 필요성을 느끼게 되었고, 또한 그 속에서 사용하게 된 Google Analytics를 잘 사용할 줄 알아야 될 것 같다는 필요성 또한 느끼게 되었다. 구글 아날리틱스 Collection: 유저 인터렉션 데이터 수집 Configuration: 데이터 프로세싱 관리 Processing: 유저 인터렉션 데이터를 설정(Configuration)에 따라 처리 Reporing: 처리 된 모든 데이터에 접근 부여 analytics.js 제공하는 기능 유저가 사이트에서 보내는 총 시간 각 페이지에서 보낸 시간 및 페이지를 방문한 순서 클릭 된 내부 링크 새로운 트래커 객체를 생..

[데스크탑 애플리케이션: 01] Firebase + Nextron (Electron + Next.js)

* 기업의 코딩테스트 과제로 데스크톱 채팅 애플리케이션을 만들어보는 토이프로젝트를 진행해 보았다. 마지막으로 진행했던 토이프로젝트가 소켓 통신을 이용한 크롬 익스텐션 채팅 어플리케이션 이었던 만큼, 주어진 시간 (10일)내에 어느 정도 결과물을 보일 수 있었던 것 같다. 요구사항은 사용자 리스트 출력, 개인 메세지(대화), 그룹 메세지(대화)의 구현이었고, 데스크탑 애플리케이션을 만들어 보는 것 이었다. Javascript를 이용해서 만들 수 있는 데스크탑 애플리케이션은 Electron이 있다. 그 중, React (SSR 기반의 Next.js)를 이용해야 하기 때문에 Next.js와 Electron을 합친 템플릿(Boilerplate)을 제공해준 Nextron 오픈 소스를 활용하였다. https://g..

[이미지 렌더링: 02] 웹 성능과 이미지 최적화

지난 무한스크롤 기능과 이미지 로딩에 이어, 이미지 렌더링의 최적화를 연습해보기 위해 두가지의 페이지를 추가 구현 해 보았다. 우선, 이미지를 렌더링하는데 있어서 컴포넌트 혹은 이미지를 특정 시점에 로딩함으로써 불필요한 이미지 렌더링을 줄임으로 초기 로딩 시간을 대폭 줄일 수 있다. 물론 이미지를 효율적으로 렌더링 하는 방법은 다양하지만 (위의 방법 외에도 source와 picture 태그를 이용한 렌더링 등) 이미지를 받아오는 서버를 직접 만들지 않는점을 고려하여 우선은 두가지만 진행하였다. 첫번째 방법은 Chrome 75에서 소개한 Native Lazy Loading 방식으로, 태그의 CSS property 중 loading에 lazy를 활용하는 것이다. 다음과 같이 loading property에 ..

[이미지 렌더링: 01] 무한스크롤과 이미지 렌더링

타 사이트들을 돌아다니며, 크롬 개발자 도구의 Ligthouse 를 사용하여 성능 측정을 해보았다. 꽤나 많은 사이트들이 성능 점수에서 낮은 것을 확인할 수 있었고, 이에 대한 이유를 파악해보고자 하였다. 해당 사이트(어디인지는 비밀 ㅎ...)는 성능적으로 매우 아쉬운 점수를 보였다. 체감 상, 이 점수대의 성능에서는 웹 인터렉션이 빠르다 라는 체감을 전혀 받지 못하는 것 같다. 다소 버벅거림이 있는 성능, 주된 원인으로서 이미지라 생각했다. 해당 사이트는 다량의 이미지를 렌더링하는데, lazy loading과 같이 성능적인 설계를 전혀 고려하지 않았었다. 조금 더 근거를 얻기 위해 Lighthouse의 의견을 들어보았다. 이미지 인코딩과 크기, 차세대 형식 및 오프스크린 이미지 지연하기를 제외한 부분들..

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

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