이번 글에서는 React에서 CSS의 기본 동작 방식을 이해하고, 이를 컴포넌트 단위로 제한하는 방법을 소개합니다.

React에서 CSS의 기본 동작

React에서 CSS 파일을 import하면, 해당 CSS는 애플리케이션 전체에 영향을 미칩니다. 즉, 특정 컴포넌트에만 적용하고 싶어도 동일한 클래스 이름이 다른 컴포넌트에도 영향을 줄 수 있습니다.

예제: CSS의 글로벌 범위 문제

/* styles.css */
.title {
    color: red;
}

// App.js
import './styles.css';

const App = () => {
    return <h1 className="title">Hello</h1>;
};

이 경우, className="title"을 사용하는 다른 컴포넌트에도 color: red;가 적용됩니다. React는 기본적으로 CSS의 범위를 특정 컴포넌트로 자동 제한하지 않습니다.

CSS의 글로벌 문제를 해결하는 방법

React에서 CSS 범위를 컴포넌트 단위로 제한하거나 관리하기 위한 몇 가지 전략이 있습니다.

1. CSS 모듈 (CSS Modules)

CSS 모듈은 클래스 이름을 고유하게 만들어 CSS 충돌 문제를 방지합니다. 파일 이름에 .module.css를 붙여 사용하며, React는 클래스 이름을 고유한 해시 값으로 변환합니다.

사용 방법

1. CSS 파일 이름을 파일명.module.css로 작성합니다.
2. 해당 CSS 파일을 import합니다.
3. 클래스 이름을 객체처럼 사용합니다.

/* styles.module.css */
.title {
    color: blue;
}

import styles from './styles.module.css';

const App = () => {
    return <h1 className={styles.title}>Hello</h1>;
};

결과

className이 자동으로 고유한 이름으로 변환됩니다:

<h1 class="title__abc123">Hello</h1>

2. CSS-in-JS와 Styled-Components

CSS-in-JS는 CSS를 JavaScript 코드 내부에 작성하는 방식입니다.
이 방식은 스타일이 특정 컴포넌트에 국한되며, JavaScript 로직과 스타일을 같은 파일에서 관리할 수 있습니다. 가장 인기 있는 라이브러리로 styled-components가 있습니다.

사용 방법

1. styled-components 라이브러리를 설치합니다.

   npm install styled-components

2. 스타일을 정의한 뒤 컴포넌트처럼 사용합니다.

   import styled from 'styled-components';
   
   const Title = styled.h1`
       color: green;
   `;
   
   const App = () => {
       return <Title>Hello</Title>;
   };

결과

<Title>이라는 React 컴포넌트는 고유한 클래스 이름을 가진 DOM 요소로 렌더링됩니다:

<h1 class="Title__xyz456">Hello</h1>

3. SCSS (SASS)와 네이밍 규칙

SCSS(SASS)는 기존 CSS를 확장한 스타일 언어로, 중첩 규칙과 변수를 지원하여 더 구조적인 CSS 작성이 가능합니다.

사용 방법

1. SCSS 파일을 작성합니다.

   /* styles.scss */
   .App {
       .title {
           color: purple;
       }
   }

2. 해당 SCSS 파일을 import합니다.

   import './styles.scss';
   
   const App = () => {
       return (
           <div className="App">
               <h1 className="title">Hello</h1>
           </div>
       );
   };

결과

CSS 클래스는 명확한 네이밍 규칙을 따라 다른 컴포넌트와 충돌하지 않습니다:

<div class="App">
    <h1 class="title">Hello</h1>
</div>

어떤 방법을 선택해야 할까?

간단한 프로젝트

• CSS 모듈: 설정이 간단하며, 컴포넌트 단위로 스타일을 분리할 수 있습니다.

복잡한 스타일 관리

• Styled-Components: JavaScript 코드와 스타일을 통합해서 작성할 수 있어 유지보수가 쉽습니다.
• SCSS(SASS): 변수와 중첩 구조를 통해 복잡한 스타일을 관리하기 좋습니다.

결론

React에서는 기본적으로 CSS가 글로벌 범위로 적용됩니다.
이 문제를 해결하려면 CSS 모듈, Styled-Components, 또는 SCSS와 같은 도구를 활용해 스타일을 컴포넌트 단위로 관리하는 것이 중요합니다.

요약

1. CSS 모듈로 클래스를 고유하게 만들어 충돌을 방지.
2. Styled-Components로 JavaScript 내부에서 스타일 작성.
3. SCSS를 사용해 구조화된 CSS 관리.

이제 React에서 CSS를 관리할 때 발생하는 문제를 해결하고, 더 깔끔하고 효율적인 스타일링을 구현해 보세요!

컴포넌트란?

React 컴포넌트는 함수 또는 클래스를 통해 정의할 수 있습니다. 하지만 최신 React에서는 함수형 컴포넌트를 주로 사용합니다.
React 컴포넌트는 반드시 JSX 또는 React.createElement를 반환해야 합니다. 반환된 내용은 브라우저 화면에 렌더링됩니다.

React 컴포넌트를 만드는 세 가지 방법

React에서 함수형 컴포넌트를 정의하는 방법은 크게 세 가지입니다:

1. function 키워드 사용

전통적인 함수 선언 방식을 사용해 컴포넌트를 작성합니다.
이 방식은 ES5 이전부터 사용되어 익숙한 형태입니다.

예제:

function MyComponent() {
    return <h1>Hello from MyComponent</h1>;
}

특징:

• 문법이 간단하고 직관적입니다.
• 컴포넌트 이름은 대문자로 시작해야 React가 HTML 태그와 구분합니다.
• 최신 React에서는 function 키워드 대신 다른 방식이 더 많이 사용됩니다.

2. 함수 표현식

함수를 변수에 할당하는 방식으로 컴포넌트를 정의할 수 있습니다.
이는 함수 선언과 동일하게 동작하지만, 변수 스코프와 관련된 장점이 있습니다.

예제:

const MyComponent = function() {
    return <h1>Hello from MyComponent</h1>;
};

특징:

• 컴포넌트를 변수에 할당해 코드 구조를 명확히 관리할 수 있습니다.
• 최신 React에서는 이 방식보다는 화살표 함수가 더 자주 사용됩니다.

3. 화살표 함수

React에서 가장 선호되는 방식은 화살표 함수를 사용하는 것입니다.
화살표 함수는 ES6(ECMAScript 2015)에서 도입된 간결한 함수 표현법으로, 작성 방식이 짧고 코드 가독성이 높습니다.

예제:

const MyComponent = () => {
    return <h1>Hello from MyComponent</h1>;
};

또는, 한 줄로 작성할 수 있는 경우 중괄호와 return을 생략할 수 있습니다:

const MyComponent = () => <h1>Hello from MyComponent</h1>;

특징:

• 최신 React에서 권장되는 방식입니다.
• 코드가 간결하고, 특히 this 바인딩 문제를 신경 쓰지 않아도 됩니다.
• React Hooks와 함께 사용하기 적합합니다.

최신 React에서 권장되는 방식

React는 클래스형 컴포넌트보다 함수형 컴포넌트를 권장합니다.
함수형 컴포넌트는 작성하기 더 간단하고 성능도 더 효율적입니다. 특히, React Hooks를 사용하면 클래스형 컴포넌트에서만 가능했던 상태 관리와 라이프사이클 기능을 함수형 컴포넌트에서도 구현할 수 있습니다.

요약

React 컴포넌트를 만드는 세 가지 방법을 정리하면:

1. function 키워드를 사용하는 전통적인 방식.
2. 함수 표현식을 사용하는 방식.
3. 화살표 함수를 사용하는 최신 방식.

권장: 화살표 함수를 사용한 함수형 컴포넌트 작성

• 코드가 더 간결하고 최신 React의 기능과 더 잘 맞습니다.
• 유지보수와 협업이 쉬워집니다.

이제 React 컴포넌트를 작성할 때 어떤 방식을 선택할지 고민하지 않아도 되겠죠? 가장 적합한 방식을 선택해 사용해 보세요!

class vs className

HTML에서 요소에 CSS 클래스를 적용할 때는 class 속성을 사용합니다.

<div class="my-class">Hello, World!</div>

하지만, React에서는 class 대신 className을 사용해야 합니다:

<div className="my-class">Hello, World!</div>

이유는 무엇일까?

JavaScript에서는 class가 예약어로 사용되기 때문에, React는 이를 피하기 위해 className이라는 대체 속성을 사용합니다.
className을 통해 CSS 스타일링은 그대로 적용되면서도 JavaScript 코드와 충돌을 방지할 수 있습니다.

className 사용 방법

React에서 className을 사용하는 방법은 HTML과 매우 유사합니다.
다만, JavaScript 표현식과 결합하거나 동적으로 클래스를 변경할 수 있다는 점이 특징입니다.

예제 1: 기본 사용법

const App = () => {
    return <div className="container">Hello, React!</div>;
};

