From 5d4a9e40350177aada951faa458ab22ab5394bef Mon Sep 17 00:00:00 2001 From: "Hyunmin Woo (Hanul)" Date: Wed, 20 Nov 2024 13:32:39 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=EB=B3=B4=EA=B0=95=20(#212)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lecture/src/lectures/Testing/index.tsx | 24 +++++- .../lecture/src/lectures/WrapUp/index.tsx | 84 +++++++++++++++++++ 2 files changed, 104 insertions(+), 4 deletions(-) diff --git a/frontend/lecture/src/lectures/Testing/index.tsx b/frontend/lecture/src/lectures/Testing/index.tsx index 25783e3..8d44b3c 100644 --- a/frontend/lecture/src/lectures/Testing/index.tsx +++ b/frontend/lecture/src/lectures/Testing/index.tsx @@ -278,12 +278,24 @@ export const testingLecture = getLectureItem({ ), }, + { + title: '테스트를 짜면 생기는 장단점들 (4) 테스트 유지보수도 비용이다', + content: ( +
+

기획 변경으로 코드를 바꿨다면 테스트도 맞춰서 바꿔야 한다

+

+ 이때 테스트를 바꾸는 데에 시간이 생각보다 많이 들어가긴 합니다 +

+

테스트도 코드이므로, 잘 짜서 유지보수 비용을 낮춰야 합니다

+
+ ), + }, { title: '프론트엔드에서의 또 다른 테스트 방법: 브라우저를 돌리는 테스트', content: ( -
-

지금까지 알아본 건 자바스크립트 함수만 테스트할 수 있다

+
+

지금까지 알아본 건 자바스크립트 함수만 테스트할 수 있습니다

프론트엔드가 만드는건 웹 어플리케이션인데, 이건 어떻게 테스트하지? @@ -302,7 +314,7 @@ export const testingLecture = getLectureItem({ label="이때의 테스트코드" />

- 작년 세미나에서는 이걸 다뤘었는데, 이번에는 그냥 이런 게 있다~ + 작년 세미나에서는 이것도 다뤘었는데, 이번에는 그냥 이런 게 있다~ 정도만 알고 넘어갑시다

@@ -320,7 +332,7 @@ export const testingLecture = getLectureItem({ { title: '프론트엔드의 테스트 문화', content: ( -
+

Input이 너무 많고, Output도 너무 많고, 그에 비해 로직은 적다

@@ -328,6 +340,10 @@ export const testingLecture = getLectureItem({ 로직이 복잡하고 input/output이 간단해야 테스트를 짜는 효과가 확실한데, 프론트 (클라이언트도 마찬가지) 는 보통 반대입니다

+

+ 그런 면에서 2048은 다소 예외적으로 프론트 로직이 복잡하고 + input/output 은 간단해서 테스트를 짜기 쉬운 케이스 +

그래서 현재 프론트엔드에서 테스트는 하면 좋긴 한데...의 온도감입니다. diff --git a/frontend/lecture/src/lectures/WrapUp/index.tsx b/frontend/lecture/src/lectures/WrapUp/index.tsx index a71cad0..f748980 100644 --- 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, 클린코드, 아키텍처, 상태관리, 라우팅, 성능, 인프라, 테스트

+

+ 이번 챕터에서는 챕터로 빼기는 애매해서 넘어갔었던 조그만 주제들 + 몇 개 다루고, 합불 다루고 끝내겠습니다 +

), }, @@ -40,6 +45,11 @@ export const wrapupLecture = getLectureItem({ 도 도입해 보시고, 도 써 보시고, ... 이렇게 하나하나씩 쌓아나가시는 걸 추천드립니다

+

+ 기술스택 사용법을 많이 아는 건 별로 의미 없습니다. 아는 것보다는 + 빠르게 공부해서 적용할 수 있는 능력이 있어야 하고, 각 기술이 + 가진 컨셉과 의미를 이해할 수 있어야 합니다. +

그리고 언제나 중요한 기초: 가령 JavaScript 의 실행 컨텍스트 같은 개념들도 세미나에서 다루기엔 너무 재미없어서 건너뛰었을 뿐 @@ -86,6 +96,80 @@ export const wrapupLecture = getLectureItem({

), }, + { + title: '개발 환경에 유창해지기', + content: ( +
+

개발 환경은 생산성에 정말 많은 영향을 주고, 정말 중요합니다

+

본인이 쓰고 있는 에디터에 유창해야 합니다

+

터미널에 익숙해지는 것도 매우 중요합니다

+
+ ), + }, + { + title: '웹뷰와 어드민 (1) 어드민', + content: ( +
+

+ 모바일의 시대이므로 B2C에서 웹서비스를 쓰는 사람이 많이 + 줄었습니다 (사람들이 컴퓨터보다 핸드폰을 많이 한다) +

+

+ 그래서 PC 웹 개발은 보통 어드민이나 내부 인원들을 위한 관리 + 사이트, 또는 (우리는 잘 모르는) B2B 제품 같은 걸 종종 개발하게 + 됩니다 +

+ +
+ ), + }, + { + title: '웹뷰와 어드민 (2) 웹뷰', + content: ( +
+

+ 그리고 모바일의 시대에서 의외로 프론트 개발을 많이 하게 + 되었는데, 웹뷰입니다 +

+

+ 웹뷰: 네이티브 앱에서 기능을 웹으로 띄워둔 것. 네이티브는 + 웹사이트를 띄워두기만 하고, 실제 기능은 웹에 다 존재하는 방식 +

+

+ 스누티티 강의평도 웹뷰로 되어 있고, 우리가 했던 스누티티 + 클론코딩도 웹뷰 개발의 형태입니다. +

+ +

왜 웹뷰를 쓸까요?

+
    +
  • 필요한 개발자 수가 절반입니다 (인건비)
    • +
  • 만들어지는 제품 수가 절반입니다 (QA 및 관리비용)
    • +
  • 배포 시점이 자유롭습니다 (스토어 심사 안받아도됨)
    • +
  • 골칫덩이인 구버전 클라이언트가 남지 않습니다
    • +
+
+ ), + }, + { + title: '웹뷰와 어드민 (3) RN', + content: ( +
+

+ 마지막으로 웹뷰랑 비슷한 느낌인데 최근 React Native 가 조금 뜨고 + 있습니다 +

+

+ React Native 를 활용하면 웹뷰에서는 구현 못하는 권한이나 + 이것저것 관련 기능들도 구현할 수 있어서 조금 더 이점이 있고, + 애니메이션도 좀더 이쁩니다 +

+

+ 다만 아직도 1버전이 안 나왔고, 커뮤니티가 관리하고 있어서 발전 + 속도가 빠르진 않습니다 +

+
+ ), + }, { title: '마지막 과제 grace day 관련', content: (