diff --git a/frontend/lecture/src/App.tsx b/frontend/lecture/src/App.tsx index 6d274c6..e55f8cf 100644 --- a/frontend/lecture/src/App.tsx +++ b/frontend/lecture/src/App.tsx @@ -10,6 +10,9 @@ import { Environment } from '@/pages/Environment/lecture'; import { Home } from '@/pages/home'; import { OTAssignment } from '@/pages/OT/assignment'; import { OT } from '@/pages/OT/lecture'; +import { ReactBasicAssignment } from '@/pages/ReactBasic/assignment'; +import { ReactBasic } from '@/pages/ReactBasic/lecture'; +import { WebBasic } from '@/pages/WebBasic/lecture'; import { formatDate } from '@/utils/utils'; const pages: ( @@ -41,7 +44,7 @@ const pages: ( }, { type: 'assignment', - title: '코모 인증샷', + title: 'OT 과제', due: new Date('2024-09-25'), path: '/como-1', element: , @@ -63,26 +66,33 @@ const pages: ( }, { type: 'lecture', - title: '웹, html, css, js', - description: 'html, css, js의 역할과 동작', + title: '웹과 언어', + description: '웹의 역사, html, css, js의 역할과 동작, typescript의 필요성', date: new Date('2024-09-25'), - path: '/web-html-css-js', - element:
TBD
, + path: '/web-html-css-js-ts', + element: , }, { type: 'lecture', - title: '타입스크립트', - description: 'typescript 기초', + title: '리액트 맛보기', + description: 'typescript 기초, React 의 JSX / state / props', date: new Date('2024-09-25'), - path: '/typescript', - element:
TBD
, + path: '/react-basic', + element: , + }, + { + type: 'assignment', + title: '리액트 기초 과제', + due: new Date('2024-10-09'), + path: '/react-basic-assignment', + element: , }, { type: 'lecture', title: '리액트', - description: '리액트의 철학, props와 state, hooks', + description: '리액트의 철학, 상태 설계, Context, Hook', date: new Date('2024-10-02'), - path: '/react-basic', + path: '/react', element:
TBD
, }, { diff --git a/frontend/lecture/src/components/CodeSnippet/index.tsx b/frontend/lecture/src/components/CodeSnippet/index.tsx index b226150..70c08db 100644 --- a/frontend/lecture/src/components/CodeSnippet/index.tsx +++ b/frontend/lecture/src/components/CodeSnippet/index.tsx @@ -6,10 +6,15 @@ export const CodeSnippet = ({ language, }: { code: string[]; - language: 'shell' | 'json'; + language: 'shell' | 'json' | 'html' | 'css' | 'javascript' | 'typescript'; }) => { return ( - + {code.join('\n')} ); diff --git a/frontend/lecture/src/components/SlideContent/index.tsx b/frontend/lecture/src/components/SlideContent/index.tsx new file mode 100644 index 0000000..bbd94a0 --- /dev/null +++ b/frontend/lecture/src/components/SlideContent/index.tsx @@ -0,0 +1,14 @@ +export const SlideContent = ({ + title, + content, +}: { + title: string; + content: string; +}) => { + return ( +
+

{title}

+

{content}

+
+ ); +}; diff --git a/frontend/lecture/src/components/SlideLayout/index.tsx b/frontend/lecture/src/components/SlideLayout/index.tsx new file mode 100644 index 0000000..7c7764e --- /dev/null +++ b/frontend/lecture/src/components/SlideLayout/index.tsx @@ -0,0 +1,22 @@ +import { ReactNode } from 'react'; + +export const AssetDescriptionLayout = ({ + asset: asset, + description, +}: { + asset: ReactNode; + description: string[]; +}) => { + return ( +
+
+
    + {description.map((d) => ( +
  • {d}
    • + ))} +
+
+
{asset}
+
+ ); +}; diff --git a/frontend/lecture/src/pages/OT/assignment.tsx b/frontend/lecture/src/pages/OT/assignment.tsx index 85e709f..79955f1 100644 --- a/frontend/lecture/src/pages/OT/assignment.tsx +++ b/frontend/lecture/src/pages/OT/assignment.tsx @@ -1,15 +1,26 @@ +import { ExternalLink } from '@/components/ExternalLink'; + export const OTAssignment = () => { return (
    -
  • 설문지 작성 완료 (~오늘)
    • -
  • 조원 확인 및 채널/DM방 개설 (~내일)
    • +
  • 조원 확인 및 채널/DM방 개설 (~오늘)
  • - 다음 세미나 전까지 코모 1회{' '} + 다음 세미나 전까지 코모 1회 진행 후 #frontend-잡담 채널에 인증샷 + 업로드 +
    설입이면 세상과 연애하기, 할리스, 커피어반, 커피빈, 관정 스터디룸, 토즈모임센터 등 +
    + 얼굴은 안 나와도 됩니다. +
    • +
  • + 벨로퍼트와 함께 하는 모던 리액트 1-16 까지 튜토리얼 진행하면서 개념 + 정리하고, 정리한 내용 마크다운 형태로 #frontend-잡담 채널에 업로드 +
    +
diff --git a/frontend/lecture/src/pages/OT/lecture.tsx b/frontend/lecture/src/pages/OT/lecture.tsx index 01b883b..832bc05 100644 --- a/frontend/lecture/src/pages/OT/lecture.tsx +++ b/frontend/lecture/src/pages/OT/lecture.tsx @@ -29,6 +29,22 @@ export const OT = () => { { title: '세미나 목표', content: }, { title: '세미나 목표', content: }, { title: '세미나 목표', content: }, + { + title: '과제', + content: ( +
+

+ 세미나에서 하나도 안 알려줘놓고 +
+
+ 할수있죠? 화이팅! +
+
+ 하는 과제 +

+
+ ), + }, { title: '조별과제', content: }, { title: '평가', content: }, ]} diff --git a/frontend/lecture/src/pages/ReactBasic/assignment.tsx b/frontend/lecture/src/pages/ReactBasic/assignment.tsx new file mode 100644 index 0000000..0db6510 --- /dev/null +++ b/frontend/lecture/src/pages/ReactBasic/assignment.tsx @@ -0,0 +1,20 @@ +import { ExternalLink } from '@/components/ExternalLink'; +import { InlineCode } from '@/components/InlineCode'; + +export const ReactBasicAssignment = () => { + return ( +
+

게임 만들기

+
    +
  • + 지뢰찾기, 2048, 네모로직 중 하나를 선택해서 구현한다 (예시:{' '} + +
    • +
  • + 개인 레포에서 로 새 프로젝트를 + 만들고, 개인 레포에 푸시한다 +
    • +
+
+ ); +}; diff --git a/frontend/lecture/src/pages/ReactBasic/lecture.tsx b/frontend/lecture/src/pages/ReactBasic/lecture.tsx new file mode 100644 index 0000000..0b56905 --- /dev/null +++ b/frontend/lecture/src/pages/ReactBasic/lecture.tsx @@ -0,0 +1,92 @@ +import { CodeSnippet } from '@/components/CodeSnippet'; +import { AssetDescriptionLayout } from '@/components/SlideLayout'; +import { Slides } from '@/components/Slides'; + +export const ReactBasic = () => { + return ( + +

리액트 없이

+ {`, + ` const countElement = document.getElementById('count');`, + ` const currentCount = parseInt(countElement.innerText, 10);`, + ` countElement.innerText = (currentCount + 1).toString();`, + ` });`, + ]} + /> + `, + ` `, + `
0
`, + ``, + ]} + /> +

리액트로

+ `, + ` `, + `
{count}
`, + ` `, + `);`, + ]} + /> + + } + /> + ), + }, + { + title: 'TypeScript와 JavaScript의 차이', + content: ( + + person.name;`, + `getName({ nmae: 'Hyunmin' }); // undefined`, + ]} + /> + person.name;`, + `getName({ nmae: 'Hyunmin' }); // Type Error`, + ]} + /> + + } + /> + ), + }, + ]} + /> + ); +}; diff --git a/frontend/lecture/src/pages/WebBasic/lecture.tsx b/frontend/lecture/src/pages/WebBasic/lecture.tsx new file mode 100644 index 0000000..e63c6d5 --- /dev/null +++ b/frontend/lecture/src/pages/WebBasic/lecture.tsx @@ -0,0 +1,516 @@ +import { CodeSnippet } from '@/components/CodeSnippet'; +import { InlineCode } from '@/components/InlineCode'; +import { SlideContent } from '@/components/SlideContent'; +import { AssetDescriptionLayout } from '@/components/SlideLayout'; +import { Slides } from '@/components/Slides'; +import { Badge } from '@/designsystem/ui/badge'; +import { Skeleton } from '@/designsystem/ui/skeleton'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/designsystem/ui/table'; + +export const WebBasic = () => { + return ( + +
+

웹의 역사

+ + + + + + +
+
+

HTML, CSS, JS의 역사

+ + + + + +
+ + ), + }, + { + title: '역사에서 알 수 있는 포인트들', + content: ( +
    +
  • 웹은 처음에 문서를 보는 도구로 만들어졌다
    • +
  • 표준 없이 꽤 오랜 기간을 지나왔다
    • +
  • 계속해서 새로운 기술이 등장하고 발전하고 있다
    • +
+ ), + }, + { + title: '역사를 보면 이해가 되는 웹의 특징', + content: ( +
+
    +
  • 자바스크립트의 이해할 수 없는 동작들 (baNaNa)
    • +
  • + CSS의 , HTML의{' '} + , JS의 등 + 이건 왜 있지? 라는 생각이 + 드는 여러 구시대의 기능들 +
    • +
  • + 기업도 기술도 뭔가 하나가 중심이 잡혀 있지 않은, 모든 구성원이 + 참여하고 경쟁하고 발전시키는 생태계
    + + React, Svelte, Next.js, Remix, Web Component, WASM, ... + +
    • +
+

덕지덕지

+
+ ), + }, + { + title: '매우매우 간단히 설명하는 브라우저의 동작', + content: ( +
+
    +
  1. 사용자가 주소창에 URL을 입력한다
    2. +
  2. 서버에서 HTML을 받아온다
    3. +
  3. + 받아온 HTML을 파싱하면서 렌더링한다 +
    + + 이 과정에서, 필요한 CSS, JS, image 등이 있다면 로드하고 + 수행한다 + +
    4. +
+

개발자 도구로 직접 확인해보기

+
+ ), + }, + { + title: 'HTML이란?', + content: ( +
+

Hyper Text Markup Language

+
+
    +
  • 웹 문서의 구조를 정의하는 언어
    • +
  • 태그를 사용하여 문서의 구조를 정의
    • +
  • 태그는 속성을 가질 수 있음
    • +
+ ', + '', + ' ', + ' ', + ' Document', + ' ', + ' ', + '

Hello, World!

', + ' ', + '', + ]} + language="html" + /> +
+
+ ), + }, + { + title: 'HTML 태그들', + content: ( +
+
+

약 130여 개의 태그가 존재한다

+ + + + 태그 + 의미 + + + + + h1, h2, h3, h4, h5, h6 + + 제목을 나타내는 태그, 숫자가 커질수록 중요도가 낮아짐 + + + + p + 문단을 나타내는 태그 + + + span + 인라인 요소를 그룹화하는 태그 + + + div + 블록 레벨 요소를 그룹화하는 태그 + + + input + 사용자 입력을 받는 태그 + + + script + JavaScript 코드를 포함하는 태그 + + + head + 문서의 메타데이터를 포함하는 태그 + + + body + 문서의 본문 내용을 포함하는 태그 + + + ... + ... + + +
+
+
+

+ 하지만, 이전보다 웹 시멘틱의 중요도가 많이 낮아지고 있음 +

+

+ section, article, header, footer 등은 모두{' '} + 로 퉁쳐지고 있고, +
+ 같은 특수 태그조차도 div 로 + 대체되고 +
+ 같은 태그는 사용되지도 않는 + 추세 +

+

+ 따라서 지금은 head / body / script / meta 등을 제외하면 +
자주 쓰는 태그는 사실상 ,{' '} + , ,{' '} + , 정도 +

+

+ 따라서 여러분은 이 태그들을 모두 공부할 필요는 없지만,{' '} + 왜 공부할 필요가 없는지 반드시 이해해야 + 합니다 +

+
+
+ ), + }, + { + title: 'CSS란?', + content: ( +
+

Cascading Style Sheets

+
+
    +
  • 웹 문서의 스타일을 정의하는 언어
    • +
  • 선택자와 속성을 통해 문서의 구조를 정의
    • +
+ button:not(:disabled):hover {', + ' color: blue;', + ' cursor: not-allowed;', + '}', + ]} + language="css" + /> +
+
+ ), + }, + { + title: 'CSS 속성들', + content: ( +
+
+

얘도 매우 많다

+
+ {[ + 'background-color', + 'color', + 'flex', + 'grid', + 'transform', + 'transition', + 'animation', + 'box-shadow', + 'border-radius', + 'font-size', + 'font-weight', + 'font-family', + 'text-align', + 'text-decoration', + 'line-height', + 'letter-spacing', + 'margin', + 'padding', + 'width', + 'height', + 'position', + 'display', + 'z-index', + 'overflow', + 'opacity', + 'cursor', + 'visibility', + 'border', + 'outline', + 'box-sizing', + 'text-transform', + 'white-space', + 'word-wrap', + 'word-break', + 'vertical-align', + 'list-style', + 'float', + 'clear', + 'content', + 'filter', + 'backdrop-filter', + 'clip-path', + 'mask', + 'pointer-events', + 'user-select', + 'resize', + 'scroll-behavior', + 'object-fit', + 'object-position', + 'perspective', + 'backface-visibility', + 'will-change', + 'columns', + 'column-gap', + 'row-gap', + 'gap', + 'place-items', + 'place-content', + 'align-items', + 'justify-content', + ].map((d) => ( + {d} + ))} + + + ...(훨씬 많음) + +
+
+
+

레거시가 많기도 하고, 쓰는 거만 쓰는 느낌

+

+ CSS는 html과는 다른 이유로, 각 속성이 모두 다르긴 한데 그냥 + 몰라도 되는 느낌이 강하다 +
+ 쓰던 걸로도 충분히 편한데 왜 옛날 것도 달달 외워야 해? +

+

+ 색상 관련: {' '} + +
+ 레이아웃 관련: {' '} + +
+ 크기 관련: + +
+ 여백 관련: + +
+ 텍스트 관련: + {' '} + {' '} + {' '} + +
+ 기타: + {' '} + 등 +

+

+ CSS 는 "이 정도 알면 됐다" 입니다 +

+
+
+ ), + }, + { + title: 'JavaScript란?', + content: ( +
+

JavaScript (이름 잘못 지음)

+
+
    +
  • 웹 문서의 동적인 기능을 담당하는 언어
    • +
  • 이벤트 처리, DOM 조작, 비동기 처리 등
    • +
  • 2010년대 들어서는 백엔드 등 다양한 분야에서도 사용
    • +
+ {', + ' alert("Hello, world!");', + '});', + ]} + language="javascript" + /> +
+
+ ), + }, + { + title: 'JavaScript 기초', + content: ( +
+
+

+ 우리는 TypeScript로 시작할 거고, 그것도 React 에서 자주 쓰는 + TypeScript 문법에 익숙해져야 하는 것이기에 JavaScript를 너무 + 깊게 보진 않겠습니다 +

+

+ 이미 JavaScript 를 할 줄 아시는 분들을 위해 조금 스포하자면, +
+ + 이나 , + , 등 은 거의/아예 사용하지 않습니다 +

+

+ 물론 JavaScript를 잘 하는 것은 프론트엔드 개발자에게 너무나도 + 중요하고 기본적인 소양입니다. 세미나 시간이 너무 짧아서 + 이번에만 포기했을 뿐 +

+
+ + a + b;', + '', + '// 객체 선언', + 'const obj = {', + ' name: "John",', + ' age: 20,', + '};', + '', + '// 배열 선언', + 'const arr = [1, 2, 3];', + '', + '// 조건문', + 'if (a === 1) {', + ' console.log("a is 1");', + '}', + ]} + language="javascript" + /> +
+ ), + }, + { + title: 'TypeScript란?', + content: ( + a + b;`, + ]} + /> + } + /> + ), + }, + { + title: 'TypeScript와 JavaScript의 차이', + content: ( + + person.name;`, + `getName({ nmae: 'Hyunmin' }); // undefined`, + ]} + /> + person.name;`, + `getName({ nmae: 'Hyunmin' }); // Type Error`, + ]} + /> + + } + /> + ), + }, + ]} + /> + ); +};