예제 2: 여러 클래스 적용

여러 클래스를 적용할 때는 공백으로 구분합니다.

const App = () => {
    return <div className="container primary">Hello, React!</div>;
};

예제 3: 동적 클래스 적용

JavaScript 표현식을 활용해 조건에 따라 클래스를 동적으로 설정할 수 있습니다.

const App = ({ isActive }) => {
    return (
        <div className={isActive ? "container active" : "container"}>
            Hello, React!
        </div>
    );
};

className과 JavaScript 연동

React의 className 속성은 JavaScript와 연동해 동적으로 스타일을 제어할 때 유용합니다. 특히, 여러 클래스를 조합할 때 템플릿 리터럴이나 라이브러리를 활용할 수 있습니다.

예제: 템플릿 리터럴

const App = ({ theme }) => {
    return <div className={`container ${theme}`}>Hello, React!</div>;
};

예제: classnames 라이브러리 사용

classnames 라이브러리는 조건부 클래스 적용을 더 간단히 도와줍니다.

npm install classnames

import classNames from "classnames";

const App = ({ isActive, theme }) => {
    const containerClass = classNames("container", {
        active: isActive,
        [theme]: theme,
    });

    return <div className={containerClass}>Hello, React!</div>;
};

결론

React에서 className은 HTML의 class 속성을 대체하는 필수적인 개념입니다.
다음과 같은 점을 기억하세요:

1. React에서는 class 대신 className을 사용해야 합니다.
2. JavaScript와 연동하여 동적으로 클래스를 설정할 수 있습니다.
3. classnames와 같은 라이브러리를 활용하면 더 간결하게 조건부 클래스를 관리할 수 있습니다.

이제 React에서 className을 활용해 스타일링을 적용해 보세요!

1. 함수형 컴포넌트(Function Component)

• 간단한 JavaScript 함수로 작성합니다.

• JSX(HTML처럼 보이는 코드)를 반환합니다.

• 최신 React에서는 이 방식을 권장하고 사용합니다.

  예제:

  const MyComponent = () => {
    return <h1>Hello, React!</h1>;
  };

2. 클래스형 컴포넌트(Class Component)

• React.Component를 확장한 JavaScript 클래스를 사용합니다.

• render()라는 메서드 안에서 JSX를 반환합니다.

• 과거에 많이 사용되었지만, 최신 React에서는 거의 사용하지 않습니다.

  예제:

  class MyComponent extends React.Component {
    render() {
        return <h1>Hello, React!</h1>;
    }
  }

클래스형 컴포넌트: 왜 중요한가?

클래스형 컴포넌트는 React 초창기부터 사용된 방식이에요. render() 메서드 안에 JSX를 반환해야 한다는 규칙이 있어요.
작성한 코드 예제를 보면 이런 구조입니다:

class App extends React.Component {
    render() {
        return (
            <h1 title="This works!">
                Hi, <span>this</span> is ReactJS!
            </h1>
        );
    }
}

export default App;

이 코드를 분석해 보면:

• class App extends React.Component: App이라는 클래스는 React 컴포넌트를 확장한 것입니다. 즉, React에서 제공하는 기능을 사용할 수 있게 됩니다.
• render() 메서드: 이 메서드는 React가 컴포넌트를 화면에 렌더링할 때 호출됩니다. 여기서 반환하는 내용(JSX)이 실제로 브라우저 화면에 표시됩니다.
• JSX 코드: <h1> 태그와 그 안의 내용이 반환됩니다. React는 이 JSX를 HTML로 변환해서 DOM에 렌더링합니다.

최신 React에서는 함수형 컴포넌트를 사용

React는 더 간단하고 성능이 좋은 함수형 컴포넌트를 권장합니다. 이유는 함수형 컴포넌트가:

• 작성하기 쉽고 코드가 더 간결합니다.
• React의 최신 기능인 Hooks를 지원합니다.
• 클래스형 컴포넌트보다 성능이 약간 더 좋습니다.

위 클래스형 컴포넌트 코드를 함수형 컴포넌트로 바꾼다면 이렇게 됩니다:

const App = () => {
    return (
        <h1 title="This works!">
            Hi, <span>this</span> is ReactJS!
        </h1>
    );
};

export default App;

JSX 코드 작성 시 주의할 점

JSX를 작성할 때는 몇 가지 규칙을 지켜야 React가 제대로 이해할 수 있어요.

1. JSX 코드는 반드시 반환(return)해야 한다.

   const MyComponent = () => {
       return <h1>Hello, React!</h1>;
   };

2. JSX에 사용되는 컴포넌트 이름은 대문자로 시작해야 한다.
   React는 대문자로 시작하는 컴포넌트를 사용자 정의 컴포넌트로 인식합니다.
   소문자로 시작하면 일반 HTML 태그로 간주합니다.

   const MyComponent = () => {
       return <CustomComponent />;
   };

3. React 컴포넌트는 JSX 또는 React.createElement를 반환해야 한다. React 컴포넌트는 HTML-like 코드를 반환해야 합니다. 단순히 객체를 반환하면 컴포넌트로 동작하지 않습니다.

   const InvalidComponent = () => {
       return { message: "This is not valid!" }; // 컴포넌트로 동작하지 않음
   };

JSX를 사용할 때 React를 import해야 하는 이유

React를 사용할 때는 JSX를 작성하기 위해 React를 import해야 합니다. 재미있는 점은, 코드에서 React 객체를 직접 사용하지 않더라도 반드시 import를 해야 한다는 것입니다. 이유는 JSX가 JavaScript의 확장 문법이기 때문인데요, 결국 이 문법은 React.createElement 를 호출하는 형태로 변환되기 때문에 React 가 필요합니다.

import React from 'react';

const MyComponent = () => {
  return <h1>Hello, React!</h1>;
};

위 코드에서 React를 직접 사용하지 않지만, JSX를 변환하는 과정에서 React가 필요하기 때문에 import가 반드시 포함되어야 합니다.

syntactic sugar란?

위에서 언급한 JSX는 JavaScript의 syntactic sugar(문법적 설탕)입니다. 쉽게 말하면, 코드를 더 읽기 쉽게 만들어주는 문법적 도구라는 뜻이죠. JSX를 사용하면 HTML처럼 직관적으로 UI 구조를 작성할 수 있습니다. 예를 들어 아래 두 코드는 같은 기능을 하지만, JSX가 훨씬 간단하고 이해하기 쉽습니다.

JSX 사용

const element = <h1>Hello, World!</h1>;

JSX를 사용하지 않은 경우

const element = React.createElement('h1', null, 'Hello, World!');

React의 역할

React는 우리가 작성한 JSX나 React.createElement로 정의한 내용을 브라우저가 이해할 수 있는 DOM 명령어로 변환해줍니다. 이렇게 React는 어떤 요소를 렌더링할지 알려주는 역할을 합니다. 예를 들어, JSX로 작성한 코드가 실제 브라우저 화면에 표시되기까지의 과정은 다음과 같습니다.

1. 개발자가 JSX로 작성한 UI 구조를 React가 읽는다.
2. React는 이를 브라우저가 이해할 수 있는 DOM 요소로 변환한다.
3. 변환된 DOM 요소가 브라우저에 렌더링된다.

속성 예시: title 속성과 tool tip

React에서 JSX를 사용할 때, HTML의 속성을 그대로 작성할 수 있습니다. 예를 들어, title 속성을 추가하면 tool tip(툴팁) 효과를 사용할 수 있습니다. 사용자가 해당 요소 위에 마우스를 올리면 간단한 설명이 표시됩니다.

예제

const MyTooltip = () => {
  return <h1 title="Hello, this is a tooltip!">Hover over me</h1>;
};

위 코드를 실행하면, 화면에 <h1> 태그가 표시되고, 마우스를 올리면 "Hello, this is a tooltip!"이라는 작은 팝업이 나타납니다.

React의 핵심은 우리가 직관적으로 UI를 설계하고, 나머지 복잡한 작업은 React에 맡길 수 있다는 점입니다. JSX와 React의 역할을 명확히 이해하면 더 깔끔하고 효율적인 코드 작성을 할 수 있습니다.

이 글을 통해 JSX와 React의 역할을 좀 더 명확히 이해할 수 있을 거예요. 추가로 포함하고 싶은 내용이나 수정 사항이 있다면 말씀해주세요!

선언형과 명령형, 뭐가 다를까?

React는 "어떤 상태에서는 어떤 화면이 나와야 하는지"만 정의하면 된다. 반면, 기존의 명령형(imperative) 방식은 화면을 만들기 위해 어떤 과정을 거칠지 하나하나 작성해야 한다.

명령형 방식

• 기존 JavaScript를 쓸 때 사용하는 방식이다.
• 예를 들어 버튼 색깔을 바꾸려면, 버튼을 찾아서, 색깔을 지정하는 과정을 직접 써야 한다.
• 단계가 많고 복잡해질수록 코드가 지저분해지고, 관리하기도 어려워진다.

