{post.title}
+ {post.description ? ( +{post.description}
+ ) : null} ++
+
+
+ {displayPosts?.length > 0 ? ( +
+ )
+}
diff --git a/blog/app/favicon.ico b/blog/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/blog/app/favicon.ico differ
diff --git a/blog/app/globals.css b/blog/app/globals.css
new file mode 100644
index 0000000..b0e6fff
--- /dev/null
+++ b/blog/app/globals.css
@@ -0,0 +1,76 @@
+@tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+
+ @layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+
+ --primary: 222.2 47.4% 11.2%;
+ --primary-foreground: 210 40% 98%;
+
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 222.2 84% 4.9%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 212.7 26.8% 83.9%;
+ }
+ }
+
+ @layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+ }
\ No newline at end of file
diff --git a/blog/app/layout.tsx b/blog/app/layout.tsx
new file mode 100644
index 0000000..a36702f
--- /dev/null
+++ b/blog/app/layout.tsx
@@ -0,0 +1,31 @@
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import "./globals.css"
+import SiteHeader from "@/components/site-header"
+import { Providers } from "@/components/provider"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export const metadata: Metadata = {
+ title: "Create Next App",
+ description: "Generated by create next app",
+}
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode
+}>) {
+ return (
+
+
+
+
+
+
+ Blog
++ My rambling on all things web dev +
++ {displayPosts?.length > 0 ? ( +
-
+ {displayPosts.map((post) => {
+ const { slug, date, title, description } = post
+ return (
+
-
+
+
+ )
+ })}
+
Nothing to see here yet
+ )} +
+ {/* {children}
+
+
+
+ Blog
+
+
+ About
+
+
+ GitHub
+
+
+
+
+ + {title} +
+{description}
+
+
+ -
+
- Published On +
-
+
+ +
+
+ Read more !!
+
+
+
+
+
+
+
+
+ )
+}
+export default Layout
diff --git a/nextjs-nomad/component/Seo.js b/nextjs-nomad/component/Seo.js
new file mode 100644
index 0000000..8faeaaa
--- /dev/null
+++ b/nextjs-nomad/component/Seo.js
@@ -0,0 +1,11 @@
+import Head from "next/head"
+
+const Seo = ({ title }) => {
+ return (
+
+ {children}
+ Not Fount
+} + +export default NotFount diff --git a/nextjs-nomad/pages/_app.js b/nextjs-nomad/pages/_app.js new file mode 100644 index 0000000..a211522 --- /dev/null +++ b/nextjs-nomad/pages/_app.js @@ -0,0 +1,13 @@ +import Layout from "@/component/Layout" + +const App = ({ Component, pageProps }) => { + return ( +
+
+
+
+ )
+}
+
+export default App
diff --git a/nextjs-nomad/pages/about.js b/nextjs-nomad/pages/about.js
new file mode 100644
index 0000000..5582eb7
--- /dev/null
+++ b/nextjs-nomad/pages/about.js
@@ -0,0 +1,11 @@
+import Seo from "../component/Seo"
+
+const About = () => {
+ return (
+
+
+ )
+}
+export default About
diff --git a/nextjs-nomad/pages/index.js b/nextjs-nomad/pages/index.js
new file mode 100644
index 0000000..e3f96e7
--- /dev/null
+++ b/nextjs-nomad/pages/index.js
@@ -0,0 +1,63 @@
+import Seo from "../component/Seo"
+import Link from "next/link"
+import { useRouter } from "next/router"
+
+export default function Home({ results }) {
+ const router = useRouter()
+ const onClick = (id, title) => {
+ router.push(`/movies/${title}/${id}`)
+ }
+ return (
+ About
+
+
+ )
+}
+
+export const getServerSideProps = async () => {
+ const { results } = await (
+ await fetch(`http://localhost:3000/api/movies`)
+ ).json()
+ return {
+ props: {
+ results,
+ },
+ }
+}
diff --git a/nextjs-nomad/pages/movies/[...params].js b/nextjs-nomad/pages/movies/[...params].js
new file mode 100644
index 0000000..b9a3d6b
--- /dev/null
+++ b/nextjs-nomad/pages/movies/[...params].js
@@ -0,0 +1,22 @@
+import Seo from "@/component/Seo"
+import { useRouter } from "next/router"
+
+const Detail = ({ params }) => {
+ const router = useRouter()
+ const [title, id] = params || []
+
+ return (
+ onClick(movie.id, movie.original_title)}
+ >
+ 
+
+
+ ))}
+
+
+
+ {movie.original_title}
+ +
+
+ )
+}
+
+export default Detail
+
+export const getServerSideProps = ({ params: { params } }) => {
+ return {
+ props: { params },
+ }
+}
diff --git a/nextjs-nomad/postcss.config.mjs b/nextjs-nomad/postcss.config.mjs
new file mode 100644
index 0000000..1a69fd2
--- /dev/null
+++ b/nextjs-nomad/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+ plugins: {
+ tailwindcss: {},
+ },
+};
+
+export default config;
diff --git a/nextjs-nomad/public/favicon.ico b/nextjs-nomad/public/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/nextjs-nomad/public/favicon.ico differ
diff --git a/nextjs-nomad/public/next.svg b/nextjs-nomad/public/next.svg
new file mode 100644
index 0000000..5174b28
--- /dev/null
+++ b/nextjs-nomad/public/next.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/nextjs-nomad/public/vercel.svg b/nextjs-nomad/public/vercel.svg
new file mode 100644
index 0000000..d2f8422
--- /dev/null
+++ b/nextjs-nomad/public/vercel.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/nextjs-nomad/styles/globals.css b/nextjs-nomad/styles/globals.css
new file mode 100644
index 0000000..6eec988
--- /dev/null
+++ b/nextjs-nomad/styles/globals.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ max-width: 520px;
+ width: 100%;
+ margin: 0 auto;
+}
+span {
+ color: inherit;
+ text-decoration: none;
+}
diff --git a/nextjs-nomad/tailwind.config.js b/nextjs-nomad/tailwind.config.js
new file mode 100644
index 0000000..78ebc4e
--- /dev/null
+++ b/nextjs-nomad/tailwind.config.js
@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+ "./components/**/*.{js,ts,jsx,tsx,mdx}",
+ "./app/**/*.{js,ts,jsx,tsx,mdx}",
+ ],
+ theme: {
+ extend: {
+ backgroundImage: {
+ "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+ "gradient-conic":
+ "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+ },
+ },
+ },
+ plugins: [],
+};
diff --git a/nomad/.gitignore b/nomad/.gitignore
new file mode 100644
index 0000000..221abb9
--- /dev/null
+++ b/nomad/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.next
+.env
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/nomad/README.md b/nomad/README.md
new file mode 100644
index 0000000..c6db326
--- /dev/null
+++ b/nomad/README.md
@@ -0,0 +1,87 @@
+## app router(13버전 이후)
+
+- 프레임워크인 nextjs는 라이브러리인 react와는 다르게 사용방법대로 코드를 작성해야 프레임워크가 개발자의 코드를 읽어서 동작시켜준다.
+- nextjs에서 페이지 라우팅을 위해서 다음의 사용방법을 따라야한다.
+ > 1.app 폴더아래 `page.tsx`를 생성해야 해당 폴더의 이름으로 경로를 생성해준다.
+ > 2.url경로는 상위 폴더이름/하위폴더이름/순으로 생성된다.
+- 별도의 경로설정을 해줄 필요없이 폴더를 생성하고 `page.tsx`라는 파일을 만들어주는 과정으로 경로를 생성해준다.{title}
++ _(page router의 경우 page.tsx 를 생성해서 동일한 동작이가능하다.)_ + +## `` + +- react에서는 useNavigate()함수를 이용해 페이지이동을 시켰다. +- nextjs는 프레임워크로서 next/Link에서 Link컴포넌트를 지원해준다. +- `` 와 ``의 차이점? + > - 둘다 `href={경로}`를 작성하면 페이지이동을 가능하게해준다. 하지만 a는 페이지전체를 reload시키는 반면 Link는 빌드시 저장된 주소로 이동할때 사용하며 페이지전체를 reload하지 않는다. + > - Link는 빋르 후 에 a tag로 자동으로 변환된다. + > - 따라서 Link는 내부 페이지 이동시에 사용하고 외부페이지로 이동시에는 a tag를 사용하는 편이며 Link태그를 사용할 것을 권장한다. + > _(13버전 이후에는 Link tag내부에 a tag로 감싸지않아도 된다.)_ + +## Dynamic Routing + +- 위에서 살펴본 라우팅방식은 경로가 변하지않는 정적인 경우 사용했다. 만약 postid와같은 값에의해 경로에 표시되어야할 경우 Dynamic Routing을 사용한다. +- 폴더이름으 `[]` 감싸는 것으로 Dynamic Routing을 활용할 수 있으며 해당 폴더아래 `page.tsx`는 특정 props를 전달받는다. + +```tsx +ex) [id] > page.tsx + +const PostId = ({params:{id}})=> { + + return <>페이지구성 컴포넌트.. +} + +``` + +params라는 key에 id라는 key를 가진객체형태의 파라미터를 전달받는다. + +- 이 외에 useRouter()를 사용해서 동적 경로의 파라미터를 받아오는 것도 가능함. +## layout +- 각경로폴더아래 layout.tsx를 생성하면 모든 경로에서 공유할 수 있는 layout을 만들 수 있다. +- nextjs가 빌드할때 layout을 먼저확인하고 후에 page를 로드하낟. 또한 layout은 최상위 layout부터 중첩된다. + +## Loading, error, notfound + +- `(Loading, error, notfound).tsx`를 app아래 폴더에 생성하면 loading중일때, error발생시, 틀린경로 접근시 보여줄 컴포넌트를 생성할 수 있다. 이름만맞춰서 컴포넌트를 생성하면 특정상황에 대비한 컴포넌트를 보여줄 수 있어 간편하다. + +## suspense + +- Loading.tsx를 사용하면 loading중일때 해당페이지 전체가 Loading컴포넌트로 보이게된다. +- 데이터를 불러오는 컴포넌트가 아닌경우는 화면에보여지고 진짜 로딩중인 컴포넌트에만 Loading 상태를 보이고 싶다면 간단하게 해당컴포넌트를 suspense로 감싸면 해결된다. + +```tsx +
Loading...
+} + +export default Loading diff --git a/nomad/app/(home)/page.tsx b/nomad/app/(home)/page.tsx new file mode 100644 index 0000000..4603100 --- /dev/null +++ b/nomad/app/(home)/page.tsx @@ -0,0 +1,30 @@ +import Movie from "../../components/movie" +import styles from "../../styles/home.module.css" +import { API_URL } from "../constants" +export const metadata = { + title: "Home", +} + +const getMovies = async () => { + const response = await fetch(API_URL) + const json = await response.json() + return json +} + +const HomePage = async () => { + const movies = await getMovies() + return ( +
+ {movies.map((movie) => (
+
+ )
+}
+
+export default HomePage
diff --git a/nomad/app/(movies)/movies/[id]/error.tsx b/nomad/app/(movies)/movies/[id]/error.tsx
new file mode 100644
index 0000000..99be3ad
--- /dev/null
+++ b/nomad/app/(movies)/movies/[id]/error.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+const ErrorOMG = () => {
+ return somthing broke...
+} + +export default ErrorOMG diff --git a/nomad/app/(movies)/movies/[id]/loading.tsx b/nomad/app/(movies)/movies/[id]/loading.tsx new file mode 100644 index 0000000..6ccb032 --- /dev/null +++ b/nomad/app/(movies)/movies/[id]/loading.tsx @@ -0,0 +1,5 @@ +const Loading = () => { + returnLoading a movie : id
+} + +export default Loading diff --git a/nomad/app/(movies)/movies/[id]/page.tsx b/nomad/app/(movies)/movies/[id]/page.tsx new file mode 100644 index 0000000..0df1c3b --- /dev/null +++ b/nomad/app/(movies)/movies/[id]/page.tsx @@ -0,0 +1,28 @@ +import { Suspense } from "react" +import MovieInfo, { getMovie } from "../../../../components/movie-info" +import MovieVideos from "../../../../components/movie-videos" + +type IParams = { + params: { id: string } +} + +export const generateMetadata = async ({ params: { id } }: IParams) => { + const movie = await getMovie(id) + return { + title: movie.title, + } +} + +const MovieDetail = ({ params: { id } }: IParams) => { + return ( +
+ Loading Movie Info}>
+
+ Loading Movie Videos}>
+
+
+ )
+}
+export default MovieDetail
diff --git a/nomad/app/about-us/page.tsx b/nomad/app/about-us/page.tsx
new file mode 100644
index 0000000..c6974d9
--- /dev/null
+++ b/nomad/app/about-us/page.tsx
@@ -0,0 +1,13 @@
+export const metadata = {
+ title: "About Us ",
+}
+
+const AboutUs = () => {
+ return (
+
+
+ )
+}
+
+export default AboutUs
diff --git a/nomad/app/constants.ts b/nomad/app/constants.ts
new file mode 100644
index 0000000..8fbe0c9
--- /dev/null
+++ b/nomad/app/constants.ts
@@ -0,0 +1 @@
+export const API_URL = "https://nomad-movies.nomadcoders.workers.dev/movies"
diff --git a/nomad/app/layout.tsx b/nomad/app/layout.tsx
new file mode 100644
index 0000000..b82723b
--- /dev/null
+++ b/nomad/app/layout.tsx
@@ -0,0 +1,22 @@
+import "../styles/global.css"
+import Navigation from "../components/navigation"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+ title: {
+ template: `%s | Next Movies`,
+ default: "Next Movies",
+ },
+ description: "Generated by Next.js",
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ about Us
+
+
+ )
+}
+
+export default NotFound
diff --git a/nomad/components/movie-info.tsx b/nomad/components/movie-info.tsx
new file mode 100644
index 0000000..d57b1db
--- /dev/null
+++ b/nomad/components/movie-info.tsx
@@ -0,0 +1,29 @@
+import { API_URL } from "../app/constants"
+import styles from "../styles/movie-info.module.css"
+export const getMovie = async (id: string) => {
+ const response = await fetch(`${API_URL}/${id}`)
+ return response.json()
+}
+
+const MovieInfo = async ({ id }: { id: string }) => {
+ const movie = await getMovie(id)
+ return (
+ Not Found
+
+ 
+
+
+ )
+}
+
+export default MovieInfo
diff --git a/nomad/components/movie-videos.tsx b/nomad/components/movie-videos.tsx
new file mode 100644
index 0000000..854cd68
--- /dev/null
+++ b/nomad/components/movie-videos.tsx
@@ -0,0 +1,26 @@
+import { API_URL } from "../app/constants"
+import styles from "../styles/movie-videos.module.css"
+const getVideos = async (id: string) => {
+ // await new Promise((resolve) => setTimeout(resolve, 3000))
+ // throw new Error("somting broke....")
+ const response = await fetch(`${API_URL}/${id}/videos`)
+ return response.json()
+}
+
+const MovieVideos = async ({ id }: { id: string }) => {
+ const videos = await getVideos(id)
+ return (
+
+ {videos.map((video) => (
+
+ ))}
+
+ )
+}
+export default MovieVideos
diff --git a/nomad/components/movie.tsx b/nomad/components/movie.tsx
new file mode 100644
index 0000000..4107c50
--- /dev/null
+++ b/nomad/components/movie.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import Link from "next/link"
+import styles from "../styles/movie.module.css"
+import { useRouter } from "next/navigation"
+
+type IMovieProps = {
+ title: string
+ id: string
+ poster_path: string
+}
+
+const Movie = ({ title, id, poster_path }: IMovieProps) => {
+ const router = useRouter()
+ const onClick = () => {
+ router.push(`/movies/${id}`)
+ }
+ return (
+
+ 
+
+ {title}
+
+
+ )
+}
+export default Movie
diff --git a/nomad/components/navigation.tsx b/nomad/components/navigation.tsx
new file mode 100644
index 0000000..4c1c37f
--- /dev/null
+++ b/nomad/components/navigation.tsx
@@ -0,0 +1,22 @@
+"use client"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import style from "../styles/navigation.module.css"
+
+const Navigation = () => {
+ const path = usePathname()
+ return (
+
+ )
+}
+
+export default Navigation
diff --git a/nomad/next-env.d.ts b/nomad/next-env.d.ts
new file mode 100644
index 0000000..4f11a03
--- /dev/null
+++ b/nomad/next-env.d.ts
@@ -0,0 +1,5 @@
+///