프론트엔드 개발자의 기억 저장소 프론트엔드 개발자의 기억 저장소

분류 전체보기

• Next Image load super slow

  React.js & Next.js 2023. 1. 4. 21:39

  목차 문제 상황 대안 결과 응답 헤더 정리 문제 상황 현재 개발 중인 우리 웹 사이트는 next/Image를 통해 image 리소스를 제공하고 있습니다. next/image의 경우 기본 태그와 달리 원본 파일 형식(. jpg,. png, …)을 차세대 형식인 .webp 로 변환해주는 기능을 담당하고 있으며 이미지 크기(px, size 둘 다) 또한 최적화해 줍니다. 이번에 발생한 문제는 next/Image를 통해 렌더링 하려는 이미지 리소스(20-40 개 또는 그 이상)가 많을 때, 이미지 리소스 자체의 크기는 줄었지만, 화면에 이미지를 정상적으로 제공할 때까지의 시간이 너무 오래 걸린다는 것이었습니다. 이 모든 상황은 캐시가 되기 이전 최초 렌더링 상황에 대한 이야기로, 캐시가 된 이후에는 계속 성능을..

  Read More
• 냅다 시작하는 리액트 쿼리 (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에 대..

  Read More
• 냅다 시작하는 리액트 쿼리 (개념편)

  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 쿼리는 쿼리의 고유키에 ..

  Read More
• 연말 파티 with new office

  끄적끄적 2022. 12. 30. 19:53

  들어가며 저희 새로운 사무실을 소개하는 척하면서 이번 주 있었던 이젤의 연말 파티에 대해 간단히 기록을 남겨볼까 합니다. 저는 이젤에 올해 초인 2022년 1월 10일에 이젤의 웹팀 웹 프론트엔드 개발자로 합류하였습니다. 삼성역에 있는 패스트파이브 삼성 2호점을 거쳐, 명동에 있는 패스트파이브 명동점 그리고 이제 공유 오피스를 벗어나 자사 사무실을 얻게 되었습니다. 사실 공유 오피스도 관리해주시는 매니저분들이 상주하셨기 때문에 매우 쾌적한 환경에서 근무를 할 수 있었는데요, 그래도 내 건 아니지만 공유 오피스보다는 정이 좀 더 가고 리더 분들이 멋지게 꾸며주셔서 정말 좋은 환경에서 근무를 할 수 있게 되었습니다. 연말 파티와 더불어 가볍게 소개해 드리는 시간을 갖도록 하겠습니다. 이젤은 서울역, 회현역 ..

  Read More
• 냅다 시작하는 리액트 쿼리 (예제편)

  React.js & Next.js 2022. 12. 27. 21:53

  냅다 시작하는 리액트 쿼리 (예제편) $ 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, QueryClientProvider } from '@tanstack/react-query'; function MyApp({ Component, pageProps }: AppProps) { const [queryClient] = React.useState(() => new QueryClient()); return ( )..

  Read More
• 예제로 배우는 react context

  React.js & Next.js 2022. 12. 18. 15:13

  Prerequisite next.js typescript react-context 들어가기에 앞서 Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능입니다. 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용하는데요, 꼭 전역적일 필요는 없습니다. Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다" 라고 접근을 하시는 것이 좋습니다. - velopert 상태관리와 react context의 차이? 상태 관리 라이브러리는 상태가 수정되면 관련 컴포넌트만 다시 렌더링됩니다. 이는 업데이트로 인해 모든 컨텍스트 컨슈머(Consumer) 및 그 하위 항목이 다시 렌더링되는 Context API와는 대조..

  Read More
• 재택 근무 6주 회고

  끄적끄적 2022. 12. 17. 20:48

  재택근무를 하게 된 계기? 우리 회사는 시리즈 B 투자 이후, 공유 오피스를 벗어나 자사 사무실을 얻었다. 공유 오피스를 벗어난 첫 자사 오피스였기 때문에, 인테리어 또한 많은 논의를 거친 끝에 작업하게 되었다. 우리 회사는 '아트 테크'라는 도메인을 가지고 있는 회사여서 그런지 가구 하나하나, 인테리어 하나하나에 신경을 써주셨다. 앞으로 계속 함께할 사무실이기 때문에 좋은 인테리어 결과를 얻고자 '2보 전진을 위한 1보 후퇴'의 개념으로 인테리어를 마칠 때까지 6주간 재택근무를 하게 되었다. 좋은 점 1. 잠을 더 잘 수 있어요 우리 회사는 기본적으로 10:00 - 19:00의 출근 시간이 있지만, +- 1시간씩은 자유롭게 이동이 가능하다. 나는 보통 9시 40-50분 정도까지 회사를 가는 것을 선호한..

  Read More
• 매우 흥미로운 ChatGPT 사용기

  끄적끄적 2022. 12. 16. 23:47

  들어가며 요즘 ChatGPT 라는 머신 러닝 기반의 open ai가 개발자들 사이에서 매우 핫하다. 사내에서도 많은 개발자들이 재밌는 질문을 하고 답을 공유해주셨는데, 코드의 품질이 생각외로 높아서 나에게도 매우 흥미롭게 다가왔다. 이번 주 동안 개발하면서 스택오버플로우에 할법할 질문이나 헷갈리는 개념들을 빠르게 질문해보고 결과물을 공유하고자 가져왔다. OpenAI API An API for accessing new AI models developed by OpenAI beta.openai.com OpenAI 구글 계정 연동 이후 ChatGPT에 들어간다면 사용이 가능하다. 질문 리스트 빠르게 보기 differences initialize function with usecallback or not giv..

  Read More