선언형 방식

• React는 결과만 정의하면 된다. "이 버튼이 클릭되었을 때, 이렇게 보여라" 같은 식으로 작성하면 된다.
• 어떻게 바꿀지는 React가 알아서 처리한다.
• 덕분에 코드가 깔끔하고 유지보수가 쉬워진다.

컴포넌트: React의 기본 단위

React에서는 UI를 컴포넌트(Component)라는 단위로 나눠서 만든다. 컴포넌트는 독립적으로 동작하는 작은 조각이라고 생각하면 된다. 버튼, 입력 창, 사용자 목록 같은 걸 각각 하나의 컴포넌트로 만들 수 있다.

컴포넌트의 장점

• 독립적: 각 컴포넌트는 필요한 데이터와 로직을 스스로 처리한다.
• 재사용 가능: 한 번 만든 컴포넌트를 다른 곳에서도 반복적으로 사용할 수 있다. 예를 들어, 버튼 컴포넌트를 만들어 두면 다른 화면에서도 그대로 쓸 수 있다.
• 구조적 설계: UI를 잘게 나누니까, 애플리케이션이 커져도 관리가 쉬워진다.

예시

사용자 목록을 보여주는 UI를 만든다고 해보자.

• 명령형 방식에서는 사용자를 하나하나 화면에 추가하는 과정을 직접 작성해야 한다.
• 선언형 방식에서는 "이 상태에서는 이 목록을 보여줘"라고 정의만 하면 React가 알아서 그려준다.

React는 이런 선언형 접근과 컴포넌트 기반 개발을 결합해서 복잡한 UI도 쉽게 만들 수 있도록 도와준다. 덕분에 개발자는 더 직관적으로 코드를 작성할 수 있고, 사용자 경험도 더 좋아진다.

문제 요약

이전 버전의 Expo CLI에서는 프로젝트 실행 시 브라우저에서 Dev Tools 웹 UI가 자동으로 열리며 QR 코드 스캔, 연결 모드 변경, 시뮬레이터 실행 등을 쉽게 할 수 있었습니다. 그러나 최신 Expo CLI에서는 Dev Tools 웹 UI가 더 이상 지원되지 않으며, 대신 모든 작업을 CLI 명령어로 수행해야 합니다.

원인

Expo 팀은 Expo CLI 6.0.0부터 Dev Tools 웹 UI를 지원하지 않기로 결정했습니다. 이를 통해 더 가볍고 빠른 개발 환경을 제공하려는 목적입니다. 이제 CLI에서 필요한 모든 작업을 수행하도록 변경되었습니다.

해결 방법

CLI에서 Dev Tools 기능 사용하기

이제는 CLI에서 Dev Tools의 대부분의 기능을 수행할 수 있습니다. 자주 사용하는 명령어는 다음과 같습니다.

프로젝트 실행 (터널링 모드) npx expo start --tunnel

터널 모드는 로컬 네트워크에 구애받지 않고 앱을 실행할 수 있게 해줍니다. CLI가 자동으로 ngrok을 설치해 주며, 모바일 디바이스에서 QR 코드로 연결할 수 있습니다.

기타 주요 CLI 명령어

• a: Android 에뮬레이터에서 앱 실행
• i: iOS 시뮬레이터에서 앱 실행
• r: 앱 리로드
• ?: 전체 명령어 목록 보기

이제 CLI에서 이 명령어들로 Dev Tools 없이도 대부분의 작업을 처리할 수 있습니다.

이전 Dev Tools 웹 UI가 필요한 경우

웹 UI가 꼭 필요하다면, Expo CLI 5.x 버전으로 다운그레이드하여 사용할 수 있습니다. 하지만 최신 기능을 사용할 수 없고, 장기적인 해결책은 아니므로 추천하지는 않습니다.

npm install -g expo-cli@5.0.2

결론

Expo CLI의 최신 버전에서는 Dev Tools 웹 UI가 사라졌지만, CLI 명령어만으로도 필요한 작업을 충분히 수행할 수 있습니다. CLI에 익숙해지는 것이 향후 효율적인 개발에 도움이 될 것입니다.

Expo CLI란?

Expo는 React Native 프레임워크 위에서 작동하는 툴킷으로, 빠르고 쉽게 프로젝트를 생성하고 개발할 수 있게 해주는 툴입니다. Expo CLI는 특히 초보자에게 직관적이고 쉬운 환경을 제공하며, 다양한 기능과 서비스를 내장하고 있습니다.

Expo CLI의 장점

1.    빠른 초기 설정: 
    Expo CLI는 기본적인 프로젝트 설정을 자동으로 제공해, 
    빠르게 프로젝트를 시작할 수 있습니다. 
    Node.js와 Expo만 설치하면 별도의 환경 설정 없이 
    바로 앱을 개발할 수 있습니다.

2.    간단한 빌드 및 배포: 
    Expo는 앱을 빌드하고 배포할 수 있는 Expo Go 앱을 제공하여,
    기기에서 즉시 앱을 테스트할 수 있습니다. 
    복잡한 빌드 설정이 필요 없기 때문에, 
    실제 기기에서 코드 수정 사항을 빠르게 확인할 수 있습니다.

3.    Cross-Platform 지원 강화: 
    iOS와 Android 플랫폼 간 코드의 일관성이 높아 
    플랫폼 간 문제를 줄일 수 있습니다.

4.    다양한 라이브러리 및 API 내장: 
    Expo SDK에는 카메라, 위치 서비스, 푸시 알림 등 
    다양한 기능이 내장되어 있어 별도의 설치 없이 사용할 수 있습니다.

5.    OTA 업데이트: 
    Expo는 앱 스토어에 다시 제출할 필요 없이 
    OTA(Over-the-Air) 업데이트를 지원하여 
    코드 수정 시 앱을 바로 업데이트할 수 있습니다.

Expo CLI의 단점

1.    네이티브 모듈 제한: 
    Expo는 자체 환경에서 지원하는 네이티브 모듈에 한해 사용할 수 있습니다. 
    특정 네이티브 기능(예: Bluetooth 또는 배터리 상태 모니터링 등)
    을 필요로 하는 경우, Expo로는 제한이 있을 수 있습니다.

2.    앱 사이즈 증가: 
    Expo SDK가 포함된 상태로 앱이 빌드되므로, 
    앱 크기가 일반 React Native 앱보다 더 커질 수 있습니다.

3.    Expo 관리에서 벗어나면 복잡성 증가: 
    Expo 환경을 벗어나 Ejected Mode로 전환하면, 
    Expo CLI의 단순한 장점이 사라지고 
    React Native CLI와 동일하게 환경 설정을 해야 합니다.

React Native CLI란?

React Native CLI는 Expo 없이 순수한 React Native 프로젝트를 생성할 때 사용하는 기본 CLI입니다. 개발자가 iOS와 Android의 네이티브 코드를 직접 수정하거나, 특정 네이티브 모듈을 추가할 수 있습니다.

React Native CLI의 장점

1.    네이티브 코드 접근 가능: 
    React Native CLI는 iOS와 Android의 네이티브 코드를 직접 수정할 수 있어, 
    앱을 보다 유연하게 커스터마이징할 수 있습니다. 
    Bluetooth, AR, 배터리 모니터링 등 
    다양한 네이티브 기능을 손쉽게 추가할 수 있습니다.

2.    네이티브 모듈 설치 자유로움: 
    Expo의 제약을 받지 않고 커뮤니티에서 제공하는 
    모든 React Native 패키지를 자유롭게 설치할 수 있습니다.

3.    프로젝트 사이즈 관리 가능: 
    필요하지 않은 패키지나 모듈을 제외하고 필요한 기능만 추가할 수 있어 
    앱의 최종 용량을 효율적으로 관리할 수 있습니다.

4.    개발 환경의 확장성: 
    React Native CLI는 Expo에 비해 복잡한 애플리케이션이나
    고급 네이티브 기능을 필요로 하는 프로젝트에 적합합니다.

React Native CLI의 단점

1.    복잡한 초기 설정: 
    React Native CLI는 iOS와 Android 네이티브 환경 설정이 필요하여, 
    초보자가 처음 설정할 때 어려움을 겪을 수 있습니다. 
    특히 iOS의 경우 macOS에서만 빌드 가능하여, 
    Mac이 없는 개발자에게는 불편할 수 있습니다.

2.    빌드 및 배포가 번거로움: 
    Expo의 간단한 빌드 기능과 달리, React Native CLI는
    Xcode나 Android Studio를 통해 빌드하고 배포해야 합니다. 
    이러한 과정은 시간이 많이 걸릴 수 있습니다.

3.    OTA 업데이트 미지원: 
    React Native CLI는 OTA 업데이트 기능이 없기 때문에, 
    앱 스토어에 재배포가 필요할 때마다 새 버전을 제출해야 합니다.

