'프레임워크' 카테고리의 글 목록 (3 Page)
본문 바로가기

프레임워크160

[Next.js] 동적 meta tag 설정하기 Next.js에서 Dynamic Routes를 사용하다 보니 meta tag 설정하는 부분에서 삽질을 너무 많이 했다. 다음에는 이런 일이 없도록 정리해 보았다. 삽질을 하면서 알게 된 것 meta 태그에는 static 한 값만 넣을 수 있다. getServerSideProps는 은근히 까다롭다. fetch는 절대 url을 사용해야 한다. 예제를 찾을 때는 다른 분들이 작성하신 블로그를 꼼꼼하게 읽자 아래 블로그에서 해답을 얻을 수 있었다. (정말.. 이 분이 아니었다면 머리가 다 뜯겼을지도 모른다.) Next.js 다이나믹 메타 태그 넣기 저번 글에 이어서 SEO 작업을 계속 하고 있다. 이번주엔 다이나믹 메타 태그 작업을 했다. (메타태그 종류나, 검색최적화를 위한 추천 등의 내용은 없습니다) htt.. 2023. 4. 10.
[Next.js] styled-component 적용하기 Next.js에서 styled-component를 사용할 경우 생기는 문제 : Next.js는 SSR(Server Side Rendering)을 이용하여 페이지를 pre-rendering을 하기 때문에 클라이언트가 서버에 페이지 요청 시 HTML/CSS만 넘겨 받는다. / styled-component는 CSS-in-JS 형식으로써 JS로 작성된 스타일 요소들을 페이지에 주입 시킨다. * pre-rendering이란? : 서버에서 HTML 파일들을 미리 만들어 놓고 클라이언트에서 페이지 요청 시 서버에서 HTML 파일을 넘겨주는 방식 이는 퍼포먼스와 검색 SEO를 향상 시켜준다. pre-render 사전에 HTML파일들을 만든다는의미이는 퍼포먼스와 검색SEO를 향상 시킬 수 있다 리액트로 만든 페이지는개.. 2023. 1. 17.
[React-Query] react-query란? 10분만에 react-query 개념 이해하기 거기 멋진 당신, 읽고 가는게 좋지 않을까? velog.io 지금까지 ajax, fetch, axios순으로 사용해보면서 각각의 장단점과 발전 흐름에 맞춰 익숙해졌고 axios에 편리함을 경험하던 중 아직 확정되진 않았지만 추후 새로 진행할 프로젝트에서는 react-query를 사용해보는 건 어떨까 싶어 공부 전 react-query가 뭔지, 무엇을 해주는지, 왜 사람들이 많이 쓰는지 알아보기 위해서 위 영상과 블로그를 읽어보았는 데 너무 깔끔하게 잘 정리되어 있고 영상으로 한번 더 설명해주시는 점에서 좋았어서 강추 🥸👍 Next.js와 axios, zustand 조합으로 진행하는 프로젝트도 좋았지만 useEffect에 dependency array와 데이터.. 2022. 12. 27.
[React] Reconciliation(재조정), Virtual DOM(가상돔), Diffing Algorithm(비교 알고리즘) 알아보기 Reconciliation(재조정) 정리하자면 "React는 컴포넌트에 변화가 생길 때마다 모든 컴포넌트 요소를 재렌더링 하는 게 아니라 실제 돔(Real DOM)과 가상돔(Virtual DOM)을 비교하여 변경된 요소나 속성만 변경해주는 비교 알고리즘(Diffing Algorithm)을 사용한다."는 뜻이다. → 가상의 표현(Virtual DOM)을 메모리에 저장하고 실제 DOM과 동기화하는 과정 === 재조정(Reconciliation) Virtual DOM(가상돔) Real DOM을 직접 변경하게 되면 모든 컴포넌트가 재렌더링 되어야 하기 때문에 렌더링 횟수가 많아지고, 그에 따른 비용이 늘어나게 됩니다. 이를 방지하기 위해 React의 Virtual DOM은 최소한의 DOM만을 조작하여 실제 DO.. 2022. 10. 21.
[React] useEffect vs useLayoutEffect 우연한 기회로 useLayoutEffect의 존재를 알게 되었다. 일단 React 공식문서를 한번 훑어보고 블로그 글을 참조해서 개념을 정리해 보았다. 내 생각에는... 그냥 면접 질문용이 아닐까 싶다. (실전에서 잘 안 쓰는 것 같음) 차이점 (useLayoutEffect 사용하지 말래요.) useEffect와 useLayoutEffect를 비교하려고 보았을 때 둘은 매우 유사한 이름을 가지고 있고 공식문서 상에서도 둘은 동일하다고 말한다. 차이점은 useEffect는 브라우저에 화면이 그려진 후에 실행되고, useLayoutEffect는 브라우저에 화면이 그려지기 전에 실행된다는 점인 것 같다. (+ useLayoutEffect는 동기적으로 발생한다.) 이정도면 useLayoutEffect는 사용하지.. 2022. 10. 21.
[React] Side Effect(useEffect) 컴포넌트의 상태 관리와 사이드 이펙트 1. 컴포넌트의 상태와 관리에 대해 알아본다. 2. 컴포넌트의 사이드 이펙트에 대해 알아본다. velog.io [React] Side Effect란? React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side Effect라고 한다. 대표적인 예로어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우,일단 화면에 velog.io React에서의 사이드 이펙트(Side Effect)란? - 사이드 이펙트란 사전적 의미로 원래의 목적과 다르게 다른 효과가 발생하는 것을 말한다. - 리액트에서의 사이드 이펙트란 변경이나 효과가 일어날 때 다른 효과가 발생 할 수 있도록 설정하는 것이다. 이전의 코드에서 input에 값을 입력할 때 뿐.. 2022. 6. 21.
[React-Query] 세팅하기 (React 버전) react-query 개념 및 정리 react-query 개념 및 정리, react, react16, hook, useState, useRef, useMemo, useEffect, useReducer, useCallback, useQuery 동기적으로 실행 kyounghwan01.github.io Overview Overview React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. .. 2022. 6. 15.
[React-Query] 개념 정리 react-query 개념 및 정리 react-query 개념 및 정리, react, react16, hook, useState, useRef, useMemo, useEffect, useReducer, useCallback, useQuery 동기적으로 실행 kyounghwan01.github.io [React.js] React Query Next.js 에 React Query 를 도입하며, 관련된 사용법과 옵션을 기록하기 위한 글입니다. 💁 React Query의 장점 ✅ 서버 데이터 캐싱 ✅ 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능 ✅ prefetchin velog.io react-query란? : 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을.. 2022. 6. 15.
[CSS] @container @container란? * Container Queries : 아직 모든 브라우저에서는 지원하지 않고 있고, experiment 실험 모드에서 테스트만 가능합니다. @media(Media Query) vs @container(Container Query) Container Queries는 Media Queries와 매우 비슷한데 @media는 전체적인 window 사이즈에 의거해서 요소들이 어디에 들어 있는지 전혀 신경 쓰지 않고 window 사이즈가 변경되어야지만 요소들을 재배치할 수 있다는 큰 단점을 가지고 있습니다. 이를 보완하기 위해 나온 기능이 container queries입니다! @container는 window 사이즈에 의거하지 않고, 각각 개별적인 부모 요소에 의거해서 부모 요소의 사이즈.. 2022. 6. 8.
728x90