mobi-community · hayoung78 · May 20, 2024 · May 23, 2024 · May 26, 2024 · May 27, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/task1/readme.md b/task1/readme.md
@@ -0,0 +1,79 @@
+# next 와 react의 차이점
+- 리액트는 UI를 구축하기 위한 라이브러리이다.
+- ```Next.js```는 이런 리액트를 기반으로 한 프레임 워크로 리액트의 기능을 확장하여 더많은 기능과 편의성을 제공한다.  (서버 사이드 렌더링, 정적사이트 생성. 파일 기반 라우팅 등)
+
+## ✅ 페이지라우팅 에서의 차이점
+- ```React```는 react-router와 같은 라이브러리를 통해 클라이언튼 사이드 라우팅 구현
+- ```Next.js```는 파일기반 라우팅을 제공하여, "pages" 디렉토리에 파일을 추가하면 자동으로 라우트 생성
+
+## ✅ 데이터패칭 에서의 차이점
+- ```React```는 클라이언트측에서 주로 사용, fetch 나 axios같은 라이브러리 사용
+-  ```Next.js``` 는 getServerSideProps, getStaticProps, getStaticPaths 등의 함수로 데이터를 서버에서 미리 가져오거나, 빌드 시점에 데이터를 가져와 페이지를 생성할 수 있음.
+
+## ✅ 이미지 및 폰트 최적화
+- ```React``` : 이미지 최적화 및 폰트 최적화 제공 X , 라이브러리를 사용하여 수동으로 설정. 웹팩설정 등을 통해 이미지 최적화 가능
+-  ```Next.js```  : next/image 컴포넌트를 통해 이미지 최적화를 자동으로 제공, next/font를 통해 자동으로 지원
+
+
+# SSR 과 CSR
+## ✅ 브라우저 렌더링이란?
+CSR과 SSR을 알아보기전에 브라우저 렌더링에대해서 알아야한다.
+> 브라우저 렌더링?
+> - 웹 브라우저에 있는 엔진 중 1개 
+>> - 렌더링 엔진 : 사용자가 볼 화면을 그려내는 역할
+(즉, HTML과 CSS를 파싱하여 최종적으로 화면을 그려줌)
+>> - 자바스크립트 엔진 : 자바스크립트 코드를 읽어내 기능을 작동시키는 역할
+> - HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다.
+> - 업데이트가 필요할 때 효율적으로 렌더링을 할 수 있도록 자료구조를 생성한다.
+![](https://velog.velcdn.com/images/hayoung78/post/50a84071-de4d-4bc5-a2a5-d4ece9836875/image.png)
+
+위에 사진과 같이 브라우저 렌더링이 일어난다.
+자세한 내용 참조는 아래 링크 클릭
+[velog 참고 문서](https://velog.io/@timosean/%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81Rendering-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0)
+
+그렇다면 이제 CSR 과 SSR에 대하여 알아보도록 하자
+브라우저 렌더링에는 크게 **<span>클라이언트 사이드 렌더링</span>** 과 **서버 사이드 렌더링** 으로 나뉜다
+
+## ☑️ CSR 이란?
+= Client Side Rendering
+- 클라이언트인 브라우저가 렌더링을 처리하는 방식이다.
+- 즉, 서버에서 받은 데이터를 브라우저에 화면에 그려주는 방식이다.
+- CSR 에서의 ```Hydration``` 은 사용자 인터렉션이 가능한 동적인 컴포넌트를 생성하는 과정 이다.
+- 여러페이지로 이동하더라도 최초에 서버에서 전송받은 하나의 HTML을 사용해 컴포넌트만 교체하여 렌더링이 일어난다.
+
+> 장점
+> - 렌더링을 브라우저에게 담당 시킴으로써 사용자에게 더 **빠른 인터렉션 제공**
+> - 최초의 렌더링 시점에서 이미 DOM객체가 만들어져서 **브라우저 API 호출이 자유롭다**.
+> - 클라이언트 측에서 JS를 사용해 동적으로 컴포넌트를 렌더링 -> **서비스 이용 경험이 좋다.**
+>
+> 단점
+> - 첫 요청시 전체 페이지에 대한 모든 문서 파일을받아서 **첫 페이지 로딩 속도가 SSR에 비해 느리다** 
+> - 크롤러(포털사이트 검색엔진) 가 웹사이트에 대한 데이터를 제대로 수집하지 못할 수 있다.(별도의 보완작업 필요할 수 있음)
+
+
+CSR의 방식으로 웹을 구현한다는건, 코드가 동작하는 시점에서 이미 브라우저의 모든 기능이 활성화 되어있다는 의미이다.
+
+서버로 부터 받아온 최초의 JS 파일은 브라우저 런타임 위에서 실행되기 때문에 브라우저 저장소나 api 등을 자유롭게 사용 가능하다.
+
+즉, **최초 로딩은 느리더라도** 클라이언트 측에서 JS를 사용해 동적으로 컴포넌트를 렌더링하기때문에 지속적으로 볼때 **서비스 이용 경험이 좋다.**
+
+
+## ☑️ SSR 이란?
+= Sever Side Rendering
+- 초기렌더링을 서버측에서 수행
+- 웹페이지 접속시 브라우저가 해당 URL을 서버에 요청 -> 이 URL을 기준으로 어떤 페이지를 보여줄것인지 결정
+- **최초 렌더링이 서버사이드에서 이루어지므로** 아직 DOM 객체가 없다!
+
+- SSR에서의 ```Hydration``` 은 서버로부터 전송받은 초기 HTML요소 중 재사용할 요소들을 찾아내고 정적인 상태의 컴포넌트를 -> 동적인 상태로 변환하는 과정 (마치 나무에 물주듯..)
+
+> 장점
+> - **검색엔진 최적화에 유리**하다. (사용자의 쿼리에 따라 주기적으로 웹탐색 하고 수많은 페이지를 URL기준으로 수집하여 DB에 저장)
+>
+> - 최초 JS파일 없이도 HTML이 이미 렌더 되었기 때문에 **첫 페이지 로딩 속도가 CSR 보다 빠르다.**
+>
+> 단점
+> - 초기로딩 페이지 이후 **페이지 이동시 속도⬇️**
+> - 페이지 이동시 마다 클라이언트는 서버에게 필요한 데이터를 요청하고 , 서버는 응답해야한다.
+
+
+# 3. Convenience
diff --git a/task2/.gitignore b/task2/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/task2/app/layout.tsx b/task2/app/layout.tsx
@@ -0,0 +1,19 @@
+export const metadata = {
+    title: {
+        template: `%s | "Wendyyyyy yeah!"`,
+        default: "Wennnndy",
+    },
+    description: "Hello Wengdi World",
+};
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en">
+            <body>{children}</body>
+        </html>
+    );
+}
diff --git a/task2/app/not-found.tsx b/task2/app/not-found.tsx
@@ -0,0 +1,4 @@
+const NotFound = () => {
+    return <h1>Not-Found..</h1>;
+};
+export default NotFound;
diff --git a/task2/app/page.tsx b/task2/app/page.tsx
@@ -0,0 +1,19 @@
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+const Main = () => {
+    // const router = useRouter();
+    // const onMoveProfile = () => {
+    //     router.push("/profile");
+    // };
+    return (
+        <>
+            <h1>MainPage</h1>
+            <form action="/profile/1234" method="get">
+                <button type="submit">Profile 바로 가기</button>
+            </form>
+            <Link href={"/post/1234"}>post 바로가기</Link>
+        </>
+    );
+};
+export default Main;
diff --git a/task2/app/post/[id]/page.tsx b/task2/app/post/[id]/page.tsx
@@ -0,0 +1,17 @@
+import { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+    title: "post",
+};
+
+const PostPage = ({ params }) => {
+    return (
+        <>
+            <h1>PostPage!!!!!</h1>
+            <h2>{params.id}</h2>
+            <Link href={"/post/1"}>Link post1</Link>
+        </>
+    );
+};
+export default PostPage;
diff --git a/task2/app/post/[id]/postDetail.tsx b/task2/app/post/[id]/postDetail.tsx
@@ -0,0 +1,15 @@
+"use Client";
+
+import { useRouter } from "next/navigation";
+
+const PostDetail = () => {
+    const router = useRouter();
+    const queryParams = router.push("/post/1");
+    return (
+        <>
+            <h1>여기는 포스트 디테일 페이지입니다 </h1>
+            <h2>{JSON.stringify(queryParams)}</h2>
+        </>
+    );
+};
+export default PostDetail;
diff --git a/task2/app/profile/[id]/page.tsx b/task2/app/profile/[id]/page.tsx
@@ -0,0 +1,16 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Profile",
+};
+
+const ProfilePage = ({ params }) => {
+    return (
+        <>
+            <h1>Profile</h1>
+            <h2>{params.id}</h2>
+            <h2>{params.slug}</h2>
+        </>
+    );
+};
+export default ProfilePage;
diff --git a/task2/next-env.d.ts b/task2/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.