Final build
https://stackblitz.com/edit/stackblitz-starters-m6ogzzsp?file=app%2Fpage.tsx
nextagram - StackBlitz
The React framework for production
stackblitz.com
https://lshjju.tistory.com/359
Next.js basic
Next.jshttps://lshjju.tistory.com/341 Next.js ?Next.js가 무엇인가요?Next.js는 React를 기반으로 만들어진 특별한 웹 프레임워크예요! React는 원래 웹사이트를 사용자의 브라우저에서만 만들었는데, 이렇게 하
lshjju.tistory.com
https://lshjju.tistory.com/340
Next.js new project setting
manualhttps://lshjju.tistory.com/105 Node.js install - 노드제이에스 설치하기Node.js? Node.js는 한마디로 JavaScript를 웹 브라우저 환경이 아닌 곳에서도 실행할 수 있도록 해주는 실행 환경입니다. 과거에는 JavaS
lshjju.tistory.com
Step
https://lshjju.tistory.com/358
Ng0
Data preparationhttps://github.com/lshjju/cdn/blob/main/text/engtext.json cdn/text/engtext.json at main · lshjju/cdnContribute to lshjju/cdn development by creating an account on GitHub.github.com프로젝트에 사용할 json 파일입니다.이 파일
lshjju.tistory.com
https://lshjju.tistory.com/360
Ng1
dsfsadfh1, h2, h3, h4 { text-align: center;} globals.cssexport default function Home() { return ( Nextagram );} app/page.tsxexport default function Bros() { return ( Bros );} app/bros/page.tsx export default function Detail() { return ( Detail );} app/deta
lshjju.tistory.com
https://lshjju.tistory.com/361
Ng2
부트스트랩 설치레이아웃 빌딩 https://lshjju.tistory.com/71 bootstrap install setting manualBootstrap?Bootstrap은 Twitter 개발자들이 만들었습니다.성능이 좋아서 현재도 지속적으로 관리되고 있는 오픈소스 프로
lshjju.tistory.com
https://lshjju.tistory.com/362
Ng3
타이틀 네비 푸터 텍스트 데이터바인딩 합니다.const dataText = [ { main: 'Nextagram', subCaps1: 'Bros', sub1: 'bros', subCaps2: 'Login', sub2: 'login', subCaps3: 'Detail', sub3: 'detail', footer: 'Unsplash', },];export default dataText; da
lshjju.tistory.com
https://lshjju.tistory.com/363
Ng4
dfasdfdsaconst bros = [ { id: 0, name: "Jane Doe", summary: "Lorem ipsum dolor sit amet, consectetur ", follow: "Unfollow", }, { id: 1, name: "John Smith", summary: "Sed do eiusmod tempor incididunt ", follow: "Unfollow", }, { id: 2, name: "Alice Johnson",
lshjju.tistory.com
https://lshjju.tistory.com/364
Ng5
context API 와 Axios로 json 데이터를 세팅하고 공급 합니다.https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/text/engtext.json 사용할 data를 체크 합니다.https://lshjju.tistory.com/289 AxiosAxios란 무엇인가요?Axios는
lshjju.tistory.com
https://lshjju.tistory.com/366
Ng6
데이터를 가져와서 세팅 합니다.import axios from 'axios';import { useEffect, useState } from 'react';import React from 'react';import { usePosts } from './context/PostContext'; page.tsx json 데이터 사용에 필요한 도구를 임포트 합
lshjju.tistory.com
https://lshjju.tistory.com/367
Ng7
펑션에서 사용할 데이터 세팅 합니다.detail/page.tsx 패스를posts/[id]/page.tsx 패스로 변경 합니다.이 구조는 넥스트제이에스가 제공하는 템플릿 입니다.의심하지 말고 그냥 따라하면 지구에 평화가
lshjju.tistory.com
'Index' 카테고리의 다른 글
| GTQi index (0) | 2025.11.25 |
|---|---|
| Product detail page design Index (0) | 2025.11.21 |
| ca-index (0) | 2025.09.18 |
| Do it! 자바스크립트 웹 표준의 정석 (0) | 2025.08.11 |
| 생활코딩! React 리액트 프로그래밍 index (0) | 2025.06.20 |