nextjs 웹앱을 build하던 도중 react-icons의 번들 사이즈가 500kb를 초과한다는 경고 메세지가 발생하여 번들 크기를 확인했다. 최대한 가볍게 만들어보려고 상태관리 라이브러리도 사용하지 않고 react-query만 사용하려고 하는데 번들 크기가 크다고

Swiper를 사용하여 Carousel을 구현하던 중, Carousel의 초기 렌더링 모습이 breakpoints가 적용 안된 모습으로 몇 초간 렌더링되는 모습이 발견됐다. 확인 결과 html tag들은 서버사이드에서 렌더링 된 후, Swiper css가 client

# 서론 현재 나는 nextjs를 사용해 프로젝트(CNA)를 진행중이다. React로 프로젝트를 진행할 때는 CRA가 jest 또한 자동으로 세팅해주어서 편하게 테스팅을 진행했다. 하지만 Nextjs는 내가 직접 jest를 설치하고 setting해야 했고, 그 과정에서

React로 몇 번의 프로젝트를 진행하고 나니 SSR에도 흥미가 생겼다. 그래서 최근에 Nextjs 공식문서를 읽으며 개념을 정리하고 있다. 읽다보니 막연히 알고있던 SSG와 SSR의 차이를 정확히 설명해주는 부분이 있어 기록해놓으려 한다.SSG와 SSR의 가장 큰 차

github action으로 배포 자동화를 구축하던 도중 문제가 발생했다. 로컬에서는 build가 잘 되는데 github action으로 빌드 시, 특정 파일을 찾지 못했다. 한참을 헤매다가 Git case-sensitive라는 이슈를 발견했다.git은 기본적으로 대소

이전 프로젝트에서 github action과 vercel로 CI/CD를 구축하여 협업을 진행했다. 하지만 vercel에서 대부분의 세팅을 자동으로 해주기 때문에 Web 아키텍처를 머릿 속에 구체화하기 힘들었고, 내가 임의로 세팅할 수 있는 것들이 제한적이었다. 특히 p

요즘 대부분의 웹앱, 모바일웹이 다크모드를 지원한다. 배터리 절약, 안구 보호, 세련된 디자인 등을 이유로 많이 사용하는 것 같다. 나도 사이드 프로젝트에 적용해보고자 한다.Theme : light와 Dark에 필요한 color Property를 담는다.GlobalSt

서론 현재 진행중인 프로젝트는 jwt토큰을 사용하여 인증/인가를 하고 있다. 아직 서버에서 refresh token은 발급 되지 않는 상태로, access token만 받아오는 중이다. 그래서 임시로 localStorage에 jwt_token을 담아 놓았는데 이 방법은

css를 이용한 가변 스타일링 Mixin css props

현재 포지션을 기준으로 스크롤을 상대적 위치로 조정.scrollBy(0, 10)은 문서의 스크롤 상태를 현재 기준으로 10px아래로 내린 것처럼 움직인다.절대 좌표를 절대 좌표를 기준으로 페이지 스크롤 상태 조정.

container로 사용할 곳에 useRef로 DOM element에 접근. 스타일은 overflow-x: scroll로 scroll 생성.onMouseDown: 마우스 왼쪽 버튼을 누를 때 발생하는 이벤트onMouseUp: 마우스 왼쪽 버튼에서 손을 뗄 때 발생하는

React Testing Library의 query중 \[get | query | find] byRole이 있다.첫번째 인자는 DOM트리에 존재하는 컨테이너를 받고, 두번째 인자에는 옵션을 받는다. 옵션에는 다음과 같이 여러가지가 있다. 나는 그중 name에 대해 정리

공식문서를 참고하여 작성했습니다.Service Worker를 사용하여 네트워크 호출을 가로채는 API mocking 라이브러리.즉, 브라우저에서 자신이 백엔드 API인 것처럼 동작하면 가짜 데이터를 응답으로 보내준다.네트워크 call들을 가로채어 특정 응답을 반환한다.

공식문서(https://testing-library.com/docs/queries/about/마우스를 사용하고 화면을 시각적으로 보며 보조 기술(assistive technology)를 사용하는 사람이라면 누구나 접근 가능.getByRole은 모든 요소들에 쿼

블록 컨테이너의 텍스트콘텐츠를 지정한 줄 수만큼으로 제한할 수 있는 속성위 속성과 함께 overflow: hidden을 사용하면 영역을 넘어간 text는 말줄임표(...)와 함께 감춰줌

CI/CD

1.Github Action을 사용하여 Preview Deploy 생성. 2.생성한 Preview Deploy에 대해 E2테스트 작성 후 성공할 경우에만 Production Deploy에 병합. 공식 사이트에 설치방법이 소개되어있다. 설치법은 두가지다. npm으로 설

참고 https://docs.github.com/en/actions/learn-github-actions/environment-variablesAPI_KEY를 git에 commit 하지 않은 상태에서, github Action을 사용하여 API_KEY를 환경변

Hoisting이 무엇인가? Hoisting이 정확히 무엇인지 구글링해보면 "함수나 변수 등이 해당 범위의 맨 위로 올라가는 것 같은 현상"이라는 사람도 있고, 혹은 "맨 위로 올라가는 것 같은 현상의 동작 원리 자체"를 호이스팅이라고 하는 사람도 있다. 이 애매한

마크다운 예시결과