Frontend

본 사이트는 React와 Typescript를 활용하여 인터페이스를 구축하고, Tailwind CSS로 스타일링을 하였으며 Next.js 프레임워크로 통합하여 Vercel을 통해 배포하였습니다.

React

컴포넌트 기반으로 재사용 가능한 UI를 쉽게 만들 수 있으며, 상태 변화를 통해 사용자와의 상호작용을 직관적이고 우아하게 구현함으로써 복잡한 UI도 간편하게 다룰 수 있습니다.

Component-based

Independent and Reusable

UI를 독립적이고 재사용 가능한 컴포넌트로 나누어 개발하며, 각 컴포넌트는 자체 로직과 스타일을 갖고 복잡한 UI를 구성합니다. 이 구조는 코드 재사용성과 유지보수를 쉽게 하고, 개발 효율성을 높입니다.

내 동영상

영상 설명

function Video({ video }) {
  return (
    <div>
      <Thumbnail video={video} />
      <a href={video.url}>
        <h3>{video.title}</h3>
        <p>{video.description}</p>
      </a>
      <LikeButton video={video} />
    </div>
  )
}

Interactivity

Intuitive and Elegant Interaction

사용자의 액션을 통해서 이벤트가 발생하고, 이를 통해 컴포넌트의 상태가 업데이트 됩니다. 상태가 변경되면 React가 자동으로 감지하여 관련된 UI 부분을 적절히 재랜더링합니다.

비디오

영상 5개

소피 알퍼트와 댄 아브라모프 (2018)

서버 구성 요소 소개

댄 아브라모프와 로렌 탠 (2020)

import { useState } from 'react';
 
function SearchableVideoList({ videos }) {
  const [searchText, setSearchText] = useState('');
  const foundVideos = filterVideos(videos, searchText);
  return (
    <>
      <SearchInput
        value={searchText}
        onChange={newText => setSearchText(newText)} />
      <VideoList
        videos={foundVideos}
        emptyHeading={`No matches for “${searchText}”`} />
    </>
  );
}

Tailwind CSS

Tailwind CSS는 빠른 개발 속도와 높은 유연성을 제공합니다. 반응형 디자인을 손쉽게 구현할 수 있으며, 유지보수가 용이합니다.

Faster Development

Convenience and Rapid Development

재사용 가능한 유틸리티 클래스를 제공하여 빠른 디자인 적용이 가능하고, 미리 정의된 클래스를 활용함으로써 개발 시간을 단축하고 프로젝트의 속도를 높입니다.

Mobile-first

Responsive everything

모바일 퍼스트 접근 방식을 기반으로, 미디어 쿼리를 사용하여 태블릿, 데스크톱 등 더 큰 화면에 대한 스타일을 추가적으로 적용할 수 있습니다.

Typescript

정적 타이핑 기능을 통해 타입 오류를 손쉽게 발견하고 해결할 수 있으며, 기존 JavaScript 코드와의 완벽한 호환성으로 마이그레이션을 간편하게 할 수 있습니다.

Static Typing

Enhancing Code Precision

정적 타이핑은 코드 작성 시 변수나 함수의 타입을 명시적으로 지정합니다. 이를 통해 개발 중 타입 관련 오류를 쉽게 발견하고 수정할 수 있습니다. 이런 특징은 코드의 안정성과 가독성을 높이는 데 기여합니다.

정적 타입 언어는 타입을 명시적으로 선언하며, 타입이 결정된 후에는 타입을 변경할 수 없다. 잘못된 타입의 값이 할당 또는 반환되면 컴파일러는 이를 감지해 에러를 발생시킨다.

let foo: string,   // 문자열 타입
    bar: number,   // 숫자 타입
    baz: boolean;  // 불리언 타입
 
foo = 'Hello';
bar = 123;
baz = 'true'; // error: Type '"true"' is not assignable to type 'boolean'.

정적 타이핑은 변수는 물론 함수의 매개변수와 반환값에도 사용할 수 있다.

function add(x: number, y: number): number {
  return x + y;
}
 
console.log(add(10, 10)); // 20
console.log(add('10', '10'));
// error TS2345: Argument of type '"10"' is not assignable to parameter of type 'number'.