Next.js : backend (Json-server) | Server Component

html css 이 부분은 현재 하드코딩 됨 => 백엔드에서 저장된 데이터를 가져와서 동적으로 표시할 것 1. JSON-SERVER 로 구축 (1) 터미널 npx json-server --port 9999 --watch db.json >> db.json을 바라보고 있어서 데이터 변경될때마다 다시 재시동 (포트는 9999) (2) http://localhost:9999/topics 로 접속해서 확인 + 개발자 도구 들어가서 esc 클릭 => 하단 콘솔 등장 fetch('http://localhost:9999/topics') .then((response)=>{return response.json()}) .then((result)=>{console.log('result',result)}) fetch().the..

• format_list_bulleted Next.js
• · 2023. 12. 20.
• textsms

Next.js : Single Page Application & 이미지 추가 & CSS

1. Single Page Application 서버 사이드 랜더링 : 리액트는js가 동작하지않으면 랜더링 되지 않음 => Next.js 만든 웹페이지는 리로드해도 랜더링이 잘 됨. => Next.js 는 js가 아닌 html을 응답함 => a태그를 Link로 변경하기만해도 SPA가 되는 마법을 볼 수 있음. 단점.. 네트워크 > fast 3G (웹페이지 지연 현상 만들기 가능) => 특정 페이지 (홈) 을 방문했을때, 처음부터 끝까지 모든 페이지를 다운 받아서 사용자 입장에서는 느리고, 서비스 제공하는 입장에서는 돈이 많이 들음,,, [layout.js] import './globals.css'; export const metadata = { title: 'Web tutorials', descripti..

• format_list_bulleted Next.js
• · 2023. 12. 19.
• textsms

Next.js : Web tutorial 뼈대 + 라우팅 + 다이나믹 라우팅

* 개발을 할때는 개발서버를 켜야함 => npm run dev 1. Web tutorial 뼈대 [layout.js] import './globals.css'; export const metadata = { title: 'Web tutorials', description: '2023-12-19', }; export default function RootLayout({ children }) { return ( WEB html css {children} Create Update ); } 1) metadata : 파비콘 옆에 들어가는 문구 2) 바디의 {children} = page.js의 return 값 2. 라우팅 설정 (create) 1) 경로에 따라서 어떤 방식으로 보여줄지 = 라우팅 [src > ap..

• format_list_bulleted Next.js
• · 2023. 12. 19.
• textsms

Next.js - 배포

용량줄이고 실서버에 최적화된 버전이 필요함! ▼아래에서 기본사항 만들었음 ▼ Next.js 13 : 설치와 실행 서버 사이드 랜더링 : 서버쪽에서 JS를 다운로드 => 브라우저는 완성된 html을 전달하기 떄문에 검색엔진 친화적임 => 다운로드 받고 웹페이지에 표시되니 사용자한테 빠르게 보여짐 Client Side Render zerotonine2da.tistory.com 현재 개발자도구 - 네트워크 - 하단 : 6.7 MB resources를 사용하고 있음 => 서버에서 클라이언트로 전송한 용량이 6.3MB나 된다는 것을 의미. => 큰 용량은 비효율적이고 보안에 문제가 될 수 있음. [jsconfig.js] 1) dev: 개발 (현재 사용 : npm run dev) 2) build : 배포 ( npm..

• format_list_bulleted Next.js
• · 2023. 12. 19.
• textsms

Next.js 13 : 설치와 실행

서버 사이드 랜더링 : 서버쪽에서 JS를 다운로드 => 브라우저는 완성된 html을 전달하기 떄문에 검색엔진 친화적임 => 다운로드 받고 웹페이지에 표시되니 사용자한테 빠르게 보여짐 Client Side Rendering 리액트 : js 다운로드 받고 화면에 실행됨 => 클라이언트 쪽에서 랜더링을 한다고해서 "Client Side Rendering" => JS가 동작하지 않는 환경에서는 화면에 표시가 안됨 => 검색엔진 SEO에 약함 [배울 것] * App router * Server component 1.설치 1) VS code 2) Node js 2. 개발환경 1) npx (node로 만들어진 프로그램을 설치없이 실행 하는 프로그램) npx create-next-app@latest . > @lates..

• format_list_bulleted Next.js
• · 2023. 12. 19.
• textsms

타입스크립트 :이쁜 alert 모달창 sweetalert 사용하기

SweetAlert2 SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 1. VS code 패키지 설치 yarn add sweetalert 2. import 하기 import swal from 'sweetalert'; 3. 삭제 확인 창 const removeHandler = async (e: React.MouseEvent, id: string) => { try { swal({ title: '삭제하시겠습니까?', text: '삭제된 데이터는 복구할 수 없습니다.', icon: 'warning', butto..

• format_list_bulleted TypeScript
• · 2023. 12. 18.
• textsms