Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ 보강 #212

Merged
merged 1 commit into from
Nov 20, 2024
Merged

✨ 보강 #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions frontend/lecture/src/lectures/Testing/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
프론트엔드가 만드는건 웹 어플리케이션인데, 이건 어떻게
테스트하지?
Expand All @@ -302,7 +314,7 @@ export const testingLecture = getLectureItem({
label="이때의 테스트코드"
/>
<p>
작년 세미나에서는 이걸 다뤘었는데, 이번에는 그냥 이런 게 있다~
작년 세미나에서는 이것도 다뤘었는데, 이번에는 그냥 이런 게 있다~
정도만 알고 넘어갑시다
</p>
</div>
Expand All @@ -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>의
온도감입니다.
Expand Down
84 changes: 84 additions & 0 deletions frontend/lecture/src/lectures/WrapUp/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -23,6 +24,10 @@ export const wrapupLecture = getLectureItem({
개발환경, 웹, 리액트, 비동기, TypeScript, CSS, 클린코드,
아키텍처, 상태관리, 라우팅, 성능, 인프라, 테스트
</p>
<p>
이번 챕터에서는 챕터로 빼기는 애매해서 넘어갔었던 조그만 주제들
몇 개 다루고, 합불 다루고 끝내겠습니다
</p>
</div>
),
},
Expand All @@ -40,6 +45,11 @@ export const wrapupLecture = getLectureItem({
도 도입해 보시고, <StackBadge stack="Tanstack Query" /> 도 써
보시고, ... 이렇게 하나하나씩 쌓아나가시는 걸 추천드립니다
</p>
<p>
기술스택 사용법을 많이 아는 건 별로 의미 없습니다. 아는 것보다는
빠르게 공부해서 적용할 수 있는 능력이 있어야 하고, 각 기술이
가진 컨셉과 의미를 이해할 수 있어야 합니다.
</p>
<p>
그리고 언제나 중요한 기초: 가령 JavaScript 의 실행 컨텍스트 같은
개념들도 세미나에서 다루기엔 너무 재미없어서 건너뛰었을 뿐
Expand Down Expand Up @@ -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: (
Expand Down
Loading