RoseDevlog

Library/Next JS

https://next-netflix-wine.vercel.app/ Next JS 란 .. ? 1. 파일 시스템 기반 라우터React에서 라우터 → React-Router 라이브러리 사용Next JS에서 라우터 → 파일 구조 기반 2. 서버 사이드 렌더링 (SSR), 정적 사이트 생성 (SSG) 지원SEO 최적화SSG ..?빌드시 pre-rendering: 모든 페이지를 생성해둔다 (정적인 HTML) → 페이지 요청 → 만들어져있는 HTML 파일을 즉시 반환* 장점초기 로딩 매우 빠르다그럼 SSG 사용하지 왜 SSR 사용하는걸까?SSG는 빌드시에 정적으로 HTML을 만들어 놓는 만큼, “최신” 즉 “실시간” 데이터를 반영하지 못한다. 따라서 변경 가능성이 거의 없는 경우 SSG를 사용해야 하는 것!SEO..

2024. 5. 12.

Library/Next JS

**1. 초기세팅# @latest : 최신 버전 설치 npx create-next-app@latest --typescript#.prettierrc 설정npm install -D prettier eslint-config-prettier  ** Next.js + Typescript + Styled-Components 프로젝트 초기 세팅  Next.js + Typescript + Styled-Components 프로젝트 초기 세팅하기안녕하세요, 주인장입니다. 오늘은 Next.js 프로젝트 초기 세팅하는 과정에 대해 알아보려고 합니다. 어느덧 Next.js로 프로젝트 경험을 2번 정도 했군요 React나 Vue.js 설치하는 것보다 초기에 많이velog.io2. svg 적용 next.config.mjs에 코드 ..

2024. 5. 12.

Library/Next JS

https://velog.io/@sean2337/Next.js-Next.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EA%B7%9C%EC%B9%99%EA%B3%BC-%EB%9D%BC%EC%9A%B0%ED%8C%85 [Next.js] Next.js 프로젝트에서의 기본세팅과 라우팅[Next.js] Next.js 프로젝트에서의 기본세팅과 라우팅 방법에 대해 다루었습니다. 또한 Dynamic Route, useRouter, Link등도 다루었습니다. 개념적인 이야기보다는 이해하기 쉽게 정리하였으니 공부하실때velog.io https://nextjs.org/docs/getting-started/installation Getting Sta..

2024. 5. 6.

Library/React

컴포넌트 조건부 렌더링은, 새로고침을 하면 사용중이던 컴포넌트가 아닌 최초에 렌더링 되었던 메인으로 이동하는 단점이 있다! React-router-dom (web용) URL에 따라 각 페이지로 이동하기 위해 Router를 사용한다 BrowserRouter 동적 사용 외부 링크로 이동할 때는 태그 사용 라우터를 구성하는 3가지 모듈 BrowserRouter : History 객체 생성 / 반드시 라우터 컴포넌트 최상단에 위치한다 history 객체는 사용자가 방문한 페이지를 브라우저 기록에서 추적하고, 각 페이지의 URL, 타이틀, 방문 시간 등과 같은 정보를 유지한다 예를 들면 go() back() forward() Routes : Route의 상단에 위치 / url 변경시 Routes를 탐색한다 / 조..

2023. 11. 11.

Library/React

단축키 scp → ${props => props.}; scpt → ${({ theme }) => theme.}; rsc -> import React 부터 차례대로 해주는 개발자 도구 → command + option + i https://velog.io/@rgfdds98/React-snippets-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%A2%85%EB%A5%98%EB%B3%84-%EB%8B%A8%EC%B6%95%ED%82%A4 [React snippets] 컴포넌트 종류별 단축키 React 작성에 편의성을 높여줄 snippet을 알아보자 velog.io https://agal.tistory.com/139 35. Snippet 사용하기 - 리액트 입문 | 벨로퍼트 Snip..

2023. 11. 6.

Library/React

React rendering 리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것 루트() DOM부터 시작해 플래그가 지정되어 있는 모든 컴포넌트를 찾아서 렌더링을 진행하는 것을 말한다 React로 구현된 앱은 일반적으로 하나의 root DOM 노드가 있고 React element와 일치하도록 DOM을 업데이트한다 React element를 렌더링하기 위해서는 우선 DOM element를 ReactDOM.createRoot()에 전달한 다음, React element를 root.render()에 전달해야한다 root id는 public/index.html에 기본적으로 설정 되어 있다 const root = ReactDOM.c..

2023. 11. 6.

Library/React

src폴더에 있을 경우 import 하기 import exampleLogo from '../image/example.jpg' const ImageWrap = styled.div` margin: 0 auto `; export const Banner = () => { return( ) };

2023. 11. 6.

Library/React

클릭 이벤트 호출로써 실행되게끔 () => handler()의 함수 내 호출로 작성해야한다 {tabList.map( data => ( handleClick(data.id)} > 조건문 역시 바깥으로 로직을 분리하고 onClick에서는 정리된 함수만 실행하게 한다 const checkVideo = () => { if (movie.videos.results.length === 0) { alert("예고편이 존재하지 않습니다") } else { setIsClicked(true) } } checkVideo()} >

2023. 11. 6.