Expo CLI vs React Native CLI: 어떤 것을 선택해야 할까?

아래는 프로젝트 상황에 따라 어떤 CLI를 선택하면 좋을지에 대한 가이드입니다:

Expo CLI 추천:

•    프로젝트의 빠른 프로토타입이나 MVP를 제작할 때
•    기본적인 기능만으로 충분한 앱을 만들 때
•    다양한 빌드 환경에 익숙하지 않거나, 초기 개발자일 경우
•    OTA 업데이트나 다양한 내장 기능을 간편하게 사용하고 싶을 때
•    React Native CLI 추천:
•    앱에서 특정 네이티브 기능을 필요로 할 때 
    (예: Bluetooth, 네이티브 UI 커스터마이징 등)
•    프로젝트의 확장성이 중요하고, iOS와 Android 코드에 직접 접근하여 제어해야 할 때
•    앱의 최적화가 필요하고, 불필요한 기능을 제외해 앱 용량을 최소화하고자 할 때
•    OTA 업데이트가 필수적이지 않고, 앱 스토어 재배포 과정이 문제되지 않을 때

결론

Expo CLI와 React Native CLI는 각각의 장단점이 명확합니다. Expo CLI는 빠른 설정과 간편한 배포를 지원하지만, 네이티브 모듈 사용에 제약이 있습니다. 반면, React Native CLI는 복잡한 설정을 요구하지만 네이티브 기능을 자유롭게 사용할 수 있어 고급 기능이 필요한 애플리케이션 개발에 적합합니다. 개발 목적과 프로젝트의 복잡성을 고려하여 적절한 CLI를 선택하는 것이 중요합니다.

이 글을 통해 Expo CLI와 React Native CLI의 차이점과 장단점을 이해하고, 자신의 프로젝트에 맞는 도구를 선택하는 데 도움이 되었기를 바랍니다.

1. 주요 UI 컴포넌트: <View> 와 <Text>

React Native에서는 HTML 요소인 <div> 나 <span> 대신, 네이티브 플랫폼 전용 컴포넌트인 <View>와 <Text>를 제공합니다. 이러한 컴포넌트는 React Native가 자동으로 네이티브 코드로 변환하여, iOS와 Android의 UI 요소로 렌더링됩니다.

•    <View>: 레이아웃 및 UI 구조를 구성하는 컴포넌트로, HTML의 <div>와 유사하지만 네이티브 환경에 맞게 최적화되어 렌더링됩니다.

•    <Text>: 텍스트 표시를 위한 컴포넌트로, HTML의 <span>이나 <p>와 유사한 역할을 합니다. 네이티브 플랫폼에서 텍스트 렌더링이 최적화됩니다.

이처럼 React Native는 네이티브 환경에 최적화된 UI 컴포넌트를 사용하여 네이티브 수준의 사용자 경험을 제공합니다.

2. JavaScript 로직의 처리 방식: 네이티브와의 상호작용

React Native는 UI 렌더링과 JavaScript 로직을 분리하여 성능을 극대화합니다. UI 요소는 네이티브 코드로 컴파일되지만, 상태 관리, 조건문 등 JavaScript로 작성된 로직은 네이티브 앱 내에서 JavaScript 스레드에서 실행됩니다. 이는 React Native가 네이티브 플랫폼과 상호작용하는 효율적인 방식을 제공합니다.

JavaScript 스레드의 역할

JavaScript 스레드는 React Native 앱 내에서 상태 관리 및 로직 처리 등을 담당합니다. 이 스레드 덕분에 JavaScript 로직은 네이티브 플랫폼에 직접 접근하지 않더라도, 네이티브 앱의 일부로서 필요한 작업을 수행할 수 있습니다.

네이티브 브리지 구조

React Native는 JavaScript와 네이티브 코드(iOS의 Swift, Android의 Kotlin 등) 사이의 소통을 위해 “브리지” 구조를 사용합니다. 이 구조는 두 환경 간의 데이터 전송을 가능하게 하여, JavaScript와 네이티브 모듈이 필요한 기능을 서로 호출할 수 있게 합니다.

1. JavaScript에서 네이티브 모듈 호출: JavaScript 로직이 네이티브 기능을 요청할 때, 이 브리지를 통해 네이티브 모듈에 호출을 보냅니다.
   
2. 네이티브 모듈에서 JavaScript로 데이터 반환: 네이티브 모듈이 요청에 응답하면, 브리지를 통해 JavaScript 스레드로 데이터를 반환합니다.

이 브리지 구조는 React Native가 다양한 네이티브 기능을 활용하면서도, JavaScript로 작성된 코드가 네이티브 기능과 상호작용할 수 있도록 지원하는 핵심입니다.

3. React Native의 아키텍처와 성능 최적화

React Native의 아키텍처는 JavaScript로 개발된 로직과 네이티브 UI의 효율적인 구분에 기반을 두고 있어, 애플리케이션의 성능을 유지하면서도 재사용성과 개발 속도를 높입니다. 그러나 브리지를 통해 JavaScript와 네이티브 간 통신이 잦아지면 성능 저하가 발생할 수 있어, 성능 최적화를 위해 네이티브 모듈을 적절히 활용하는 것이 중요합니다.

React Native는 JavaScript의 유연성과 네이티브 성능을 조화롭게 활용하여, 웹 개발자도 네이티브 앱을 효율적으로 개발할 수 있는 강력한 도구입니다.

React.js는 웹과 모바일 등 다양한 플랫폼에 적용될 수 있는 “플랫폼 독립성(platform-agnostic)”을 갖춘 프레임워크입니다. 일반적으로 한 플랫폼에서 개발된 애플리케이션을 다른 플랫폼으로 옮기는 일에는 추가 작업이 필요하지만, React.js는 그 자체로 플랫폼에 구애받지 않고 모든 환경에서 사용될 수 있는 공통의 개발 언어(JavaScript)를 기반으로 합니다.

React.js는 기본적으로 UI 컴포넌트의 작성에 특화되어 있어, 웹 환경과 모바일 환경 모두에서 사용자 인터페이스(UI)를 구축하는 데 적합합니다.

2. React.js와 React Native의 조합: 다중 플랫폼 애플리케이션의 개발 방식

React.js는 웹 애플리케이션뿐만 아니라 모바일 애플리케이션 개발에도 적용할 수 있으며, 여기서 React DOM과 React Native의 조합이 중요한 역할을 합니다. 각 조합은 아래와 같은 목적과 방식으로 사용됩니다:

•    React.js + React DOM = 웹 애플리케이션

React DOM은 웹 브라우저에서 실행되는 애플리케이션을 위한 JavaScript 렌더링 엔진으로, HTML과 CSS를 통해 UI를 구성합니다. React.js와 React DOM을 결합해 브라우저에서 동작하는 웹 애플리케이션을 개발할 수 있습니다.

•    React.js + React Native = 네이티브 모바일 애플리케이션

React Native는 iOS와 Android 환경에서 모두 동작하는 실제 네이티브 모바일 애플리케이션을 개발할 수 있게 합니다. JavaScript와 JSX(React의 확장된 문법)를 사용해 네이티브 컴포넌트를 렌더링함으로써 성능을 높이고, JavaScript 기반 UI 라이브러리의 유연성을 유지합니다.

React Native의 등장으로 인해, 웹과 모바일 환경에서 일관된 사용자 경험을 제공하면서 코드 재사용성을 극대화하는 것이 가능해졌습니다.

3. React Native와 네이티브 개발의 차이점

React Native는 JavaScript를 사용하여 네이티브 플랫폼에서 앱을 실행할 수 있게 합니다. 기존의 네이티브 개발(iOS의 Swift, Android의 Kotlin 등)과 달리, React Native는 단일 코드베이스로 iOS와 Android를 모두 지원하여 개발 속도와 유지 보수성을 높일 수 있습니다.

프론트엔드 개발 중, styled-components를 사용하여 스타일을 작성하던 중, VSCode에서 styled-components를 자동완성할 때 import 대신 require 문법이 자동으로 입력되는 문제가 발생함. 기존에는 import 구문이 정상적으로 작동했으나, 어느 순간부터 자동완성 기능이 다음과 같이 변경됨:

const { default: styled } = require("styled-components");

이로 인해 코드 일관성이 깨지고, 불편함이 생김.

예상되는 원인

1. VSCode 설정 변경

   • jsconfig.json 또는 tsconfig.json 파일에서 모듈 시스템이 ES6에서 commonjs로 변경되었을 가능성.
   • 새 파일 생성 시 자동으로 생성된 jsconfig.json에서 module 옵션이 commonjs로 설정되었을 수 있음.

2. 확장 프로그램 설치 또는 업데이트

   • styled-components 관련 확장 프로그램 또는 ESLint, Prettier와 같은 코드 포매터가 업데이트되면서 설정이 변경되었을 가능성.
   • 특정 확장 프로그램이 require 문법을 기본으로 설정하여 자동완성 기능에 영향을 미쳤을 수 있음.

