📢 프로젝트 공지
저희팀이 진행하게 될 "통증 관리 시스템" 공지에 나온 사전 정보에 대하여 정리하였습니다.
이는 프로젝트 전 사전에 숙지하면 좋을 내용이라 생각하여 이를 정리하였습니다.
TS (TypeScript)
타입스크립트(TypeScript)는 JavaScript를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. 컴파일을 통해 일반 JavaScript로 변환되며, 에러가 발생할 것 같은 코드를 감지하면 컴파일 되지 않습니다.
정적타입언어는 컴파일 시 변수의 타입이 결정되는 언어로 변수의 타입을 미리 지정을 해줘야합니다.
let a : number = 1
let b : string = "1"
let c : boolean = true
let d : number[] = [1,2,3]
let e : {name: stirng, age?: number} = {name="kks"}
//Type Aliases를 사용하여 객체 타입뿐만 아니라 모든 타입에 이름을 지정할 수 있습니다.
type Point = {x:number, y?:number}
//함수를 통해 return하는 값들에게 Type을 지정할 수 있습니다.
function gamePoint = (x:number) : Point => {return {x}}
//Tuple은 정해진 개수와 순서에 따라 배열을 선언할 수 있습니다.
const player : [string, number, boolean] = ["player", 20, true]
//any는 타입체크를 비활성화 시킵니다.
const a : any[] =[1,2,3,4]
//void는 아무것도 return하지 않는 함수를 대상으로 사용합니다.
functuon hello() : void {
console.log("hello")
}Vite
모듈번들러 중 하나 비트(vite)는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구입니다.
모듈번들러란 JavaScript 모듈(JavaScript modules)을 브라우저에서 실행할 수 있는 단일 JavaScript 파일로 묶는 데 사용되는 도구입니다.
기존에 많이 사용하던 웹펙(webpack)과 달리 비트는 esbuild 빌드 도구와 ESM 방식을 사용하여 빠른 빌드 속도를 자랑합니다.
esbuild는 기존 번들러와 달리 JavaScript가 아닌 go언어로 작성이 되어 스크립트기반의 JavaScript가 아닌 native의 기능을 사용하여 훨씬 더 빠른 빌드 작업이 가능합니다.
ESM은 모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미합니다.
Tailwind CSS
Tailwind CSS는 Utility-First(미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링) CSS 프레임워크입니다.
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<blockquote>
<p class="text-lg font-medium">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-sky-500 dark:text-sky-400">
Sarah Dayan
</div>
<div class="text-slate-700 dark:text-slate-500">
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>Utility-First 덕에 매우 쉽고 빠르게 원하는 디자인을 개발할 수 있게 되며, css파일이 따로 분리되어 있지 않아 별도로 관리할 필요가 없습니다. 또한 클래스 네이밍에 대한 고민도 할 필요가 없고 쉽고 자유로운 커스텀이 가능합니다.
SWR
"SWR"이라는 이름은 HTTP RFC 5861(opens in a new tab)에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다.
즉, 백그라운드에서 캐시를 재검증(revalidate)하는 동안에 기존에 캐시된 데이터(stale; 탁한, 지루한)를 사용하게 한다는 것입니다. 이는 에러를 반환하더라도 캐시된 데이터를 활용할 수 있게 함으로써 데이터를 계속 호출하는데 시간을 쓰지 않고, 캐시된 데이터를 이용해 효율적으로 동작합니다.
import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then(res => res.json());
function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (isLoading) return <div>loading...</div>
return <div>hello {data.name}!</div>
}📝 후기
프로젝트에 앞서 사용하게 될 라이브러리가 공지되었습니다. 사전 강의에서 배우지 않은 라이브러리들이 많아 정리 및 팀원들과 공유하고자 작성하였습니다. 라이브러리마다 상세하게 설명할 내용들이 많지만 먼저 기본 개념을 먼저 공유하고자 간단히 작성하였습니다. 프로젝트를 진행하면서 더욱 상세히 라이브러리에 배우고 정리할 생각입니다.
🧾 Reference
- https://www.typescriptlang.org/
- https://yozm.wishket.com/magazine/detail/1620/
- https://velog.io/@merorii/vite%EB%9E%80-%EB%B9%A0%EB%A5%B8-%EB%B9%8C%EB%93%9C%EB%A5%BC-%EC%9B%90%ED%95%9C%EB%8B%A4%EB%A9%B4
- https://velog.io/@woodong/1.-Tailwind-CSS%EB%9E%80
- https://swr.vercel.app/ko
- https://velog.io/@soryeongk/ReactSWRTutorial
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
잘봤습니다!