👥 조별 과제

⚡ 개념 정리하기 !

1. 클라이언트

   둘 이상의 컴퓨터들이 통신할 때 호스트(서버)에 종속되어 통신하는 컴퓨터이다. 특정 네트워크에 접속하는 거의 모든 프로그램 전부를 클라이언트라고 볼 수 있음 ex) 클라이언트-서버 구성에서 사용자가 서버에 접속하기 위해 사용하는 프로그램, 서비스

2. 컴포넌트

   소프트웨어 개발을 마치 레고(Lego) 블록을 쌓듯이 쉽게 할 수 있도록 하는 기술을 말한다. 즉, 기존의 코딩 방식에 의한 개발에서 벗어나 소프트웨어 구성단위(module)를 미리 만든 뒤 필요한 응용 기술을 개발할 때 이 모듈을 조립하는 기술을 말한다. 컴포넌트 기술을 활용하면 복잡한 정보 시스템을 신속하게 구축할 수 있으며, 유사한 정보 시스템을 구축할 때 재사용이 가능한 장점이 있다. 특히, 급속도로 변하는 인터넷 환경에서 표준화된 소프트웨어를 만드는 것이 필요하기 때문에 컴포넌트는 매우 중요하다. 이미 국가 차원에서 소프트웨어의 컴포넌트화를 추진하고 있는 미국은 소프트웨어의 컴포넌트화로 개발생산성이 10배, 품질보증이 16배씩이나 증가했다는 보고가 있다.

리액트 컴포넌트

• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.
• 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있다.

⚡ 토론해보아요 !

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

   React.js에서 컴포넌트 활용하는 방법 React.js는 컴포넌트 기반의 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위해 컴포넌트를 활용한다.

   1. 컴포넌트 생성: React에서 컴포넌트는 JavaScript 클래스나 함수로 정의된다.
   2. 컴포넌트 사용: 컴포넌트를 사용하기 위해서는 JSX문법을 활용한다. JSX는 JavaScript와 HTML의 조합으로, 컴포넌트를 작성하고 사용할 때 자주 사용된다.
   3. 속성 전달: 컴포넌트에 데이터를 전달하기 위해 속성으로 사용할 수 있다.
   4. 상태(state) 관리: React 컴포넌트는 상태를 가질 수 있다. 상태는 컴포넌트의 동적인 데이터를 저장하고 관리하는 데 사용된다.

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

   클라이언트 프로그램이라는 특성상 사용자로부터 입력을 받고 해당 입력을 서버에 전송 후 다시 화면에 띄워주는 등 정보처리에 관해서 여러번의 렌더링이 필수적인데, 이때 React는 변경된 부분만 업데이트 할 수 있는 기능을 제공(Dirty checking)하는 라이브러리 이기 때문에 보다 더 효율적인 프로그램을 만들 수 있다. 또한 오픈소스 라이브러리 사용시 중요한 점중 하나가 "과연 이 라이브러리가 시대에 뒤쳐지지 않고 꾸준히 유지보수 될 수 있는가?" 인데 React는 메타에서 개발한 라이브러리 이기 때문에 이부분에 상당한 강점이 있다.

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

app.use(express.static('public')); (public은 최상위 경로로 등록된 폴더) 라는 코드(public내의 파일에 접근이 가능하도록 하는)를 추가해주었을 때 css와 js또한 불러올 수 있었는데 코드를 넣기 전(css파일이 적용되지 않는 경우)에는 nodejs를 사용하는 js파일 내 코드가 전체폴더에 접근하지 못해서 일 것이라고 생각해