프로그래밍 잡동사니

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. SPA(Single Page Application)란 하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션이며, MPA(Multiple Page Application)란 사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다 CSR(Client-side Rendering)이란 브라우저가 서버에 HTML과 JS 파일을 요청하고 최초 로딩 이후, 사용자의 상호작용에 따라 JS를 이용해 화면을 동적으로 그리는 방식이며, SSR(Server-side Rendering)이란 브라우저..

Next.js + TypeScript + styled-components 환경에서 위와 같은 텍스트 슬라이드업 캐러셀을 구현해보자! [components/Home/HomeAnimation.tsx] import { useState, useEffect, useRef } from 'react'; import { ... CarouselContainer, CarouselRotator, CarouselRotatorItem, } from './HomeAnimation.styled'; export default function HomeAnimation() { const [count, setCount] = useState(0); const intervalRef: { current: NodeJS.Timeout | null..

react-animated-cursor🔽 GitHub - stephenscaff/react-animated-cursor: An animated custom cursor React component. An animated custom cursor React component. Contribute to stephenscaff/react-animated-cursor development by creating an account on GitHub. github.com 사용 예시🔽 Animated Custon Cursor - React stephenscaff.github.io Next.js + TypeScript 환경에서 react-animated-cursor 라이브러리로 커서 디자인을 적용해보자! npm i r..

다음과 같은 .svg 파일을.. [assets/github.svg] React에서 하던 것처럼 import해 Next.js에서 컴포넌트로 사용하려고 하면.. 아래 패키지를 설치해주자 npm i -D @svgr/webpack next.config.js를 수정해준다 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, webpack: (config) => { config.module.rules.push({ test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'], }); return config; }, }; module.exports = nextConfig;..

ESLint & Prettier🔽 Next.js 초기세팅 - eslint, prettier, typescript(tsconfig) - 짜구's WIKI 프로젝트 생성 2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수) 3. eslint 설정 예시 (.eslintrc) 3. prettier 설정 예시 (.prettierrc) wiki.jjagu.com 터미널에 다음 항목들을 설치하고, 위 글을 참고해 ESLint와 Prettier 설정을 해준다 npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react esli..

Catch All catch-all url을 사용한다면 url로 데이터를 전달할 때 생겼던 문제들을 해결할 수 있다 [id].js의 파일 명을 [...params].js로 변경해준다 [pages/movies/index.js] onClick={() => router.push( `/movies/${movie.original_title}/${movie.poster_path}/${movie.id}` ) } 'movies/제목/포스터/아이디' 이런 식으로 다 url로 보내고 router를 콘솔로 찍어보면.. [pages/movies/[params].js] import Seo from "../../components/Seo"; import { useRouter } from "next/router"; export d..