프론트엔드 성능 최적화를 공부하다 보면 이런 이야기를 자주 듣게 된다.객체 구조(shape)를 일정하게 유지하라동적 프로퍼티 추가를 조심하라객체를 렌더마다 새로 만들지 마라처음엔 그냥 "최적화 팁"처럼 보이지만, 사실 이건 전부 JavaScript 엔진(V8)의 내부

Three.js를 Next.js에서 처음 붙여보면 금방 이상한 걸 느끼게 된다."페이지를 이동했다 돌아오면 왜 점점 느려지지?"처음엔 렌더링 문제처럼 보이지만 실제 원인은 대부분 cleanup 누락이다.특히 requestAnimationFrame은 컴포넌트가 사라져도

채팅 기능을 구현하다 보면 가장 먼저 체감되는 문제가 하나 있다."전송 버튼을 눌렀는데 내 메시지가 바로 안 뜬다."WebSocket 기반이든 HTTP 기반이든,서버 응답 이후에만 메시지를 추가하면 그 사이 UI가 멈춘 것처럼 보인다.특히 네트워크가 느릴수록:버튼을 눌

왜 React에서 자료구조/알고리즘이 중요한가

Next.js App Router 환경에서 Emotion을 사용하다 보면 아래와 같은 오류를 종종 보게 됩니다. 이번 글에서는 왜 이런 문제가 발생하는지 간단하게 알아보겠습니다.

자사 서비스 개발을 하다 보니 Sticky Header UI를 구현할 일이 생각보다 많았다.React Native에서는 성능 이슈가 쉽게 발생하는 만큼 리스트 출력에는 FlashList를 사용하며 최대한 최적화를 고려하고 있다.이번 글에서는 FlashList + Sti

캐싱은 자주 사용되는 데이터를 한 번 받아온 후에 그 데이터를 임시 저장소에 저장하여 동일한 데이터를 빠르게 불러와서 사용하는 기법을 말한다.메모리 계층 구조에서 캐시는 디스크나 메인 메모리보다 더 빠르게 데이터를 불러와 사용해야 할 때 쓰인다.캐싱에는 여러 종류가 존

부모 컴포넌트가 자식 컴포넌트의 특정 기능에 접근하도록 허용. 일반적으로 ref와 함께 사용되며, forwardRef가 필요함. 부모가 자식 컴포넌트의 특정 기능(예: focus, scroll)을 직접 호출.사용 시기DOM 요소의 위치, 크기 조정이 필요할 때.애니메이

목차 [리액트 상태 관리 라이브러리들 (feat. 장단점)] [상태 관리에 Redux를 선택하게 된 계기] [Redux 셋팅하기] [Next.js에 Redux를 적용하며 마주하게 된 사사로운 오류사항들] [번외]

도커는 컨테이너 기반의 가상화 플랫폼.vm ware는 무겁기 때문에 docker를 많이 사용한다.서비스 운영에 필요한 서버 프로그램, 코드 및 라이브러리, 컴파일된 실행 파일 등을 묶는 형태를 도커 이미지라고 한다. 즉 컨테이너 생성(실행)에 필요한 모든 파일과 환경을

블로그가 다 만들어지면 CI/CD 자동화를 구현해보고자 한다.React는 정적 사이트 배포(bundle.js로 빈 html트리에 채워넣는다.)이지만 Next는 SSR 방식이기 때문에 React와 Next 배포 방식에는 차이가 있다.그래서 Next를 사용할 때에는 Doc

오늘 To Do listmarkdown 에 필요한 라이브러리 서칭 및 설정html로 markdown하는 기능의 api 작성포스트 불러오는 api 작성서버리스 이므로 md파일로 post를 저장해놓은 다음에 post내용을 읽어온다.join 함수로 파일 확장자까지 붙여 정확

리액트 서버 컴포넌트는 react 18에 나온 아주 강력한 기능 중 하나이다.https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023Server side render

url로 데이터를 전달할 때 시크릿창에서 직접 접근하면 데이터가 없다.이를 해결하기 위해선 초기화된 배열로 예외 처리를 해주거나 -> 클라이언트 처리)getServerSideProps를 통해 pre-rendering 되도록 한다. -> 서버에서 처리 (SEO최적화가

getStaticProps => SSGgetServerSideProps => SSRSSG는 빌드된 시점에 fetch를 하고, SSR은 매 요청시마다 refetch를 한다는 차이점이 있다. SSR은 SSG보다는 효율이 떨어지지만 언제든지 내용을 수정가능하다.url 내 쿼

xcode랑 안드로이드 스튜디오 설치하고 나니까 잘만 되던 빌드가 잘 안되더라 ,,, 상사분께 여쭤보니까 위 프로그램 설치하고는 무관하다는데 그럼 내가 마지막 빌드 이후에 설치한 라이브러리 때문일까 싶다 ..!JavaScript heap out of memory 에러를

Server side rendering이 핫해지며 서버 컴포넌트와 클라이언트 컴포넌트 개념을 자주 접하게 되었다 !나는 이런 개념들 정확히 아는걸 좋아하니까 정리해보자 \~\~~일반적으로 리액트에선 모든게 클라이언트 단에서 이루어진다. (CSR) next는 클라이언트

요즘 Next.js에 관심이 많아졌는데, next12 버전의 페이지 라우터와 next13의 앱 라우터 모두 찍먹해보았다 !12버전에서 13버전으로 릴리즈되면서 폴더 구조가 많이 바뀌었는데, 처음에 아주 헷갈렸다 !또 12버전의 getServerSideProps와 get

요즘 핫하다는 스택들,,중 React query가 빠지지 않는 것 같아 오늘은 React query에 대해 간단하게 포스팅하려고 한다!무지성으로 사용하기 전에, React query의 장단점을 알고 사용하는게 좋겠다 !공식 문서에선 fetching, caching, 서