3. VSCode의 업데이트

   • VSCode 자체가 업데이트되면서 일부 설정이 초기화되거나 변경되었을 가능성.

4. Node.js 또는 패키지 변경

   • Node.js 버전이 변경되면서, 또는 프로젝트 내에서 사용하는 Node.js 버전이 변경되면서 모듈 시스템의 기본 설정이 달라졌을 수 있음.
   • styled-components와 관련된 패키지가 업데이트되면서 설정 파일이 변경되었을 가능성.

해결 방법

문제를 해결하기 위해 다양한 방법을 시도했지만, 최종적으로 1번 방법인 jsconfig.json 파일의 수정으로 해결함.

1. jsconfig.json 파일 수정 (문제 해결 방법)

   • jsconfig.json 파일을 열어 "module": "commonjs"로 설정된 부분을 "module": "ES6"로 변경.
   • 이 방법으로 문제를 해결할 수 있었으며, 이후 자동완성에서 import 문법이 다시 정상적으로 작동함.
   • 예시:

   {
     "compilerOptions": {
       "module": "ES6",
       "paths": {
         "@/*": ["./*"]
       }
     }
   }

2. (시도했지만 효과가 없었던 방법) 확장 프로그램 비활성화

   • styled-components 관련 확장 프로그램을 비활성화하거나 삭제.
   • 특정 확장 프로그램이 문제를 일으킬 수 있으므로, 비활성화 후 다시 자동완성을 확인했지만, 문제는 해결되지 않음.

3. (시도했지만 효과가 없었던 방법) VSCode 설정 초기화

   • VSCode의 설정을 기본값으로 초기화하고, 필요한 경우 settings.json 파일을 수정.
   • 설정 파일에서 잘못된 설정이 없는지 확인하고, import와 require 관련 설정을 리셋했지만, 문제는 지속됨.

4. (시도했지만 효과가 없었던 방법) 캐시 정리 및 VSCode 재설치

   • VSCode의 캐시를 정리하거나, 문제가 지속될 경우 VSCode를 재설치하여 초기 상태로 되돌림.
   • 캐시를 삭제하고 VSCode를 재설치해도 문제는 해결되지 않음.

5. (시도했지만 효과가 없었던 방법) Node.js 버전 및 패키지 관리

   • Node.js와 관련 패키지를 최신 상태로 유지하고, 문제가 발생하기 전에 사용하던 버전으로 되돌려 보는 것도 하나의 방법으로 시도했으나, 문제는 해결되지 않음.

결론

VSCode에서 발생한 styled-components 자동완성 문제는 다양한 원인으로 인해 발생할 수 있으며, 여러 방법을 시도했으나 최종적으로 jsconfig.json 파일에서 모듈 설정을 ES6로 변경하여 문제를 해결할 수 있었다.

이 문제를 겪은 후, 설정 파일을 주기적으로 백업하고, VSCode 업데이트 후에는 설정이 제대로 유지되고 있는지 확인하는 것이 중요하다고 느꼈다. 앞으로도 이런 상황이 발생하지 않도록 프로젝트 환경을 꼼꼼히 관리할 필요가 있다.

탈조선 프로젝트를 본격적으로 시작하면서, 프론트엔드에 이어 백엔드 구현의 필요성을 느끼게 됐다. 하지만 1인 개발자로서 모든 것을 직접 구현하는 것은 생각보다 어려웠다. 특히 백엔드의 복잡성을 이해하고 이를 프로젝트에 적용하는 데는 많은 시간과 노력이 필요하다는 것을 깨달았다.

이러한 이유로, 백엔드 구현에서 복잡성을 줄이면서도 안정적이고 확장 가능한 기능을 제공할 수 있는 실용적인 도구들을 선택하기로 결정했다. 다음은 내가 선택한 기술 스택과 그 이유다.

1. Next.js와 API Routes

프론트엔드에서 이미 사용하고 있는 Next.js는 서버사이드 렌더링과 정적 사이트 생성을 지원하는 강력한 프레임워크다.

또한 Next.js의 API Routes 기능을 사용하면 별도의 백엔드 서버 없이도 간단한 백엔드 로직을 처리할 수 있어, 초기 단계의 프로젝트에 매우 적합하다.

이 덕분에 백엔드 서버를 별도로 구축할 필요 없이, 프론트엔드와 백엔드를 하나의 프로젝트 내에서 통합하여 관리할 수 있다.

2. Supabase - 데이터베이스와 인증의 통합

백엔드에서 중요한 역할을 하는 것이 데이터베이스와 사용자 인증이다. 이를 위해 나는 Supabase를 선택했다.

Supabase는 PostgreSQL 기반의 데이터베이스 서비스로, 실시간 데이터베이스와 사용자 인증, 파일 스토리지를 통합적으로 제공한다.

이를 통해 복잡한 설정 없이도 안정적으로 데이터를 관리하고, 사용자를 인증할 수 있다.

Supabase를 사용하면 사용자 게시판 글, 프로필 정보 등을 안전하게 저장할 수 있고, OAuth2.0을 통한 간편한 로그인 기능도 구현할 수 있다.

Supabase는 Next.js와 잘 통합되어, 앞으로 개발 속도를 크게 향상시킬 수 있을 것으로 기대한다.

3. NextAuth.js - 간편한 사용자 인증

프로젝트에서 사용자의 인증은 필수적인 요소다. 이를 위해 나는 NextAuth.js를 선택했다.

NextAuth.js는 다양한 인증 방법(OAuth2.0, 이메일/비밀번호 등)을 간편하게 구현할 수 있는 라이브러리다.

Google, GitHub 등의 소셜 로그인을 빠르게 설정할 수 있어 사용자 경험을 향상시킬 수 있을 것이다.

복잡한 보안 설정 없이도 안전한 사용자 세션 관리를 할 수 있다는 점에서 매우 유용하다.

4. Stripe - 결제 기능

서비스의 수익화를 위해 결제 기능은 필수적이다. Stripe는 다양한 결제 수단을 지원하며, 강력한 API를 통해 결제 기능을 쉽게 구현할 수 있다.

Stripe를 사용하면 직접 결제 시스템을 구축할 필요 없이, 검증된 솔루션을 활용해 빠르고 안전하게 결제를 처리할 수 있다.

5. Vercel과 Cloudflare - 배포 및 보안

Vercel은 Next.js와 완벽하게 통합되어 있어, 코드 푸시만으로도 손쉽게 애플리케이션을 배포할 수 있다.

또한 Cloudflare를 통해 전 세계 사용자에게 빠르게 콘텐츠를 제공하고, DDoS 방어 및 SSL/TLS 암호화를 통해 보안을 강화할 수 있다.

결론: 실용적인 선택

1인 개발자로서 모든 것을 직접 구현하는 것은 현실적으로 어렵다는 것을 느꼈고, 그래서 이처럼 안정적이고 검증된 도구들을 선택하게 됐다.

이 기술 스택들은 내가 원하는 기능을 빠르고 안전하게 구현할 수 있도록 도와줄 것이며, 앞으로도 서비스가 성장함에 따라 확장 가능성을 제공할 것이다.

백엔드 구현에 대한 부담을 줄이고, 프론트엔드와의 통합을 쉽게 하며, 동시에 보안과 성능을 최적화할 수 있는 이 방법은 나와 같은 1인 개발자에게 특히 추천할 만한 선택이라고 생각한다.

앞으로도 탈조선 프로젝트를 통해 더 나은 서비스를 제공할 수 있도록, 이 기술 스택들을 잘 활용해 나갈 예정이다.

나는 2024년 5월 17일, 코드잇 프론트엔드 부트캠프 8기에 참여했다.
이 과정은 6개월 동안 진행될 예정이었고, 11월 14일에 종료될 계획이었다.
그러나 일본의 한 웹솔루션 업체에 첫 취업이 확정되면서, 부득이하게 8월 1일에 부트캠프를 중도하차하게 되었다.
취업 준비와 학기 시작 후 바빠질 일정까지 고려해야 했기 때문이다.

비록 중도하차했지만, 부트캠프를 통해 HTML, CSS, JavaScript, React, Styled-Components, Git, GitHub 등 다양한 기술을 습득할 수 있었다.
특히 팀 프로젝트 경험을 통해 웹사이트를 처음부터 끝까지 직접 만들어보는 기회를 가졌고, 이를 통해 큰 자신감을 얻게 되었다.

새로운 도전: 탈조선 프로젝트

부트캠프를 중도하차한 후, 나는 오랫동안 계획해왔던 개인 프로젝트인 ‘탈조선 프로젝트’를 본격적으로 시작했다.
이 프로젝트의 목표는 이민을 꿈꾸는 사람들에게 정확한 정보를 제공하고, 이민 과정을 쉽게 이해할 수 있도록 돕는 웹서비스를 개발하는 것이다.

