전체 글
-
취미? 전시를 보게된 이야기끄적끄적 2023. 3. 8. 22:51
안녕하세요? 프론트엔드 개발자 이준희입니다. 요즘은 글을 너무 너무 쓰기 힘들어서 어쩐지 끄적끄적 카테고리에만 글을 쓰게 되는 것 같아요. 다들 아시다시피 글의 빈도기 줄어드는 이유는 CHATGPT와 노션의 OPEN AI 등, 구글링 보다 더 나은 결과물을 찾는 과정이 너무 쉬워져서 이렇게 글을 작성해도 큰 도움이 되지 못하지 않을까 싶어 망설여지는 게 가장 큰 이유인 것 같아요. 그래도 펜(?) 아니요(?) 키보드를 놓고 싶지 않다는 심정으로 저의 요즘 취미(?) 관심사(?) 에 대한 글을 짧게 작성해볼까 합니다. 어떤 취미를 갖고 계신가요? 요즘 저의 최대 관심사는 '새로운 취미를 갖는 것' 입니다. 제가 하는 모든 일은 지속가능하면 좋겠는데 평일에는 운동과 일뿐이라 주말에는 이렇게 블로그를 쓰면서 ..
-
프론트엔드 개발자의 시선으로 구글 서치 콘솔 바라보기끄적끄적 2023. 2. 25. 21:24
이번에는 이 블로그에 연결된 구글 서치 콘솔을 분석하는 시간을 가지도록 하겠습니다. 웹 사이트를 고도화하다 보면 돌고 돌아 들리게 되는 부분이 SEO라고 생각합니다. SEO를 진행하다 보면 우리 웹사이트가 얼마나 첫 페이지에 잘 노출이 되었는가가 중요한 포인트 중 하나게 될 수 있습니다. 목차 구글 서치 콘솔이란? 현재 상황 분석하기 개요 페이지 실적 페이지 URL 검사 페이지 Search Console Insights 마치며 구글 서치 콘솔이란? 구글 서치 콘솔은 구글 검색 엔진에서 검색 결과로 보여지는 웹페이지의 성과를 분석하기 위한 도구입니다. 이 도구를 사용하면 자신의 웹사이트가 어떻게 검색 결과에 노출되고 있는지, 그리고 검색 결과에서 어떤 검색어를 통해 방문자들이 접근하고 있는지 등을 알 수 ..
-
iframe communication quick startJS,TS 2023. 2. 24. 23:44
목차 아이프레임이란 무엇인가요? 아이프레임으로 무엇을 할 수 있을까요? TODO 전략 실전 결과 보기 아이프레임이란 무엇인가요? An iframe (short for "inline frame") is an HTML element that allows you to embed another HTML document or webpage within your current webpage. It creates a frame or window within your webpage that can display content from a different source, such as a different website, another webpage on your own site, or even a separate pa..
-
아고라와 매일 같이 싸우는 이야기끄적끄적 2023. 1. 12. 21:50
이 이야기는 아고라 SDK를 통해 개발을 이어가고 있는 저의 하루에 대한 이야기입니다. 문제 현재 나는 아고라 SDK를 바탕으로 WebRTC 기반의 실시간 채팅 서비스를 구현하고 있다. 타입스크립트 환경에서 아고라의 SDK를 바탕으로 작업하다 보니, 아고라 SDK의 업데이트에 빠르게 대응해야 하고 민감할 수밖에 없다. 이번에 발견한 아고라 SDK 중 Agora Chat에 관련된 문제는 현재 사용 중인 아고라의 버전 1.0.7에 아고라 챗의 토큰이 만료됐을 때 재발급하는 ‘renewToken’ 메서드가 빠져 있다는 것이었다. agora-chat >> Agora-chat.d.ts 문서 상에는 Connection class 안에 renewToken이라는 메서드가 존재하는데 실제 SDK에는 존재하지 않았던 것이..
-
Next Image load super slowReact.js, Next.js 2023. 1. 4. 21:39
목차 문제 상황 대안 결과 응답 헤더 정리 문제 상황 현재 개발 중인 우리 웹 사이트는 next/Image를 통해 image 리소스를 제공하고 있습니다. next/image의 경우 기본 태그와 달리 원본 파일 형식(. jpg,. png, …)을 차세대 형식인 .webp 로 변환해주는 기능을 담당하고 있으며 이미지 크기(px, size 둘 다) 또한 최적화해 줍니다. 이번에 발생한 문제는 next/Image를 통해 렌더링 하려는 이미지 리소스(20-40 개 또는 그 이상)가 많을 때, 이미지 리소스 자체의 크기는 줄었지만, 화면에 이미지를 정상적으로 제공할 때까지의 시간이 너무 오래 걸린다는 것이었습니다. 이 모든 상황은 캐시가 되기 이전 최초 렌더링 상황에 대한 이야기로, 캐시가 된 이후에는 계속 성능을..
-
냅다 시작하는 리액트 쿼리 (SSR편)React.js, Next.js 2022. 12. 31. 21:05
$ npx create-next-app test --typescript $ yarn add @tanstack/react-query _app.tsx import React from 'react'; import type { AppProps } from 'next/app'; import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'; function MyApp({ Component, pageProps }: AppProps) { const [queryClient] = React.useState(() => new QueryClient()); return ( ); } export default MyApp; hydration에 대..
-
냅다 시작하는 리액트 쿼리 (개념편)React.js, Next.js 2022. 12. 31. 19:44
들어가며 대부분의 예제는 이전에 작성한 글의 함수 및 흐름을 그대로 사용하였습니다. 냅다 시작하는 리액트 쿼리 (예제편) 냅다 시작하는 리액트 쿼리 (예제편) $ npx create-next-app test --typescript $ yarn add axios @tanstack/react-query _app.tsx // 🗂/pages/_app.tsx import React from 'react'; import type { AppProps } from 'next/app'; import { QueryClient, Query junheedot.tistory.com 목차 Query Basics Query Keys Query Functions Query Client Query Basics 쿼리는 쿼리의 고유키에 ..
-
연말 파티 with new office끄적끄적 2022. 12. 30. 19:53
들어가며 저희 새로운 사무실을 소개하는 척하면서 이번 주 있었던 이젤의 연말 파티에 대해 간단히 기록을 남겨볼까 합니다. 저는 이젤에 올해 초인 2022년 1월 10일에 이젤의 웹팀 웹 프론트엔드 개발자로 합류하였습니다. 삼성역에 있는 패스트파이브 삼성 2호점을 거쳐, 명동에 있는 패스트파이브 명동점 그리고 이제 공유 오피스를 벗어나 자사 사무실을 얻게 되었습니다. 사실 공유 오피스도 관리해주시는 매니저분들이 상주하셨기 때문에 매우 쾌적한 환경에서 근무를 할 수 있었는데요, 그래도 내 건 아니지만 공유 오피스보다는 정이 좀 더 가고 리더 분들이 멋지게 꾸며주셔서 정말 좋은 환경에서 근무를 할 수 있게 되었습니다. 연말 파티와 더불어 가볍게 소개해 드리는 시간을 갖도록 하겠습니다. 이젤은 서울역, 회현역 ..