[글또 10기 - 3] 백엔드 개발자가 처음해보는 리액트 프론트엔드 개발 - 기본 지식과 사이드바 개발

1. 개발 전 알아둬야할 기본 지식 

a.  프레임워크와 라이브러리

 먼저 자바스크립트와 리액트, next.js의 관계에 대해 짚고 넘어가보자. 언어와 라이브러리와 프레임워크의 관계다. 라이브러리는 특정 문제를 해결하기 위한 기능을 제공하지만, 기능을 제어하는 것은 개발자에게 맡긴다. 프레임워크는 개발자가 해야하는 일의 일부를 대신하거나 개발 패턴을 일부 강제한다. 리액트는 UI를 구축하는데 유용한 기능을 제공하지만, 기능을 사용하는 것은 개발자에게 맡긴다. next.js는 파일 기반 라우팅 시스템, 서버사이드렌더링(SSR), 정적사이트생성(SSG), API 라우트 등을 지원하며, 개발 패턴을 일부 강제화한다. 그렇기에 자바스크립트의 라이브러리인 리액트, 리액트의 프레임워크인 next.js라 하는게 맞다.

 

 

b.  프리프로세서(JSX, TSX)

  리액트는 독특하게 자바스크립트를 변환한 언어를 사용하는데, 그것을 보편적으로 프리프로세서라 부른다. 프리프로세서(Preprocessor)는 소스 코드 컴파일 전 처리하는 프로그램이나 도구를 의미한다. 주로 프로그래밍 언어의 구문이나 기능을 확장하기 위해 사용되며, 다양한 형태의 변환 작업을 수행한다.

 

 JSX(JavaScript XML)는 리액트(React)에서 UI를 정의할 때 주로 사용된다. JSX는 HTML과 유사한 구문을 사용하여 자바스크립트 코드 안에 UI 요소를 작성할 수 있도록 해준다. 파일 확장자는 .jsx다.

JSX는 브라우저에서 직접 실행될 수 없으므로, 바벨(Babel)과 같은 도구를 사용하여 자바스크립트 코드로 변환해야 한다.

TSX는 타입스크립트(TypeScript)와 JSX가 결합된 형태로, 타입스크립트로 작성된 리액트(React) 코드에서 JSX 문법을 사용할 수 있게 해준다. TSX는 타입스크립트의 강력한 타입 지원과 JSX의 편리한 XML 스타일의 UI 선언 방식을 결합했다. 파일 확장자는 .tsx다.

 

 

c.  파일 명명 규칙

컴포넌트 파일의 경우 파스칼케이스(Component.tsx)를 사용한다. 페이지 파일의 경우 스네이크케이스(page.tsx)를 사용한다.

 

 

 

 

 

2.  사이드바 개발하기

Getting Started: Installation | Next.js

 

개발을 시작하면서 Getting started 문서를 그대로 따라했다. latest로 만들다보니, 몇 주에 한 번씩 버전이 새로 바뀌었다. npx create-next-app@latest를 npx create-next-app@13으로 설정하면 next 13버전을 사용한 프로젝트를 만들어준다.

 

설정은 다음과 같다.

npx create-next-app@13

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes
✔ What import alias would you like configured? … @/*

 

이렇게 프로젝트를 설정하면, 다음과 같이 폴더 구조가 생성된다.

Root 폴더
+--- .next
+--- public
+--- src
      \---app
           +---globals.css  # 글로벌 css
           +---layout.tsx   # 전체 레이아웃
           \---page.tsx     # 첫 번째 페이지
+--- .eslintrc.json
+--- .gitignore
+--- next-env.d.ts
+--- next.config.js
+--- package-lock.json
+--- package.json           # 라이브러리 버전(react: ^18,react-dom: ^18, next: 13.5.7)
+--- postcss.config.js
+--- README.md
+--- tailwind.config.ts 
\--- tsconfig.json          # alias 파일

 

 

 

3-1.  사이드바 컴포넌트 만들기

 app 폴더 아래 component 폴더를 만들어준다. 사이드바 컴포넌트를 만들 것이므로 파일명은 Sidebar.tsx로 만들어준다. 아직 실제 페이지를 만들지 않았으므로, 이동하는 주소는 href="#"로 설정해준다.

// ./component/Sidebar.tsx

import Link from 'next/link';
import styles from './Sidebar.module.css';

const Sidebar: React.FC = () => {
  return (
    <div className={styles.sidebar}>
      <ul>
        <li>
          <Link href="#">onestone</Link>
        </li>
        <li>
          <Link href="#">스프링부트</Link>
        </li>
        <li>
          <Link href="#">스프링배치</Link>
        </li>
        <li>
          <Link href="#">코틀린</Link>
        </li>
        <li>
          <Link href="#">그레이들</Link>
        </li>
        <li>
          <Link href="#">깃헙</Link>
        </li>
        <li>
          <Link href="#">스프링 카프카</Link>
        </li>
        <li>
          <Link href="#">용어 사전 및 규칙</Link>
        </li>
      </ul>
    </div>
  );
};

 

사이드바 컴포넌트의 css 만들 것이므로 파일명은 Sidebar.module.css로 만들어준다.

// ./component/Sidebar.module.css

.sidebar {
    width: 250px;
    height: 100vh;
    background-color: #f4f4f4;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  }
  
  .sidebar ul {
    list-style-type: none;
    padding: 0;
  }
  
  .sidebar li {
    margin: 15px 0;
  }
  
  .sidebar a {
    text-decoration: none;
    color: #333;
    transition: color 0.2s;
  }
  
  .sidebar a:hover {
    color: #0070f3;
  }

 

Sidebar.tsx부터 Sidebar.module.css까지 하나씩 뜯어보자.

 

• Link태그는 무엇인가? a태그를 확장한 Link 컴포넌트는 Next.js에서 제공하는 컴포넌트 중 하나다.
• const Sidebar: React.FC에 대한 설명? 자바스크립트가 아닌 타입스크립트를 사용하기 때문에 ": 타입"을 명시한다. React.FC는 React Functional Component의 약자다.
• 왜 css파일에 module 확장자가 붙나? .module.css를 붙여주면, next.js는 css를 모듈로 인식한다. 고유한 클래스명을 만들어 현재 모듈이 적용된 컴포넌트를 CSS의 범위로 지정한다. .module 확장자가 붙지않으면, 전역 css로 인식(ex. global.css)한다. 리액트의 기술명세다. 
• css 모듈을 사용할 때, 고유한 클래스명을 만들어준다고 했다. 그리고 사용 할 때는 {styles.sidebar}이런 식으로 사용했다. 실제 빌드된 결과는 어떻게 나올까? Sidebar_sidebar__CAU70으로 생성되어있다. "컴포넌트명_클래스명__고유코드" 형식으로 next.js가 클래스명을 만들어주는 것을 확인할 수 있다.

 

 

3-2.  사이드바 컴포넌트 붙이기

page.tsx에 Sidebar 컴포넌트를 추가해준다. 

import Sidebar from './component/Sidebar';

export default function Home() {
  return (
    <div>
      <Sidebar />
    </div>
  );
}

 

 

사이드바가 완성됐다.

 

 

 

참고자료:

• https://nextjs.org/docs/pages/api-reference/components/link#reference
• https://nextjs.org/docs/14/app/building-your-application/styling/css-modules