나의 인생 목표 중 하나가 이민이다.
오랜 시간 동안 이민을 목표로 자료를 조사하고, 다양한 세미나와 이민 박람회에 참석하면서, 이민이 일반인들에게 얼마나 어려운 일인지 깨닫게 되었다.
이러한 경험을 통해 누구나 쉽게 접근할 수 있는 이민 정보 서비스의 필요성을 절감하게 되었고, 이를 실현하기 위해 이 프로젝트를 시작하기로 결심했다.

부트캠프에서 쌓은 기술적 경험과 프로젝트 관리 능력은 이 프로젝트를 실제로 실행에 옮기는 데 큰 도움이 되었다.
이러한 기반을 바탕으로 나는 탈조선 프로젝트를 본격적으로 시작할 수 있었다.

프로젝트 진행 상황과 향후 계획

2024년 8월 4일부터 탈조선 프로젝트의 웹서비스 디자인 작업을 시작했다.
3일 만에 랜딩 페이지의 디자인과 제작을 완료했으나, 이후 백엔드 작업이 필요해지면서 프로젝트 진행이 잠시 중단되었다.
현재는 백엔드 공부에 집중하고 있으며, 최우선 작업 목표는 게시판 기능 추가와 미완성 페이지들에 표시할 "제작 중" 페이지를 제작하는 것이다.

9월에는 학기가 시작되어 더욱 바빠질 예정이기 때문에, 그 전에 최대한 많은 작업을 마치는 것이 목표이다.
현재 작업 중인 내용은 https://www.taljosun.com/ 에서 확인할 수 있다.
언제 완성될지는 확실치 않지만, 우선 필수 기능들을 하나씩 추가해나가며 11월 이전에는 기본적인 구성을 완성하는 것을 목표로 하고 있다.

일본에서의 첫 취업과 유튜브 계획

정보처리기사 최종 결과가 발표되면, 이를 바탕으로 비자 수속을 시작하게 된다.
비자 발급은 한 달에서 한 달 반 정도 소요될 예정이며, 11월쯤 비자가 나올 것으로 예상된다.
비자가 나오면 학교에 취업계를 제출하고, 일본으로 바로 넘어가게 될 것이다.

일본으로 이주하게 되면, 일본에서의 생활과 개발 관련 내용을 유튜브 채널을 통해 공유할 계획이다.
유튜브 링크는 다음과 같다: https://www.youtube.com/@TalJosun
아마 일본 출국 영상을 시작으로 첫 영상을 업로드하게 될 것 같다.

마지막으로, 최근 전 세계적으로 지진이 빈번해지면서 일본의 난카이 트로프 대지진에 대한 불안감이 커지고 있다.
이런 상황에서 일본으로 가는 것이 과연 괜찮을지에 대한 두려움과 걱정이 있는 것도 사실이다.
하지만 일본으로의 취업 과정이 마치 정해진 운명처럼 흘러갔었기에, 나는 이것이 나의 운명이라고 생각하고 일본으로 가기로 결심했다.
부디 큰 지진이 일어나지 않기를 바라고, 만약 발생하더라도 큰 피해가 없기를 간절히 기원한다.

방법 1: React 상태와 효과를 이용한 방법

이 방법은 React의 useState와 useEffect 훅을 사용하여 화면 크기를 감지하고, 상태(state)를 통해 이미지 소스를 변경하는 방법입니다.

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import Image from 'next/image';
import Title from './Title';
import SubTitle from './SubTitle';

const BannerContainer = styled.div`
  position: relative;
  width: 100vw;
  height: 90vh;
  margin-bottom: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #4facfe 0%,
    rgba(0, 242, 254, 0.8) 31.5%,
    #ffffff 100%
  );
`;

const BackgroundImage = styled(Image)`
  width: 100%;
  height: auto;
  object-fit: cover;
  @media (max-width: 768px) {
    object-fit: contain;
  }
`;

const TitleContainer = styled.div`
  z-index: 10;
  width: 80%;
  max-width: 1200px;
  height: 85%;
  white-space: nowrap;
`;

const Banner = () => {
  const [src, setSrc] = useState('/images/BannerImage.svg');

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 768) {
        setSrc('/images/MobileImage.svg');
      } else {
        setSrc('/images/BannerImage.svg');
      }
    };

    window.addEventListener('resize', handleResize);

    // 초기 로드 시 실행
    handleResize();

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <BannerContainer>
      <BackgroundImage
        fill
        src={src}
        alt="Banner Image"
        priority
      />

      <TitleContainer>
        <Title />
        <SubTitle />
      </TitleContainer>
    </BannerContainer>
  );
};

export default Banner;

장점:

1. 직관성: 상태 변화를 명확하게 다루며, 코드가 비교적 직관적입니다.
2. 유연성: 다양한 조건에 따라 이미지를 쉽게 변경할 수 있습니다.
3. 리액트 방식: React 훅을 사용하여 상태 변화를 관리할 수 있습니다.

단점:

1. 추가 렌더링: 상태 변경으로 인해 불필요한 렌더링이 발생할 수 있습니다.
2. 복잡성 증가: 단순한 이미지 변경을 위해 추가적인 코드가 필요합니다.

방법 2: styled-components와 props를 활용한 방법

이 방법은 styled-components의 attrs를 이용하여 props를 통해 조건부 스타일링을 적용하는 방법입니다.

import React from 'react';
import styled from 'styled-components';
import Image from 'next/image';
import Title from './Title';
import SubTitle from './SubTitle';

const BannerContainer = styled.div`
  position: relative;
  width: 100vw;
  height: 90vh;
  margin-bottom: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #4facfe 0%,
    rgba(0, 242, 254, 0.8) 31.5%,
    #ffffff 100%
  );
`;

const BackgroundImage = styled(Image).attrs(props => ({
  src: props.isMobile ? '/images/MobileImage.svg' : '/images/BannerImage.svg'
}))`
  width: 100%;
  height: auto;
  object-fit: cover;
  @media (max-width: 768px) {
    object-fit: contain;
  }
`;

const TitleContainer = styled.div`
  z-index: 10;
  width: 80%;
  max-width: 1200px;
  height: 85%;
  white-space: nowrap;
`;

const Banner = () => {
  const [isMobile, setIsMobile] = React.useState(false);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };

    window.addEventListener('resize', handleResize);

    // 초기 로드 시 실행
    handleResize();

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <BannerContainer>
      <BackgroundImage
        fill
        isMobile={isMobile}
        alt="Banner Image"
        priority
      />

      <TitleContainer>
        <Title />
        <SubTitle />
      </TitleContainer>
    </BannerContainer>
  );
};

export default Banner;

장점:

1. 코드 간결성: props를 통해 styled-components에서 조건부 스타일링을 바로 적용할 수 있습니다.
2. 렌더링 효율성: 상태 변경이 최소화되어 불필요한 렌더링이 줄어듭니다.
3. 스타일링 통합: styled-components 내에서 스타일링과 로직을 모두 처리할 수 있습니다.

단점:

1. 유연성 부족: 조건이 더 복잡해지면 코드가 복잡해질 수 있습니다.
2. 디버깅 어려움: styled-components의 attrs를 통한 동적 props 적용은 디버깅이 어려울 수 있습니다.

결론

• 간단한 경우: 만약 간단한 조건부 이미지 변경이 필요하다면, styled-components와 props를 활용한 방법이 더 적합할 수 있습니다.
• 복잡한 경우: 더 복잡한 로직이나 조건이 필요한 경우, React 상태와 효과를 이용한 방법이 더 유연하고 관리하기 쉬울 수 있습니다.

이 두 가지 방법을 상황에 맞게 적절히 사용하여 반응형 디자인을 구현해보세요. 필요할 때마다 이 글을 참고하여 구현 방식을 선택하면 좋겠습니다.

이번에 공부한 문제는 2차원 평면 위의 점 N개가 주어졌을 때, 이를 특정 기준에 따라 정렬하는 프로그램을 작성하는 것입니다. 주어진 점들을 y좌표가 증가하는 순서로, y좌표가 같으면 x좌표가 증가하는 순서로 정렬하는 것입니다.

문제 조건

• 점의 개수 N은 1 이상 100,000 이하입니다.
• 각 점의 좌표 ((x_i, y_i))는 -100,000 이상 100,000 이하의 정수입니다.
• 위치가 같은 두 점은 없습니다.

입출력 예

문제 해결 방법

해결 전략

주어진 점들을 y좌표가 증가하는 순서로 정렬하고, y좌표가 같으면 x좌표가 증가하는 순서로 정렬해야 합니다. 이를 위해 Python의 내장 sorted 함수를 사용했습니다.

시간 복잡도

Python의 sorted 함수는 Timsort 알고리즘을 사용하며, 시간 복잡도는 (O(n \log n))입니다. 따라서, 최대 100,000개의 점을 정렬하는 데 적합합니다.

공간 복잡도

