개발61 SSR, CSR, SSG, ISR 특징 및 Next.js 적용 방법 목차1. SSR (Server-Side Rendering)2. CSR (Client-Side Rendering)3. SSG (Static Site Generation)4. ISR(Incremental Static Regeneration)5. Next.js의 적용 방법 SSR, CSR, SSG, ISR은 웹 애플리케이션에서 페이지를 렌더링 하고 사용자에게 콘텐츠를 전달하는 다양한 방법을 설명하는 개념이다.각 방식들은 데이터 로딩 및 렌더링 타이밍에 따라 웹 애플리케이션의 성능과 사용자 경험에 큰 영향을 미친다. 1. SSR (Server-Side Rendering)SSR은 서버 사이드 렌더링을 의미한다.사용자가 페이지를 요청하면, 서버가 요청된 페이지의 HTML을 생성하고, 완성된 HTML을 클라이언트에게.. 2024. 8. 7. 00:38 Vue.js 공식 문서 개념 공부 Vue.js? 1. Vue.js 개요 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크, 표준 HTML, CSS, JavaScript 기반으로 구축, 사용자 인터페이스를 효율적으로 제공하는 컴포넌트 기반 프로그래밍 모델을 제공함 2. Vue.js 예제 import { createApp, ref } from 'vue' createApp({ setup() { return { count: ref(0) } } }).mount('#app') 숫자 세기: {{ count }} 선언적 렌더링(Declarative Rendering) : Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성할 .. 2023. 8. 24. 23:41 [React] useDeferredValue 이전 관련 글 2023.03.23 - [개발/React] - [React] lodash를 활용한 debounce 2023.03.26 - [개발/React] - [React] useTransition 알아보기 useDeferredValue useDeferredValue도 useTransition과 마찬가지로 React 18에 들어와서 새로 도입된 HOOK이다. 사용방법 const deferredValue = useDeferredValue(value); useDeferredValue에 값이 들어오게 되면, 렌더링 우선순위에 따라 값을 반환하게 된다. useTransition은 setState와 같은 함수의 우선순위라면, useDeferredValue는 값의 우선순위에 따라 값을 지연하게 된다. 이는 api호.. 2023. 3. 28. 00:22 [React] useTransition 알아보기 useTreansition hook api useTransition은 React 18에 들어오면서 새로 도입된 함수이다. 바로 공식문서의 예제를 보면서 정리하겠다. function App() { const [isPending, startTransition] = useTransition(); const [count, setCount] = useState(0); function handleClick() { startTransition(() => { setCount(c => c + 1); }); } return ( {isPending && } {count} ); } useTreansition 함수의 반환값은 isPending , startTransition 으로 설정된다. isPending은 현재 작업이 지연.. 2023. 3. 26. 23:18 [IntelliJ] 프로젝트 properties 파일 유니코드 한글 변환법 인텔리제이를 처음 사용하면서, 사용방법이나 환경설정에 대해 간단하게 정리해보려 한다. 인텔리제이를 설치하고, .properties파일의 한글이 유니코드로 보이는 경우에 환경설정에 대해 정리한다. 보통 메세지를 프로퍼티 파일로 정리해 놓는데 이 파일이 유니코드로 변환되어 저장된다. [/resource/messages/해당 properties]파일이 경로에 존재한다. properties에는 다음과같이 유니코드 형태로 나온다 해결 방법 1. inteliJ 상단에 환경설정 아이콘을 누른다. 2.preferences를 클릭한다. 3. preferences 에서 File Encodings를 클릭하고 - Global Encoding : UTF-8 - Project Encoding : UTF-8 - 하단 Transpa.. 2023. 3. 24. 10:48 [React] lodash를 활용한 debounce lodash를 활용한 debounce 이전 포스팅에서 디바운스와 쓰로틀링에 대해 정리하였다. Javascript를 사용할 때 아주 유용한 라이브러리 lodash란 라이브러리가 있다 이 라이브러리를 이용하면, debounce 이외에도 자바스크립트에서 지원하지 않는 편한 함수들을 지원해 준다. 공식 사이트는 아래와 같다. https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences &.. 2023. 3. 23. 00:21 이전 1 2 3 4 ··· 11 다음 728x90
