withai

웹 개발 학습 일지 (Learning Log)

2025-01-03

1. 관심사의 분리 (Separation of Concerns)

오늘 코드를 보면서 가장 먼저 이해한 것은 “관심사의 분리” 원칙입니다. 이는 마치 레고 블록처럼 각각의 부품이 독립적이면서도 서로 조합 가능하게 만드는 방법입니다.

실제 프로젝트에서의 예시

우리 프로젝트에서 page.tsx와 StorySection.tsx가 분리되어 있는 것이 대표적인 예시입니다:

// page.tsx - 데이터 관리를 담당
function Page() {
  const [stories, setStories] = useState([]);
  const [loading, setLoading] = useState(true);

  // 데이터 불러오기 담당
  useEffect(() => {
    loadStories();
  }, []);

  return (
    <main>
      {loading ? (
        <div>로딩 중...</div>
      ) : (
        stories.map(story => <StorySection {...story} />)
      )}
    </main>
  );
}

// StorySection.tsx - UI 표시만 담당
function StorySection({ title, content }) {
  return (
    <section>
      <h1>{title}</h1>
      <div>{content}</div>
    </section>
  );
}

이렇게 분리하면 좋은 점이 있습니다:

데이터 로직 변경시 page.tsx만 수정하면 됨
UI 디자인 변경시 StorySection.tsx만 수정하면 됨
각자 독립적으로 테스트 가능

하지만 단점도 있습니다:

파일이 많아져서 처음에는 복잡해 보일 수 있음
컴포넌트 간 데이터 전달이 복잡해질 수 있음
하나의 기능을 위해 여러 파일을 봐야 할 수도 있음

2. TypeScript와 React의 관계

TypeScript는 JavaScript에 타입을 추가한 언어입니다. React와 함께 사용하면 더 안전한 코드를 작성할 수 있습니다.

파일 확장자의 차이 (.ts vs .tsx)

처음에는 왜 어떤 파일은 .ts고 어떤 파일은 .tsx인지 헷갈렸습니다. 이해한 바로는:

// story.ts - 타입만 정의하는 파일
interface Story {
  title: string;      // 제목은 문자열
  content: string;    // 내용도 문자열
  views?: number;     // 조회수는 선택적으로 있을 수 있고, 있다면 숫자
}

// StorySection.tsx - React 컴포넌트를 포함하는 파일
function StorySection({ title, content, views }: Story) {
  return (
    <div>              {/* JSX 문법 사용 */}
      <h1>{title}</h1>
      <p>{content}</p>
      {views && <span>조회수: {views}</span>}
    </div>
  );
}

.ts는 일종의 설계도이고, .tsx는 실제 건물을 짓는 곳이라고 이해했습니다.

3. React와 JSX의 이해

처음에는 React가 왜 필요한지 이해하기 어려웠습니다. 하지만 실제 코드를 비교해보니 차이가 확실히 보였습니다.

React 없이 UI 만들기

// 매우 복잡하고 이해하기 어려움
const container = document.createElement('div');
const title = document.createElement('h1');
title.textContent = '안녕하세요';
container.appendChild(title);

const content = document.createElement('p');
content.textContent = '반갑습니다';
container.appendChild(content);

// 데이터가 변경되면 수동으로 업데이트 해야 함
function updateUI(newTitle) {
  title.textContent = newTitle;
}

React로 UI 만들기

// 훨씬 직관적이고 이해하기 쉬움
function Greeting() {
  const [title, setTitle] = useState('안녕하세요');
  
  return (
    <div>
      <h1>{title}</h1>
      <p>반갑습니다</p>
    </div>
  );
}

// 데이터가 변경되면 자동으로 UI가 업데이트됨
setTitle('새로운 제목');

이렇게 보니 React를 사용하는 이유를 이해할 수 있었습니다:

코드가 더 읽기 쉽고 직관적임
데이터가 변경되면 자동으로 화면이 업데이트됨
컴포넌트를 재사용하기 쉬움

4. 처음부터 React와 TypeScript?

저는 JavaScript나 HTML의 기초 없이 바로 React와 TypeScript를 배우기 시작했는데, 이게 괜찮은지 걱정이 됐습니다.

하지만 이는 자동차 운전을 배우는 것과 비슷하다는 설명을 듣고 안심했습니다:

옛날에는 수동 변속기로 시작했지만
요즘은 자동 변속기로 시작해도 괜찮듯이
React와 TypeScript로 시작하는 것도 현대적인 접근방식이라고 할 수 있습니다

실제로 이런 장점이 있습니다:

처음부터 현대적인 개발 도구를 사용하게 됨
타입 시스템으로 실수를 줄일 수 있음
풍부한 개발 도구의 도움을 받을 수 있음

물론 기초적인 것들은 나중에 필요할 때 찾아가며 배우면 됩니다.

5. 오늘의 깨달음

모든 것을 한 번에 완벽하게 이해하려고 하지 않아도 됨
실제 프로젝트를 만들어가면서 배우는 게 가장 효과적
처음부터 좋은 도구를 사용하는 것도 괜찮은 선택
코드를 분리하면 복잡해 보이지만 장기적으로는 유지보수가 쉬워짐
기초는 필요할 때 그때그때 찾아가며 배워도 됨

앞으로도 이런 식으로 하나씩 배워가면서, 필요할 때마다 더 깊이 파고들어 공부하면 될 것 같습니다.