⚡ 개념 정리하기 !

1. 클라이언트 (↔서버)

서비스를 제공하는 서버와 상호작용하는 주체로, 서버에게 서비스나 정보를 요청하고 서버로부터 받는 응답을 처리하여 사용자에게 보여준다. 주로 사용자와 상호작용하며 사용자의 요청을 서버에 전달하고 응답을 처리하여 적절한 결과를 보여준다.

1. 컴포넌트

독립적인 단위의 소프트웨어 모듈로, 리액트로 만들어진 앱을 이루는 최소한의 단위이다. 즉 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이다. 각 부분을 재사용 가능한 조각으로 UI를 나눈 것과 같다.

⚡ 토론해보아요 !

1. React.js 에서는 컴포넌트를 어떻게 활용할까요?

리액트는 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다른 화면에서 다시 쓰거나, 다른 프로젝트에서 다시 쓸 수 있도록 한다. 즉 재사용을 통해 개발 생산성을 향상시킨다. 또한 컴포넌트는 테스트하기 쉬워 코드 유지보수에도 이점이 있다.

⇒ JavaScript의 모듈과 비슷한 방식으로 작성/사용할 수 있다.

// Component 작성
import React from 'react';

/*
*  구현하고 싶은 것들
*/

export default COMPonent;

// Component 사용
import React from 'react';
import /* ~ */ from './COMPonent';

function App() {
  return (
		<!-- whatever -->
  );
}

export default App;

1. 클라이언트 프로그램 개발 시 React.js 를 사용하는 이유가 무엇일까요?

• 컴포넌트 기반 접근 방식: React.js는 컴포넌트 기반 접근 방식을 채택하여 재사용 가능한 UI 요소를 쉽게 작성할 수 있습니다. 컴포넌트는 독립적으로 존재하며, 각각의 상태(state)와 속성(props)을 가질 수 있습니다. 이를 통해 모듈화와 코드 재사용성이 증가하며 개발 생산성이 향상됩니다.
• 단방향 데이터 흐름: React.js는 단방향 데이터 흐름을 따릅니다. 데이터의 흐름은 상위 컴포넌트에서 하위 컴포넌트로 props를 통해 전달되며, 하위 컴포넌트는 상위 컴포넌트의 상태를 직접 수정할 수 없습니다. 이로 인해 애플리케이션의 데이터 흐름을 예측 가능하게 만들어 버그를 줄이고 유지보수를 용이하게 합니다.
• 다른 기술과의 통합: React.js는 다른 기술과의 통합을 지원합니다.

➕ 여섯번째 스터디에 적용했던 사진과 css 파일이 여덟번째 스터디에는 적용되지 않는 경우가 왜 발생하고 어떻게 적용할지도 한 번 생각해보아요 !

⇒ HTML 파일을 직접 사용할 때와 React에서 파일을 가져올 때 기준으로 삼는 경로가 다르다. 즉, 파일을 찾을 수 없어서 오류가 나는 것.

const express = require('express');
const app = express();

app.listen(8080, () => 
    console.log('listening on 8080')
);

app.use(express.static('****')); // 파일 경로 기준 지정

// 이건 진짜 무슨 수를 써도 안 될때 쓰는 최후의
// 노가다-style 방법...
app.get('/comp', (req, res) => 
    res.sendFile('****')
);

<link rel="stylesheet" type="text/css" href="/css/style.css" />

<!-- ^^^^ 이거를 아래처럼 바꿈 (절대경로 삭제) vvvv -->

<link rel="stylesheet" type="text/css" href="css/style.css" />