Frontend (16) 썸네일형 리스트형 Tailwind CSS에서 rem 단위를 px단위로 커스텀하기, 타입 에러 수정 프로젝트를 하면서 Tailwind CSS를 도입하기로 했다. 스타일 파일을 따로 만들거나 클래스 네임을 지정하지 않는 점은 참 간편한 것 같다. 근데 Tailwind에서는 rem단위를 기본적으로 지원하고 있었다. https://tailwindcss.com/docs/margin Margin - Tailwind CSSUtilities for controlling an element's margin.tailwindcss.com 이렇게 기본적으로 m-1 은 0.25rem 이고 m-2는 0.5rem 인 식이다. 반응형 구현에는 좋지만 정확하게 px 단위로 맞춰줘야 하는 경우도 있다. 특히 font-size도 일정 구간별로 지원하고 있어서 불편하다. px 단위로 정확하게 표현하고 싶은 경우에는 arbitrary v.. Next.js 14, React 18의 streaming과 suspense을 이해해보자 Next.js을 공부하면서 또 반한 부분이 있는데 서버 측에서의 data fetching이다. 리액트에서는 클라이언트에서 API에 데이터를 요청하면 서버를 호출한다. 따라서 사용자가 페이지에 접속하면 로딩 상태인 것을 알 수 있다.하지만 서버컴포넌트에서는 서버에 호출을 하기 때문에 API가 클라이언트에 노출되지 않는다. 따라서 DB와도 직접 통신할 수 있다. 그리고 React 18 버전부터 streaming과 suspense를 지원하고, Next.js가 이것을 활용해서 loading 상태를 간편하게 설정해줄 수 있게 되었다. 뿐만 아니라 한 페이지에 여러 API를 호출할 때도 먼저 완료된 작업부터 렌더링을 수행할 수 있게 했다. 1. streming이란?https://developer.mozilla.or.. NextJS 14의 렌더링 방식 (Hydration)🍀 NextJS는 React의 프레임워크로, 기본적으로 CSR(클라이언트 사이드 렌더링)을 지원하는 리액트와는 다르게 SSR(서버 사이드 렌더링)을 지원하기 때문에 검색엔진 최적화에 유리하고, 초기 렌더링 속도가 빠르다. 그밖에도 서버 데이터 패칭,캐싱 등 최적화를 너무 쉽게 할 수 있어서 성능을 대폭 향상시킬 수 있다. 오늘은 CSR과 SSR을 자세히 비교해보고 NextJS 14버전에서 지원하는 Hydration까지 알아보자. 1. CSR과 SSR 1) CSRCSR(클라이언트 사이드 렌더링)은 클라이언트에서 모든 렌더링을 담당하는 것을 말한다. 리액트는 기본적으로 CSR을 지원한다. 따라서 초기 렌더링 시에 자바스크립트를 다운받고 UI를 로드한다. 장점부드럽고 빠른 화면 전환 (깜빡임 이슈 없음)서버에 부.. 구글 PageSpeed 성능 개선하기(무한 스크롤, preload, 이미지 형식변환, 이미지 압축...) 구글에는 PageSpeed Insight 라는 페이지 성능과 웹접근성 등을 확인할 수 있는 기능이 있다.해당 기능을 활용하면 점수 뿐만 아니라 권장사항도 자세하게 알려주기 때문에 정말 유용하다.https://pagespeed.web.dev/ PageSpeed Insights올바른 URL을 입력하세요.pagespeed.web.dev이번에 웹페이지를 배포하게 되면서 실제 유저도 생겼다. 따라서 유저들이 불편함 없이 페이지를 사용하는지 궁금해서 페이지 성능에 관심이 갔다. 그걸 정량적으로 파악할 수 있는 지표가 이 기능이라고 판단하여 성능 체크를 해보고 개선도 해보았다.나는 페이지를 종합적으로 평가해서 점수를 내리는 줄 알았는데 페이지 라우터별로 입력해서 점수를 볼 수 있다.근데 어찌보면 그게 당연하기도 하고.. 리액트 테스팅 라이브러리(RTL)를 사용한 TDD 적용 도전기 2편 - UI 테스트 이제 환경 설정에 대한 에러는 잡았으니 본격적으로 UI테스트를 하면서 개발했다.내가 만들려는 페이지의 최종 UI는 크게 헤더와 칭호 리스트가 있는 UI이다. 상단 버튼과 하단 네비게이션도 있지만 이건 공통 UI이기 때문에 이미 만들어둬서 따로 테스트를 진행하지 않았다.암튼 저번에 헤더 텍스트만 만들었으니 이제 칭호 리스트에 대한 테스트를 만들려고 한다. 근데 테스트를 하려고보니 따지고보면 UI에 대한 테스트는 너무 할게 많았다. 렌더링 테스트, 레이아웃 테스트, 글씨 크기, 배경색 등등.. 그래서 알고보니 UI테스트는 storybook 이라는 걸 사용하면 간편하다고 하는데 jest가 좀 익숙해지면 다음에 적용해봐야겠다.지금은 모든 UI에 대해 테스트하기 어려우니 유저 입장에서 중요한 테스트만 해보려고 한.. 리액트 테스팅 라이브러리(RTL)를 사용한 TDD 적용 도전기 1편 - 테스트 과정 중 만난 오류 (svg모듈 미인식 오류, theme 인식 오류) 1. TDD란?TDD는 Test Driven Development (테스트주도 개발)의 약자로 구현 후에 테스트를 하는 것이 아니라 '실패하는' 테스트코드를 먼저 만들고 나서 그 테스트를 통과할 만큼 최소한의 구현을 하는 것을 말한다.그로 인해 불필요한 코드가 생기지 않고 나의 코드에 대한 정확성을 보장할 수 있다.우리 팀에서 10일간 만든 서비스를 디벨롭하기로 했는데 당시 TDD를 시도했다가 알수 없는 오류로 인해 포기했었다. 디벨롭하면서 추가되는 기능은 꼭 TDD로 개발해보고 싶은 마음이 들어서 바로 시작! 2. 테스트 도구 나는 jest 를 사용했다. jest는 react create react app 으로 리액트 프로젝트를 설치하면 같이 설치된다. 그 이외에도 나는 타입스크립트를 사용했기 때문에.. VAC 패턴으로 비즈니스 로직을 분리해보자 (+ 프로젝트에서 제대로 적용해보기) 😥문제 인식새로운 팀프로젝트를 하면서 디자인패턴을 새롭게 적용해보고 싶었다. 이유는 그동안 프로젝트를 하면서 하나의 컴포넌트에 뒤섞인 UI + 복잡한 비즈니스 로직들로 가독성이 너무 떨어졌고, 유지보수 하기도 힘들었다.그런 단점을 보완해줄 패턴으로 MVC 패턴을 접했었는데 고민이 꽤 해소되었던 경험이 있어 이와 유사한 리액트에서 적용 가능한 패턴을 찾아보았다.처음에는 Compound Component 패턴을 알아봤는데 여기서 스타일 컴포넌트를 따로 분리해서 저장한 것이 가독성 향상에 도움될 것 같아 이 점은 나도 적용하기로 했다.다만 VAC패턴을 접하고 내가 원한 로직 분리를 위한 디자인 패턴이어서 이것에 대해 알아보기로 했다! VAC 패턴이란?VAC 패턴은 View Asset Component의 준.. 🚨api get요청 시 data는 쿼리에 담아야 한다! 문제 상황백엔드 개발자와 협업하면서 api 요청을 할일이 생겼다. 해당 요청은 GET 요청이었고 data를 담아서 보내는 것이었다. 나는 data를 담는 건 POST요청만 해봤기 때문에 확인차 여쭤봤는데 GET이 맞다고 했다.그렇게 알고 개발하는 와중에 계속 아래와 같이 에러가 났다. 에러 메세지는 서버에서 따로 안보내줘서 몰랐는데 백엔드 개발자가 하는 말로는 내가 보낸 data가 없다고 했다.그래서 나는 내가 요청을 잘못한줄 알고 한참 삽질을 했다. 한 반나절은 이것때문에 날린듯prettier 설정이 잘못돼서 data가 잘못들어갔나 싶어서 꺼보기도 하고 타입을 잘못썼나 싶어서 타입을 any로 바꾸고 다시 요청도 해봤는데 안됐다. 해결방법아무생각없이 'api get요청 data'라고 검색했는데 GET 요.. 이전 1 2 다음
