fix: study

skkuding · Mar 4, 2024 · 3d5435f · 3d5435f
1 parent 03c5169
commit 3d5435f
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 23 deletions.
diff --git a/content/docs/frontend/2. JavaScript, DOM.md b/content/docs/frontend/2. JavaScript, DOM.md
@@ -9,6 +9,8 @@ weight = 220
 
 저번 시간에는 HTML, CSS를 통해 웹의 구조와 디자인와 같은 정적인 부분을 다뤄봤어요. 이번 시간에는 JavaScript를 통해 웹의 동적인 부분을 다뤄볼 거예요!
 
+여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄
+
 ## 공부할 내용 📚
 
 ### JavaScript

diff --git a/content/docs/frontend/3. TypeScript.md b/content/docs/frontend/3. TypeScript.md
@@ -13,6 +13,8 @@ weight = 230
 
 이번 시간에는 이전에 공부한 JavaScript에 정적인 타입을 입힌 TypeScript에 대해 알아보아요!
 
+여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄
+
 ## 📚 공부할 내용
 
 TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로 정적인 타입을 지원하는 javascript의 superset 이에요. 따라서 새로운 문법을 배울 필요 없이 어떻게 하면 JavaScript에 타입을 입힐 수 있는지를 중점으로 공부하면 돼요!

diff --git a/content/docs/frontend/4. React.md b/content/docs/frontend/4. React.md
@@ -9,6 +9,8 @@ weight = 240
 
 지금까지는 웹의 기본 원소인 HTML, CSS, JavaScript를 이용하여 웹 페이지를 만들어 보았고 그 과정 속에서 직접 DOM을 조작하고 이벤트를 다뤄보았어요. 이번 시간에는 이런 과정을 더욱 쉽게 할 수 있도록 도와주는 라이브러리인 React에 대해 알아보아요!
 
+여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄
+
 ## 📚 공부할 내용
 
 React는 Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위해 사용해요. React는 웹 페이지의 UI를 컴포넌트로 나누고, 이 컴포넌트들을 조합하여 UI를 구성해요. 이렇게 컴포넌트 단위로 나누어진 UI는 재사용성이 높아져서 코드의 양을 줄여주고, 유지보수를 쉽게 해줘요.

diff --git a/...rontend/8. React, Next.JS (additional).md → ...rontend/5. React, Next.JS (additional).md b/...rontend/8. React, Next.JS (additional).md → ...rontend/5. React, Next.JS (additional).md
@@ -1,5 +1,5 @@
 +++
-title = "8. React2"
+title = "5. React2"
 description = "React의 추가 개념을 공부해봅시다."
 icon = "article"
 date = "2023-09-11"
@@ -9,6 +9,8 @@ weight = 290
 
 지금까지는 기본적인 부분 위주로 공부를 했어요. 마지막 주차에서는 React의 추가 개념과 third-party 라이브러리를 알아봅시다!
 
+여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄
+
 ## 📚 공부할 내용
 
 - [React 학습](https://ko.react.dev/learn/describing-the-ui)
@@ -32,4 +34,4 @@ weight = 290
 1. 기존 프로젝트에서는 react hook인 useState를 사용해서 상태관리를 했는데 이를 zustand로 바꿔봐요!
 2. React 학습 후 기존 코드를 좀 더 나은 방식으로 구현해보세요!
    1. 예) 기존엔 배열 state 업데이트를 push, unshift를 사용했다면 concat과 [...arr] 전개 연산자로 바꿔봐요!
-   2. 바꿀 부분이 없다면 기존에 잘 작성한 코드들의 사례를 공유해주세요!
+   2. 바꿀 부분이 없다면 기존에 잘 작성한 코드들의 사례를 공유해주세요!
diff --git a/content/docs/frontend/5. Data Fetching.md → content/docs/frontend/6. Data Fetching.md b/content/docs/frontend/5. Data Fetching.md → content/docs/frontend/6. Data Fetching.md
@@ -1,5 +1,5 @@
 +++
-title = "5. REST API & GraphQL"
+title = "6. REST API & GraphQL"
 description = "REST API와 GraphQL을 이용해 외부 데이터를 받아봅니다."
 icon = "article"
 date = "2023-09-11"
@@ -11,6 +11,8 @@ weight = 250
 
 지금까지는 포켓몬 데이터를 코드 또는 로컬 파일에서 가져왔어요. 이번 시간에는 외부에서 데이터를 가져오는 방법에 대해 알아보아요!
 
+여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄
+
 ## 📚 공부할 내용
 
 - Background