주어진 데이터를 리스트에 저장하고 정렬하므로, 공간 복잡도는 (O(n))입니다.

코드 구현

다음은 sorted 함수를 사용하여 문제를 해결하는 Python 코드입니다.

def sort_points():
    import sys
    input = sys.stdin.read
    data = input().split()

    N = int(data[0])
    points = []

    for i in range(1, len(data), 2):
        x = int(data[i])
        y = int(data[i + 1])
        points.append((x, y))

    # 정렬 기준: y좌표가 증가하는 순으로, y좌표가 같으면 x좌표가 증가하는 순서로
    sorted_points = sorted(points, key=lambda point: (point[1], point[0]))

    for point in sorted_points:
        print(point[0], point[1])

if __name__ == "__main__":
    sort_points()

코드 설명

1. sys.stdin.read를 사용하여 입력을 한 번에 읽고, split()을 사용하여 각 줄을 분리합니다.
2. 첫 번째 값은 점의 개수인 N이고, 나머지 값들은 점의 좌표입니다.
3. 좌표들을 (x, y) 형태의 튜플로 리스트에 저장합니다.
4. sorted 함수를 사용하여 점들을 정렬합니다. 정렬 기준은 lambda point: (point[1], point[0])로 설정하여, y좌표를 기준으로 오름차순 정렬하고, y좌표가 같으면 x좌표를 기준으로 오름차순 정렬합니다.
5. 정렬된 점들을 차례대로 출력합니다.

예시 테스트

• 입력:

  5
  0 4
  1 2
  1 -1
  2 2
  3 3

• 출력:

  1 -1
  1 2
  2 2
  3 3
  0 4

이 코드는 주어진 모든 조건을 만족하며, 각 입력에 대해 올바르게 동작합니다. sorted 함수를 사용하여 간단하게 정렬 기준을 설정하고, 원하는 순서대로 점들을 출력할 수 있습니다.

결론

이번 문제를 통해 Python의 내장 함수인 sorted를 사용하여 2차원 평면 위의 점들을 효율적으로 정렬하는 방법을 배울 수 있었습니다. sorted 함수는 Timsort 알고리즘을 사용하여 시간 복잡도 (O(n \log n))로 매우 효율적입니다. 이 문제를 해결하면서 정렬 기준을 설정하는 방법과 정렬 알고리즘의 효율성을 다시 한 번 확인할 수 있었습니다. 앞으로도 다양한 정렬 알고리즘을 공부하여 알고리즘에 대한 이해를 더욱 깊게 할 예정입니다.

이번에 공부한 문제는 N개의 수를 오름차순으로 정렬하는 프로그램을 작성하는 것입니다. 문제를 해결하기 위해 효율적인 정렬 알고리즘 중 하나인 병합 정렬(Merge Sort)을 사용해보았습니다.

문제 조건

• 수의 개수 N은 1 이상 1,000,000 이하입니다.
• 각 수는 절댓값이 1,000,000보다 작거나 같은 정수입니다.
• 수는 중복되지 않습니다.

입출력 예

문제 해결 방법

병합 정렬

이번 문제를 해결하기 위해 선택한 알고리즘은 병합 정렬입니다. 병합 정렬은 리스트를 반으로 나누어 각각 정렬한 후, 두 정렬된 리스트를 합치는 방식으로 동작합니다. 이 알고리즘의 시간 복잡도는 (O(n \log n))으로 매우 효율적입니다.

시간 복잡도

병합 정렬의 최악, 최선, 평균 시간 복잡도는 모두 (O(n \log n))입니다. 이는 리스트를 반으로 나누고 다시 합치는 과정이 로그 시간에 이루어지기 때문입니다.

공간 복잡도

병합 정렬은 추가적인 리스트를 사용하여 정렬하기 때문에 공간 복잡도는 (O(n))입니다.

코드 구현

다음은 병합 정렬을 사용하여 문제를 해결하는 Python 코드입니다.

def merge_sort(numbers):
    if len(numbers) <= 1:
        return numbers

    mid = len(numbers) // 2
    left_half = merge_sort(numbers[:mid])
    right_half = merge_sort(numbers[mid:])

    return merge(left_half, right_half)

def merge(left, right):
    sorted_list = []
    i = j = 0

    while i < len(left) and j < len(right):
        if left[i] < right[j]:
            sorted_list.append(left[i])
            i += 1
        else:
            sorted_list.append(right[j])
            j += 1

    # 남은 요소 추가
    sorted_list.extend(left[i:])
    sorted_list.extend(right[j:])

    return sorted_list

def sort_numbers():
    import sys
    input = sys.stdin.read
    data = input().split()

    N = int(data[0])
    numbers = list(map(int, data[1:N+1]))

    # 병합 정렬을 사용하여 정렬
    sorted_numbers = merge_sort(numbers)

    # 결과 출력
    for number in sorted_numbers:
        print(number)

if __name__ == "__main__":
    sort_numbers()

코드 설명

1. merge_sort 함수는 리스트를 반으로 나누어 각각 재귀적으로 정렬한 후, merge 함수를 사용하여 두 정렬된 리스트를 합칩니다.
2. merge 함수는 두 개의 정렬된 리스트를 받아 하나의 정렬된 리스트로 합칩니다. 두 리스트를 하나씩 비교하며 더 작은 값을 결과 리스트에 추가합니다.
3. sort_numbers 함수는 입력을 받아 숫자들을 리스트로 변환한 후, merge_sort 함수를 호출하여 정렬합니다.
4. 정렬된 숫자들을 차례대로 출력합니다.

예시 테스트

• 입력:

  5
  5
  4
  3
  2
  1

• 출력:

  1
  2
  3
  4
  5

이 코드는 주어진 모든 조건을 만족하며, 각 입력에 대해 올바르게 동작합니다.

결론

이번 문제를 통해 병합 정렬 알고리즘을 복습할 수 있었습니다. 병합 정렬은 시간 복잡도가 (O(n \log n))으로 매우 효율적이어서 대량의 데이터를 정렬하는 데 적합합니다. 주어진 문제를 해결하면서 정렬 알고리즘의 기본 개념을 다시 한 번 정리할 수 있었습니다. 앞으로도 다양한 정렬 알고리즘을 공부하여 알고리즘에 대한 이해를 더욱 깊게 할 예정입니다.

이번에 공부한 문제는 N개의 수를 오름차순으로 정렬하는 프로그램을 작성하는 것이었습니다. 문제를 해결하기 위해 기본적인 정렬 알고리즘 중 하나인 버블 정렬을 사용해보았습니다.

문제 조건

• 수의 개수 N은 1 이상 1,000 이하입니다.
• 각 수는 절댓값이 1,000보다 작거나 같은 정수입니다.
• 수는 중복되지 않습니다.

입출력 예

문제 해결 방법

버블 정렬

이번 문제를 해결하기 위해 선택한 알고리즘은 버블 정렬입니다. 버블 정렬은 인접한 두 원소를 비교하고, 순서가 잘못된 경우 서로 교환하는 방식으로 동작합니다. 이 과정을 리스트가 정렬될 때까지 반복합니다.

시간 복잡도

버블 정렬의 최악, 최선, 평균 시간 복잡도는 모두 (O(n^2))입니다. 이는 중첩된 두 개의 루프가 리스트의 길이에 비례하여 실행되기 때문입니다.

공간 복잡도

버블 정렬은 주어진 리스트 내부에서 원소를 교환하므로 추가적인 공간이 거의 필요하지 않습니다. 따라서 공간 복잡도는 (O(1))입니다.

코드 구현

다음은 버블 정렬을 사용하여 문제를 해결하는 Python 코드입니다.

def bubble_sort(numbers):
    n = len(numbers)
    for i in range(n):
        for j in range(0, n-i-1):
            if numbers[j] > numbers[j+1]:
                # Swap the elements
                numbers[j], numbers[j+1] = numbers[j+1], numbers[j]

def sort_numbers():
    import sys
    input = sys.stdin.read
    data = input().split()

    N = int(data[0])
    numbers = list(map(int, data[1:N+1]))

    # 버블 정렬을 사용하여 정렬
    bubble_sort(numbers)

    # 결과 출력
    for number in numbers:
        print(number)

if __name__ == "__main__":
    sort_numbers()

코드 설명

1. bubble_sort 함수는 리스트를 받아 버블 정렬 알고리즘을 사용하여 정렬합니다.
   • 리스트의 길이를 n으로 설정하고, i를 0부터 n-1까지 반복합니다.
   • 내부 루프에서 j를 0부터 n-i-2까지 반복하면서 인접한 두 원소를 비교하고, 순서가 잘못된 경우 교환합니다.
2. sort_numbers 함수는 입력을 받아 숫자들을 리스트로 변환한 후, bubble_sort 함수를 호출하여 정렬합니다.
3. 정렬된 숫자들을 차례대로 출력합니다.

예시 테스트

• 입력:

  5
  5
  2
  3
  4
  1

