✨ 보강 (#212)

wafflestudio · Nov 20, 2024 · 5d4a9e4 · 5d4a9e4
1 parent 1ab2fdc
commit 5d4a9e4
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 4 deletions.
diff --git a/frontend/lecture/src/lectures/Testing/index.tsx b/frontend/lecture/src/lectures/Testing/index.tsx
@@ -278,12 +278,24 @@ export const testingLecture = getLectureItem({
             </div>
           ),
         },
+        {
+          title: '테스트를 짜면 생기는 장단점들 (4) 테스트 유지보수도 비용이다',
+          content: (
+            <div>
+              <p>기획 변경으로 코드를 바꿨다면 테스트도 맞춰서 바꿔야 한다</p>
+              <p>
+                이때 테스트를 바꾸는 데에 시간이 생각보다 많이 들어가긴 합니다
+              </p>
+              <p>테스트도 코드이므로, 잘 짜서 유지보수 비용을 낮춰야 합니다</p>
+            </div>
+          ),
+        },
         {
           title:
             '프론트엔드에서의 또 다른 테스트 방법: 브라우저를 돌리는 테스트',
           content: (
-            <div>
-              <p>지금까지 알아본 건 자바스크립트 함수만 테스트할 수 있다</p>
+            <div className="flex flex-col gap-8">
+              <p>지금까지 알아본 건 자바스크립트 함수만 테스트할 수 있습니다</p>
               <p>
                 프론트엔드가 만드는건 웹 어플리케이션인데, 이건 어떻게
                 테스트하지?
@@ -302,7 +314,7 @@ export const testingLecture = getLectureItem({
                 label="이때의 테스트코드"
               />
               <p>
-                작년 세미나에서는 이걸 다뤘었는데, 이번에는 그냥 이런 게 있다~
+                작년 세미나에서는 이것도 다뤘었는데, 이번에는 그냥 이런 게 있다~
                 정도만 알고 넘어갑시다
               </p>
             </div>
@@ -320,14 +332,18 @@ export const testingLecture = getLectureItem({
         {
           title: '프론트엔드의 테스트 문화',
           content: (
-            <div>
+            <div className="flex flex-col gap-4">
               <p>
                 Input이 너무 많고, Output도 너무 많고, 그에 비해 로직은 적다
               </p>
               <p>
                 로직이 복잡하고 input/output이 간단해야 테스트를 짜는 효과가
                 확실한데, 프론트 (클라이언트도 마찬가지) 는 보통 반대입니다
               </p>
+              <p>
+                그런 면에서 2048은 다소 예외적으로 프론트 로직이 복잡하고
+                input/output 은 간단해서 테스트를 짜기 쉬운 케이스
+              </p>
               <p>
                 그래서 현재 프론트엔드에서 테스트는 <i>하면 좋긴 한데...</i>의
                 온도감입니다.

diff --git a/frontend/lecture/src/lectures/WrapUp/index.tsx b/frontend/lecture/src/lectures/WrapUp/index.tsx
@@ -1,6 +1,7 @@
 import { ExternalLink } from '@/components/ExternalLink';
 import { Slides } from '@/components/Slides';
 import { StackBadge } from '@/components/StackBadge';
+import { Separator } from '@/designsystem/ui/separator';
 import { getLectureItem } from '@/lectures';
 
 export const wrapupLecture = getLectureItem({
@@ -23,6 +24,10 @@ export const wrapupLecture = getLectureItem({
                 개발환경, 웹, 리액트, 비동기, TypeScript, CSS, 클린코드,
                 아키텍처, 상태관리, 라우팅, 성능, 인프라, 테스트
               </p>
+              <p>
+                이번 챕터에서는 챕터로 빼기는 애매해서 넘어갔었던 조그만 주제들
+                몇 개 다루고, 합불 다루고 끝내겠습니다
+              </p>
             </div>
           ),
         },
@@ -40,6 +45,11 @@ export const wrapupLecture = getLectureItem({
                 도 도입해 보시고, <StackBadge stack="Tanstack Query" /> 도 써
                 보시고, ... 이렇게 하나하나씩 쌓아나가시는 걸 추천드립니다
               </p>
+              <p>
+                기술스택 사용법을 많이 아는 건 별로 의미 없습니다. 아는 것보다는
+                빠르게 공부해서 적용할 수 있는 능력이 있어야 하고, 각 기술이
+                가진 컨셉과 의미를 이해할 수 있어야 합니다.
+              </p>
               <p>
                 그리고 언제나 중요한 기초: 가령 JavaScript 의 실행 컨텍스트 같은
                 개념들도 세미나에서 다루기엔 너무 재미없어서 건너뛰었을 뿐
@@ -86,6 +96,80 @@ export const wrapupLecture = getLectureItem({
             </div>
           ),
         },
+        {
+          title: '개발 환경에 유창해지기',
+          content: (
+            <div className="flex flex-col gap-4">
+              <p>개발 환경은 생산성에 정말 많은 영향을 주고, 정말 중요합니다</p>
+              <p>본인이 쓰고 있는 에디터에 유창해야 합니다</p>
+              <p>터미널에 익숙해지는 것도 매우 중요합니다</p>
+            </div>
+          ),
+        },
+        {
+          title: '웹뷰와 어드민 (1) 어드민',
+          content: (
+            <div className="flex flex-col gap-4">
+              <p>
+                모바일의 시대이므로 B2C에서 웹서비스를 쓰는 사람이 많이
+                줄었습니다 (사람들이 컴퓨터보다 핸드폰을 많이 한다)
+              </p>
+              <p>
+                그래서 PC 웹 개발은 보통 어드민이나 내부 인원들을 위한 관리
+                사이트, 또는 (우리는 잘 모르는) B2B 제품 같은 걸 종종 개발하게
+                됩니다
+              </p>
+              <img src="https://images.wondershare.com/mockitt/tips/simple-design.jpg" />
+            </div>
+          ),
+        },
+        {
+          title: '웹뷰와 어드민 (2) 웹뷰',
+          content: (
+            <div className="flex flex-col gap-6">
+              <p>
+                그리고 모바일의 시대에서 의외로 프론트 개발을 많이 하게
+                되었는데, 웹뷰입니다
+              </p>
+              <p>
+                웹뷰: 네이티브 앱에서 기능을 웹으로 띄워둔 것. 네이티브는
+                웹사이트를 띄워두기만 하고, 실제 기능은 웹에 다 존재하는 방식
+              </p>
+              <p>
+                스누티티 강의평도 웹뷰로 되어 있고, 우리가 했던 스누티티
+                클론코딩도 웹뷰 개발의 형태입니다.
+              </p>
+              <Separator />
+              <p>왜 웹뷰를 쓸까요?</p>
+              <ul className="flex list-disc flex-col gap-4 pl-6">
+                <li>필요한 개발자 수가 절반입니다 (인건비)</li>
+                <li>만들어지는 제품 수가 절반입니다 (QA 및 관리비용)</li>
+                <li>배포 시점이 자유롭습니다 (스토어 심사 안받아도됨)</li>
+                <li>골칫덩이인 구버전 클라이언트가 남지 않습니다</li>
+              </ul>
+            </div>
+          ),
+        },
+        {
+          title: '웹뷰와 어드민 (3) RN',
+          content: (
+            <div className="flex flex-col gap-6">
+              <p>
+                마지막으로 웹뷰랑 비슷한 느낌인데 최근 React Native 가 조금 뜨고
+                있습니다
+              </p>
+              <p>
+                React Native 를 활용하면 웹뷰에서는 구현 못하는 권한이나
+                이것저것 관련 기능들도 구현할 수 있어서 조금 더 이점이 있고,
+                애니메이션도 좀더 이쁩니다
+              </p>
+              <p>
+                다만 아직도 1버전이 안 나왔고, 커뮤니티가 관리하고 있어서 발전
+                속도가 빠르진 않습니다
+              </p>
+            </div>
+          ),
+        },
         {
           title: '마지막 과제 grace day 관련',
           content: (