프로젝트

yarn add @tanstack/react-query최상단 컴포넌트를 QueryClientProvider 로 감싸줘야 하는데 현재 나는 Next.js 환경에서 세팅 중\_app.ts 에 관련 세팅을 진행Hydrate은 아래에서 설명할 예정\_app.ts데이터 상태 관

react-query의 장점을 찾아보던 중 "선언적으로 비동기 과정을 관리한다" 라는 말을 봄선언적으로 관리한다는 게 뭘까?선언적 프로그래밍은 "무엇"을 원하는지를 표현하는 것에 집중함"어떻게"를 구현하는 것보다는 목표를 달성하는 데 집중이와 달리 명령적 프로그래밍은

이번 프로젝트는 여러가지의 이유로 Next.js로 프로젝트를 시작하려고 한다.그 이유와 Next.js 의 강점을 한번 적어보려고한다.일단 프로젝트 세팅 시 시작할때 Next.js로 시작을 했고 몇달전에 나온 App/dir 구성이 아닌 pages/ 구성 방식을 택했다.리

Next.js 환경을 세팅 후 스토리북까지 설정을 마친 뒤yarn storybook을 했더니 오류 발생....분명 처음에는 됐는데 yarn으로 이것저것 설치를 한뒤 다시 했더니 번번히 오류가 나왔다.해당 오류node_modules/cli-table3/src/utils.

두 기능 모두 두번째 프로젝트 때 처음 사용해봤는데, 두 기능 다 정말 유용했다. 이번 프로젝트에도 두 기능을 모두 적용해보려한다. ESLint와 Prettier EsLint는 Linter이고 Prettier는 Formatter이다 EsLint는 소스 코드에 문

두번째 프로젝트를 할때 스토리북이라는 도구를 사용했다. 이번에도 마찬가지로 스토리북을 사용할 예정이다.소프트웨어 개발에서 사용되는 도구 중 하나로, 주로 UI 컴포넌트를 개발하고 테스트하는 데에 활용된다.(UI 컴포넌트 : 버튼, 모달창, 인풋창 등등)개발 단계에서 빠

취업 전 마지막 프로젝트로 쇼핑몰 프로젝트를 선택했고 하는 동안 나오는 이슈를 벨로그에 모조리 기록해보려고 한다.일단 아무 생각 없이 프로젝트를 생성할 때, --template typescript 를 쳤다.타입스크립트는 무엇이고, 왜 쓰는 걸까?자바스크립트(JavaSc

React를 이용한 웹 에플리케이션을 만들기 위한 framewrokReact : ‘A JavaScript library for building user interfaces’ Angular : 'Angular is an application-design framework

내장된 코드분할 기능을 통해 동작. /page 디렉토리 내의 각 파일은 빌드 단계에서 자체 자바스크립트 번들로 자동분할됨이게 무슨말이냐면...Next.js에서 페이지는 /page 디렉토리에 위치함. 이 디렉토리 내의 각 파일은 해당 페이지에 대한 기능과 로직을 포함함.

React-Query + Next.js 이번 프로젝트는 리엑트 쿼리와 넥스트를 같이 사용하기 때문에 리엑트쿼리 공식문서를 참고했다. SSR react-query는 SSR을 위해 두 가지 방법의 데이터 프리패칭을 지원함 서버에서 데이터를 가져와 queryClient에

들어가기 전에...지금까지 생겼던 의문들을 정리해보자Q1. SSR은 빌드시점에 데이터를 다 가져오는게 아닌데 어떻게 SEO 측면에 유리한 걸까?SSR(서버 사이드 렌더링)은 각 요청마다 서버 측에서 데이터를 가져와 페이지를 렌더링함. 따라서 SSR은 빌드 시점에 데이터

아무리 '뒤로 가기'버튼을 눌러도 https://www.recordyslow.com/mypage?tab=로그인정보에서 벗어나지지 않는 현상이 발생함 이런식으로 tab을 선택하지 않은 상태(마이페이지 버튼을 눌렀을때)는 '로그인 정보' 탭으로 가게해놓음. 하지만,

변경에 유연 변경을 예측하면 안되고, 변경에 대응하는 컴포넌트를 제작해야됨 > 1. Headless 기반의 추상화 한가지 역할만 하기 도메인 분리하기 컴포넌트는 무엇을 할까? >데이터 관리 : 외부에서 들어오는 데이터, 상태 같은 내부 데이터를 관리 UI :

:HTML코드와 React인 JS코드를 서로 매칭시키는 과정서버사이드에서 클라이언트 사이드한테 렌더링 된 정적 페이지, 번들링된 JS파일 보냄. 클라이언트는 받아서 HTML,JS 서로 매칭정적인 페이지에 물을 주어 동적으로 만듦이것에 대해 알아보기 전 리엑트의 웹페이지

최근 next.js 프로젝트에서 웹페이지 성능을 올리기 위해 이것저것 하다 기초적인 지식이 탄탄하지 않다는 느낌을 받아 이 포스트를 작성 웹페이지가 렌더링 되는 과정 > 1. HTML parser가 HTML을 바탕으로 DOM tree를 그림 CSS parser가 C

SSR을 사용하면 JavaScript 번들이 로드되고 실행되기 전에 사용자가 페이지의 콘텐츠를 볼 수 있음목적 : 앱의 사용자가 콘텐츠를 더 빨리 보고 훨씬 더 빠르게 상호 작용을 시작유튜브,네이버 등등 타 사이트의 경우, 느린 네트워크 환경에서도 뷰포인트의 일부분을

2개의 프로젝트를 진행해봤으니, 마지막으로 사용자가 실제로 존재하는 프로젝트를 진행해보고 싶다는 생각을 함. 친구의 sns 계정을 이용해서 쇼핑몰을 오픈해보려고함.처음 기획할때는 쇼핑몰이니 의류들을 보여주는 shop페이지, 마이페이지 등등 가볍게 생각하고 진행.하지만

다이나믹 임포트 활용하기물론 내가 다이나믹 임포트 처리를 진행할 컴포넌트 크기가 미미해서, 번들사이즈에 크게 영향을 줄지는 의문이었다.하지만 이것을 진행했던 취지는 번들 사이즈를 줄여본 경험을 해보고 싶어서였다.hydrate라는 개념, 그리고 리엑트에서의 hydrate