• 출력:

  1
  2
  3
  4
  5

이 코드는 주어진 모든 조건을 만족하며, 각 입력에 대해 올바르게 동작합니다.

결론

이번 문제를 통해 버블 정렬 알고리즘을 복습할 수 있었습니다. 버블 정렬은 간단한 정렬 알고리즘이지만, 리스트를 직접 정렬하는 과정을 이해하는 데 유용합니다. 버블 정렬의 시간 복잡도는 (O(n^2))로, 데이터가 많을 경우 비효율적일 수 있지만, 알고리즘의 기본 개념을 이해하는 데는 적합합니다. 또한, 공간 복잡도가 (O(1))로 추가적인 메모리 사용이 거의 없다는 점에서 장점이 있습니다. 주어진 문제를 해결하면서 정렬 알고리즘의 기본 개념을 다시 한 번 정리할 수 있었습니다. 앞으로 더 복잡한 정렬 알고리즘도 공부해볼 예정입니다.

주어진 문제는 문자열이 팰린드롬인지 확인하는 것입니다. 팰린드롬은 앞에서 읽으나 뒤에서 읽으나 동일한 문자열을 말합니다. 이 문제는 재귀적인 방법을 사용하여 해결해야 합니다.

제한 조건

• 문자열의 길이는 최대 1000입니다.
• 주어지는 문자열은 알파벳 대문자로만 구성됩니다.

입출력 예

문제 해결 방법

해결 전략

1. 문자열이 팰린드롬인지 확인하는 재귀 함수를 작성합니다.
2. 재귀 함수는 문자열의 시작과 끝 문자가 동일한지 확인합니다.
3. 동일하면 다음 비교를 위해 시작과 끝을 한 칸씩 좁혀가며 재귀 호출합니다.
4. 다르면 팰린드롬이 아님을 반환합니다.
5. 문자열이 팰린드롬인지 여부와 함께 재귀 호출 횟수를 반환합니다.

코드 구현

다음은 팰린드롬을 확인하는 Python 코드입니다.

def recursion(s, l, r, count):
    count[0] += 1
    if l >= r:
        return 1
    elif s[l] != s[r]:
        return 0
    else:
        return recursion(s, l + 1, r - 1, count)

def isPalindrome(s):
    count = [0]
    result = recursion(s, 0, len(s) - 1, count)
    return result, count[0]

# 입력을 받습니다.
T = int(input())
for _ in range(T):
    s = input().strip()
    result, cnt = isPalindrome(s)
    print(result, cnt)

코드 설명

• recursion 함수는 문자열 s의 시작 인덱스 l과 끝 인덱스 r을 비교합니다. 또한, 재귀 호출 횟수를 기록하기 위해 count 리스트를 사용합니다.
• isPalindrome 함수는 recursion 함수를 호출하여 팰린드롬 여부와 재귀 호출 횟수를 계산합니다.
• 입력 문자열의 개수를 받아 각 문자열에 대해 팰린드롬 여부와 재귀 호출 횟수를 출력합니다.

예시 테스트

• 입력:

  2
  ABBA
  ABC

• 출력:

  1 4
  0 3

이 코드는 주어진 모든 조건을 만족하며, 각 입력에 대해 올바르게 팰린드롬 여부와 재귀 호출 횟수를 출력합니다.

결론

이 문제는 재귀를 사용하여 문자열이 팰린드롬인지 확인하는 방법을 익히는 좋은 연습입니다. 제한 조건이 비교적 간단하므로 재귀 호출을 통해 문제를 쉽게 해결할 수 있습니다. 주어진 코드와 전략을 활용하여 문제를 해결할 수 있으며, 이를 백준 온라인 저지에 제출하여 올바르게 작동함을 확인할 수 있습니다.

피보나치 수열은 0과 1로 시작하며, 그 다음 수부터는 바로 앞 두 수의 합으로 이루어지는 수열입니다. 피보나치 수열은 다음과 같은 점화식으로 정의됩니다:

• ( F_0 = 0 )
• ( F_1 = 1 )
• ( F_n = F_{n-1} + F_{n-2} ) (n ≥ 2)

제한 조건

• ( n )은 45보다 작거나 같은 자연수입니다.

입출력 예

문제 해결 방법

해결 전략

1. ( n )이 0이면 0을, 1이면 1을 반환합니다.
2. 2 이상일 경우, 리스트를 이용하여 피보나치 수열을 저장하면서 계산합니다.
3. 반복문을 통해 2부터 ( n )까지의 피보나치 수를 차례대로 계산하여 리스트에 저장합니다.
4. ( n )번째 피보나치 수를 반환합니다.

코드 구현

다음은 피보나치 수열의 n번째 값을 계산하는 Python 코드입니다.

def fibonacci(n):
    if n == 0:
        return 0
    elif n == 1:
        return 1

    fib = [0, 1]
    for i in range(2, n + 1):
        fib.append(fib[i-1] + fib[i-2])

    return fib[n]

# 입력을 받습니다.
n = int(input())

# n번째 피보나치 수를 계산하여 출력합니다.
print(fibonacci(n))

코드 설명:

• fibonacci 함수는 정수 ( n )을 인수로 받습니다.
• ( n )이 0일 경우 0을, 1일 경우 1을 반환합니다.
• 2 이상인 경우, 리스트 fib에 피보나치 수열을 저장합니다.
• 반복문을 통해 2부터 ( n )까지의 피보나치 수를 차례대로 계산하여 리스트에 추가합니다.
• 최종적으로 리스트 fib의 ( n )번째 요소를 반환합니다.
• 사용자로부터 입력을 받아 ( n )에 저장한 후, fibonacci 함수를 호출하여 결과를 출력합니다.

예시 테스트

• 입력: 0

• 출력: 0

• 입력: 1

• 출력: 1

• 입력: 10

• 출력: 55

이 코드는 주어진 모든 조건을 만족하며, 각 입력에 대해 올바른 피보나치 수를 출력합니다.

결론

이 문제는 피보나치 수열의 n번째 값을 구하는 알고리즘 문제입니다. 제한 조건이 ( n )이 45 이하로 매우 작기 때문에, 리스트를 사용하여 반복문으로 쉽게 해결할 수 있습니다. 이 문제를 통해 반복문과 리스트를 활용하여 피보나치 수열을 구현하는 방법을 복습할 수 있습니다. 주어진 코드와 전략을 활용하여 문제를 해결할 수 있으며, 이 코드를 백준 온라인 저지에 제출하여 올바르게 작동함을 확인할 수 있습니다.

주어진 문제는 정수 ( N )이 주어졌을 때, ( N )의 팩토리얼을 계산하는 프로그램을 작성하는 것입니다. 팩토리얼은 수학적으로 ( N! = N \times (N-1) \times (N-2) \times \cdots \times 1 )로 정의됩니다. 단, 0!는 1로 정의됩니다.

제한 조건

• ( N )은 0 이상 12 이하의 정수입니다.
• 입력은 하나의 정수 ( N )입니다.

입출력 예

문제 해결 방법

해결 전략

1. 팩토리얼을 계산하는 함수 factorial을 정의합니다.
2. 함수는 ( N )이 0일 경우 1을 반환합니다.
3. ( N )이 0이 아닐 경우, 1부터 ( N )까지의 모든 정수를 곱하여 팩토리얼을 계산합니다.
4. 계산된 팩토리얼 값을 반환합니다.
5. 입력 값을 받아 함수에 전달하고 결과를 출력합니다.

코드 구현

다음은 팩토리얼을 계산하는 Python 코드입니다.

def factorial(n):
    if n == 0:
        return 1
    result = 1
    for i in range(1, n + 1):
        result *= i
    return result

# 입력을 받습니다.
N = int(input())

# 팩토리얼을 계산하여 출력합니다.
print(factorial(N))

코드 설명:

• factorial 함수는 정수 ( n )을 인수로 받습니다.
• ( n )이 0인 경우, 1을 반환합니다.
• ( n )이 0이 아닌 경우, 1부터 ( n )까지의 정수를 차례로 곱하여 결과를 반환합니다.
• 사용자로부터 입력을 받아 ( N )에 저장한 후, factorial 함수를 호출하여 결과를 출력합니다.

예시 테스트

• 입력: 5

• 출력: 120

• 입력: 10

• 출력: 3628800

이 코드는 주어진 모든 조건을 만족하며, 각 입력에 대해 올바른 팩토리얼 값을 출력합니다.

결론

이 문제는 팩토리얼을 계산하는 간단한 알고리즘 문제입니다. 제한 조건이 ( N )이 12 이하로 매우 작기 때문에, 반복문을 사용하여 쉽게 해결할 수 있습니다. 이 문제를 통해 반복문과 팩토리얼 개념을 복습할 수 있습니다. 주어진 코드와 전략을 활용하여 문제를 해결할 수 있으며, 이 코드를 백준 온라인 저지에 제출하여 올바르게 작동함을 확인할 수 있습니다.