Nextjs를 사용하며 next / Image 컴포넌트를 사용해서 보여지는 이미지들은 자동 또는 수동으로 최적화할 수 있었지만 Quill 에디터 내부에 삽입하는 이미지들은 그렇지 않았다.이들을 가능한만큼 최적화해봤던 경험을 기록했다.alt 속성없이 이미지가 에디터에 첨

Nextjs에서의 Image 사용에 있어 최소한의 최적화 시도는 해봐야지 않겠나라는 마음가짐으로 공부하고 적용한 과정을 기록해나가고 있다.

배포환경에서 정적으로 빌드된 페이지에 접근할 때 다음과 같은 오류가 발생했다.React 앱에서 발생하는 오류 중 하나입니다. 이 오류는 주로 React 앱이 프로덕션 모드로 빌드된 후 발생합니다.리액트 앱이 프로덕션 환경에서 빠르고 경량화된 코드 생성을 위해 코드 압축

알고보니 별 것 아니었던 nextjs앱을 vercel 에 배포한 뒤 발생했던 응답시간 지연 문제를 파악했던 과정에 대해 기록했다. 문제상황 nextjs앱을 vercel에 배포했는데 nextjs로 처리하는 요청에 대한 응답이 매우 느렸다! 정확히는 SSR, Rout

자잘자잘

getServerSideProps 메소드에서 react-query를 이용해 서버사이드에서 데이터를 패치하고 페이지에 전달하는데 이 컴포넌트를 테스트하다가 발생한 문제를 해결했던 과정을 기록했다.특정 페이지 컴포넌트를 테스트하는데 이 페이지는 getServerSidePr

nextjs SSG 연습기록!

아직 너무 생소한 성능과 웹 접근성. 막 부딪히다보면 익숙해지지 않을까라는 생각으로 lighthouse를 돌려보고는 한다.nextjs 빌드 후 실행해서 lighthouse를 돌려보니 웹 접근성 항목에서 아이콘 버튼에 대해 접근 가능한 이름이 없다고 나타내주었다.찾아보니

nextjs에서 quill editor를 적용하면서 발생한 문제를 해결한 과정을 기록했다.

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.div span같이 의미가 없는 태그는 태그 이름만 보고 어떤 내용인지 유추할 수 없다.form table article 등 의미가 있는 태그는 내

react query와 react-infinite-scroller 라이브러리로 목록 무한 스크롤 조회를 구현하게 되었다.목록을 스크롤로 내려 조회해오고 목록에 데이터를 추가한다던가 하는 것들은 잘 동작했는데 목록에서 데이터를 지울 때 문제가 발생했고 온갖 추측, 구글링

항해 최종프로젝트에서 오디오/비디오 채팅 기능이 있었고 이 때 일부 네트워크 간 P2P 연결이 안되는 문제를 해결하기 위해 TURN 서버를 구현했었다.급하게 구현하느라 기록하지 못했던 점, 복습차원 겸, 계속 켜둬서 AWS 과금이 계속 발생했기에 평생무료인 Oracle

Java에서는 클래스의 인스턴스 본인 참조를 위해 this를 많이 사용하고 있었고 거의 해당 역할로만 사용했었어서 익숙했다. Javascript를 사용할 때 리액트를 사용하다보니 클래스를 사용할 일이 없었고 실제로도 this를 사용해본적이 없어서 지금까지 리액트로

한 번 처리한 데이터를 임시로 저장소에 저장하는 것을 말한다.임시로 데이터를 저장해두고 같은 요청이 왔을 때 해당 저장소에서 바로 읽어와 응답을 해주어 성능과 응답속도를 향상시켜줄 수 있는 기술이다.자주 변경되지는 않지만 요청이 많은 데이터를 처리할 때 네트워크 부하,

우리는 개발할 때 여러 프레임워크 또는 라이브러리를 사용하게 되는데어떤 것은 프레임워크라고 불리고 어떤 것은 라이브러리라고 불린다.프레임워크와 라이브러리의 차이에 대해 알아보자프레임워크는 애플리케이션 개발 시 코드의 품질, 필수 코드, 알고리즘, 암호화 등 여러 기능들

js 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 런타임 이전에 실행 컨텍스트에 의해 소스코드 평가 과정에서 스코프에 등록되고 이를 마치 코드의 제일 위에 있는 것처럼 변수가 어디에 위치하던지와 상관없이 어디서든지 변수를 참조할 수

REST(Representational State Transfer)는 소프트웨어 개발 아키텍처 스타일이며, HTTP 프로토콜을 준수합니다. 자원(resource)을 이름(representation)으로 구분하여 해당 자원의 정보(state)를 주고 받는 모든 것을 의미

브라우저 렌더링 과정 요약했던걸 좀 더 과정 그 자체를 파악하는 것에 중점을 둬 한번 더 요약해보았다.브라우저의 렌더링이 시작되는 것은 위 아키텍쳐의 11번으로부터 시작된다.주소창에 직접 주소를 입력하던가 클릭을 통해 웹 페이지로 사용자가 접근하면 클라이언트에서 해당되

nextjs는 정말 어려운 것 같다.. nextjs에서 서버사이드렌더링을 구현에서 불필요한 중복 방지를 위해 삽질했던 경험을 기록했다.ISR을 적용해야되는 페이지를 제외하고 모든 페이지에 대해서 jwt토큰을 통해 회원 정보를 조회하는 api를 서버사이드 렌더링으로 가져

공식문서를 활용해 nextjs(13v 기준)의 middleware에 대해 알아보자Middleware allows you to run code before a request is completed, then based on the incoming request, you