@@ -33,7 +35,7 @@ weight = 250
 axios는 [XMLHttpRequest](https://ko.javascript.info/xmlhttprequest)를 기반으로 만들어진 라이브러리에요. 더 최신 기술인 fetch API를 사용해보고 싶다면 [여기](https://ko.javascript.info/fetch)를 참고해주세요! 보통 호환성 문제와 사용하기 편하다는 이유로 아직 axios를 많이 사용하지만 stream과 같은 기능(chatgpt처럼 계속 데이터를 받아오는 기능)은 XMLHttpRequest로는 구현할 수 없기 때문에 fetch API 또한 나중에 공부해 보는 것을 추천해요!
 
 > 나중에 nextjs를 배우면서 더 확장된 기능을 가진 fetch API를 사용할 거니 미리 공부해 두면 좋아요!
-  
+
 ## 프로젝트 실습 🎈
 
 1. 메인페이지에 있는 포켓몬 리스트를 REST API를 통해 가져와 보아요.

diff --git a/content/docs/frontend/6. Tailwind CSS.md → content/docs/frontend/7. Tailwind CSS.md b/content/docs/frontend/6. Tailwind CSS.md → content/docs/frontend/7. Tailwind CSS.md
@@ -1,5 +1,5 @@
 +++
-title = "6. Tailwind CSS"
+title = "7. Tailwind CSS"
 description = "CSS 유틸리티 라이브러리인 Tailwind CSS를 알아봅니다."
 icon = "article"
 date = "2023-09-11"
@@ -35,7 +35,7 @@ Tailwind CSS를 프로젝트에 설치 및 환경 설정하고 기존에 작성
 
 1. `npm install tailwindcss` 또는 `pnpm install tailwindcss` 명령어를 통해 Tailwind CSS를 설치해요.
 2. `npx tailwindcss init` 또는 `pnpx tailwindcss init` 명령어를 통해 `tailwind.config.js` 파일을 생성해요.
-3. `tailwind.config.js` 파일에서 `content` 속성에 `['./src/**/*.{js,jsx,ts,tsx}']`를 추가해요. 
+3. `tailwind.config.js` 파일에서 `content` 속성에 `['./src/**/*.{js,jsx,ts,tsx}']`를 추가해요.
 4. `App.css` 파일에 `@tailwind base;`, `@tailwind components;`, `@tailwind utilities;`를 추가해요.
 5. `npm run start` 또는 `pnpm run start` 명령어를 통해 프로젝트를 실행해요.
 

diff --git a/content/docs/frontend/7. Next.js.md → content/docs/frontend/8. Next.js.md b/content/docs/frontend/7. Next.js.md → content/docs/frontend/8. Next.js.md
@@ -1,5 +1,5 @@
 +++
-title = "7. Next.js"
+title = "8. Next.js"
 description = "Next.js를 이용해 SSR을 구현해봅니다."
 icon = "article"
 date = "2023-09-11"
@@ -9,13 +9,19 @@ weight = 280
 
 지금까지 배운 React는 CSR(Client Side Rendering) 방식으로 동작해요! 즉 서버에서 브라우저로 전달되는 HTML 파일에는 일부 정보만 담겨있고, 나머지 정보는 브라우저에서 JavaScript를 통해 가져오는 방식이예요! 이러한 이유로 초기 로딩 속도가 느리고, 검색 엔진 최적화(SEO)가 어렵다는 단점이 있어요. 이번 시간에는 이러한 단점을 보완하기 위해 React에 SSR(Server Side Rendering)을 적용한 Next.js를 알아봅시다!
 
+여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄
+
 ## 📚 공부할 내용
 
+- [Next.js 공식문서](https://nextjs.org/docs)
 - [[손에 익는 Next.js] 공식 문서 훑어보기](https://www.inflearn.com/course/%EC%86%90%EC%97%90-%EC%9D%B5%EB%8A%94-nextjs-part1/dashboard)
   - 인프런 아이디는 `[email protected]`이고 비밀번호는 노션 신규 팀원 스터디 페이지에 있어요!
 - [어서 와, SSR은 처음이지? - 도입편](https://d2.naver.com/helloworld/7804182)
   - 네이버 블로그에 SSR을 도입하게 된 이유를 주제로 SSR을 설명하고 있어요!
   - SSR을 이해하는데 도움이 될 거예요!
+- [Next.js 프로젝트 영상](https://www.youtube.com/watch?v=wm5gMKuwSYk&list=PL6QREj8te1P7gixBDSU8JLvQndTEEX3c3&index=1)
+  - 하나의 프로젝트를 처음부터 끝까지 만드는 영상이에요! 지금은 이거를 전부 할 필요는 없고, 현재로서는 34:20까지 보아도 Next.js의 기본적이면서 중요한 기능들을 배울 수 있어요!(영상을 보면서 해당부분 공식문서도 함께 읽어보면 더욱 좋아요!)
+  - (해당 링크 영상은 javascript로 프로젝트를 진행하지만, 해당 유튜브채널 들어가보면 typescript로 진행하는 프로젝트도 많습니다!)
 
 ## 🎯 프로젝트 실습
 
@@ -49,4 +55,4 @@ weight = 280
 - 기존 a 태그를 Link 컴포넌트로 대체해주세요!
   - 언제 prefetching이 발생하는지 확인해보세요! (공식 문서에 나와있어요!)
 - Next.js가 제공하는 Font 컴포넌트를 사용해서 `Noto sans KR`로 폰트를 변경해주세요!
-  - Next.js의 Font 컴포넌트는 어떠한 이점이 있을까요?
+  - Next.js의 Font 컴포넌트는 어떠한 이점이 있을까요?
diff --git a/content/docs/frontend/9. Git, Github.md b/content/docs/frontend/9. Git, Github.md
@@ -21,10 +21,14 @@ weight = 300
 ## Github
 
 Github은 이름 그대로 git repository를 호스팅해 주는 서비스예요. 단순히 Repo를 호스팅해 주는 역할 이외로 github page를 통해 여러분의 Repo에 있는 파일들을 바탕으로 손쉽게 배포도 할 수 있어요.
+밑에는 Github관련 강의 혹은 참고 사이트들이에요.
+
+사실 Github같은 경우는 기본적인 것들만 알고 직접 사용하면서 배우는 것이 가장 좋아요! 밑에 링크 중에서 네번째 링크 강의는 2시간 가량 길이로 조금 길기는 하지만 전체적으로 훑어보기 좋습니다.
 
 - [Github 공식 사이트](https://github.com/)
 - [Github 간단 사용법 - 조코딩](https://www.youtube.com/watch?v=Fley6IFhlC8&ab_channel=%EC%A1%B0%EC%BD%94%EB%94%A9JoCoding)
 - [Github Page - 생활코딩](https://www.youtube.com/watch?v=MN1g0490WAg&ab_channel=%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9)
+- [Github 전체강의 - 얄팍한 코딩사전](https://www.youtube.com/watch?v=1I3hMwQU6GU)
 
 ## [필수] 실습 프로젝트에 적용하기 🔥
 

diff --git a/content/docs/frontend/Getting Started.md b/content/docs/frontend/Getting Started.md
@@ -20,20 +20,20 @@ weight = 200
 
 ## 📚 커리큘럼
 
-| 주차    | 주제                                           | 설명      |
-| ------- | ---------------------------------------------- | --------- |
-| 4 주차  | [HTML, CSS](./1.%20HTML,%20CSS.md)             | 추가 예정 |
-| 5 주차  | [JavaScrip, DOM](./2.%20JavaScript,%20DOM.md)  | 추가 예정 |
-| 6 주차  | [TypeScript](./3.%20TypeScript.md)             | 추가 예정 |
-| 7 주차  | 중간고사 화이팅 😄                             | 추가 예정 |
-| 8 주차  | 중간고사 화이팅 😄                             | 추가 예정 |
-| 9 주차  | [React](./4.%20React.md)                       | 추가 예정 |
-| 10 주차 | [React](./4.%20React.md)     | 추가 예정 |
-| 11 주차 | [Data Fetching](./5.%20Data%20Fetching.md) | 추가 예정 |
-| 12 주차 | [Tailwind CSS](./6.%20Tailwind%20CSS.md)       | 추가 예정 |
-| 13 주차 | [Next.js](./7.%20Next.js.md)                   | 추가 예정 |
-| 14 주차 | 기말고사 화이팅 😄                             | 추가 예정 |
-| 15 주차 | 기말고사 화이팅 😄                             | 추가 예정 |
-| 16 주차 | 기말고사 화이팅 😄                             | 추가 예정 |
+| 주차    | 주제                                                  | 설명      |
+| ------- | ----------------------------------------------------- | --------- |
+| 4 주차  | [HTML, CSS](./1.%20HTML,%20CSS.md)                    | 추가 예정 |
+| 5 주차  | [JavaScrip, DOM](./2.%20JavaScript,%20DOM.md)         | 추가 예정 |
+| 6 주차  | [TypeScript](./3.%20TypeScript.md)                    | 추가 예정 |
+| 7 주차  | 중간고사 화이팅 😄                                    | 추가 예정 |
+| 8 주차  | 중간고사 화이팅 😄                                    | 추가 예정 |
+| 9 주차  | [React](./4.%20React.md)                              | 추가 예정 |
+| 10 주차 | [React2](<./5.%20React,%20Next.js%20(additional).md>) | 추가 예정 |
+| 11 주차 | [Data Fetching](./6.%20Data%20Fetching.md)            | 추가 예정 |
+| 12 주차 | [Tailwind CSS](./7.%20Tailwind%20CSS.md)              | 추가 예정 |
+| 13 주차 | [Next.js](./8.%20Next.js.md)                          | 추가 예정 |
+| 14 주차 | 기말고사 화이팅 😄                                    | 추가 예정 |
+| 15 주차 | 기말고사 화이팅 😄                                    | 추가 예정 |
+| 16 주차 | 기말고사 화이팅 😄                                    | 추가 예정 |
 
 배울 게 많아서 힘들 수 있어요! 그래도 끝까지 완주해 보아요! 🏃‍♀️