: isSpecial이 true이면 ? 뒤에 값이, isSpecial이 false이면 : 뒤에 값이 나오게 된다.

function Hello({ name, color, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial ? <b>*</b> : null}
      Hello~ {name}
    </div>
  );
}

다음 코드를 null 을 대신해서

function Hello({ name, color, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b> * </b>}
      Hello~ {name}
    </div>
  );
}

이렇게도 바꿔서 작성할 수 있음. 이때 isSpecial을 true, false로 따로 지정해주지 않으면 기본값으로 true로 지정된다.

useState

:React에서 상태 관리를 위해 사용하는 훅(Hook)이다. 함수형 컴포넌트에서 상태를 관리할 수 있게 해주며 useState를 사용하면 상태 변수와 그 변수를 갱신하는 함수를 선언할 수 있다.

useState 를 작성하기 전, 모듈을 import 해줘야한다.

• import React, {useState} from 'react'; 다음 코드를 사용해 불러와줄 수 있다.

첫 번째 요소는 현재 상태 값, 두 번째 요소는 상태를 갱신하는 함수이다.

변수값 더하기, 빼기

const [number,setNumber]=useState(0);

    const onCrease = () => {
        setNumber(prenumber => prenumber+1);
        console.log('+1')
    }
    const deCrease = () => {
        setNumber(prenumber => prenumber-1);
        console.log('-1')

다음과 같이 useState(0)을 사용해 초기 인자값을 0으로 선언한 후 사용가능.

input의 상태 관리

const [text, setText] = useState('');

  const onChange = e => {
    setText(e.target.value);
  };
  const onReset = () => {
    setText('');
  };

text, setText를 아무것도 담기지 않은 공백으로 초기 상태를 지정한 후 useState를 적용. e는 이벤트 객체(event object)이다. e.target은 이벤트가 발생한 DOM 요소, e.target.value는 그 요소의 현재 값

useRef

: 직접 DOM 요소에 접근, 컴포넌트가 다시 렌더링될 때도 값이 유지되며, 상태를 바꾸지 않으면서 값을 저장할 때 사용 import React, { useState, useRef } from 'react'; 다음 모듈을 첫줄에 import해준 후 작성해야함.

const nameInput = useRef();

map

  <div>
    {users.map(user => (
      <User user={user} key={user.id} />
    ))}
  </div>;

|-- /node-backend # Node.js 백엔드 서버의 루트 디렉토리 | |-- /node_modules # Node.js 모듈 | |-- /public # 정적 파일(HTML, CSS, 클라이언트 JavaScript) | | |-- index.html # 메인 프론트엔드 페이지 | | |-- css | | | |-- mystyle.css # 스타일 시트 | | |-- js | | | |-- script.js # 프론트엔드 스크립트 | |-- /routes # API 엔드포인트 정의 | | |-- main.js # 메인 API 스크립트 | |-- app.js # Node.js 애플리케이션 엔트리 포인트 |-- /fastapi-server # FastAPI 서버의 루트 디렉토리 | |-- /app # FastAPI 앱 디렉토리 | | |-- init.py | | |-- main.py # FastAPI 애플리케이션 엔트리 포인트 | |-- requirements.txt # 필요한 Python 패키지 목록 |-- /json-server # JSON 서버의 루트 디렉토리 | |-- db.json

다음과 같이 파일을 만들어 세개의 서버를 동시에 실행시키는 shell script를 작성하여 ./start.sh 명령어를 이용해 실행시킬 것이다. 하지만 ..!!

start.sh파일

#!/bin/bash

# JSON Server 실행 (포트 5000)
cd json-server && json-server --watch db.json --host 192.168.1.74 --port 5000 &

# Node.js 애플리케이션 실행 (포트 8000)
cd ../node-app && node index.js &

# FastAPI 애플리케이션 실행 (포트 3000)
cd ../python && uvicorn app:app --host 192.168.1.74 --port 3000 --reload &

다음과 같이 작성후 shell을 실행 시켰지만,

다음과 같이 상대 폴더로 작성해논 경로를 찾지 못해 폴더가 안열려서 실행이 안되는 문제가 발생하였다.

해결책은 크게 2개가 있다.

sleep 을 걸어주기 start.sh파일

#!/bin/bash

# JSON Server 실행 (포트 5000)
cd json-server && json-server --watch db.json --host 192.168.1.74 --port 5000 &
sleep 2s

# Node.js 애플리케이션 실행 (포트 8000)
cd ../node-app && node index.js &
sleep 2s

# FastAPI 애플리케이션 실행 (포트 3000)
cd ../python && uvicorn app:app --host 192.168.1.74 --port 3000 --reload &
sleep 2s
절대경로로 바꿔 작성하기
start.sh파일
#!/bin/bash

# 스크립트가 있는 디렉토리의 절대 경로를 저장
SCRIPT_DIR=$(cd "$(dirname "$0")" && pwd)

# JSON Server 실행 (포트 5000)
cd "$SCRIPT_DIR/json-server" && json-server --watch db.json --host 192.168.1.74 --port 5000 &

# Node.js 애플리케이션 실행 (포트 8000)
cd "$SCRIPT_DIR/node-app" && node index.js &

# FastAPI 애플리케이션 실행 (포트 3000)
cd "$SCRIPT_DIR/python" && uvicorn app:app --host 192.168.1.74 --port 3000 --reload &

다음과 같은 방법으로 코드를 고쳐 서버 3개가 shell 파일 하나로 정상적으로 작동 되는것을 확인했다.

stop.sh 파일

#!/bin/bash

# JSON Server 프로세스 종료
pkill -f "json-server"

# Node.js 애플리케이션 프로세스 종료
pkill -f "node index.js"

# FastAPI 애플리케이션 프로세스 종료
pkill -f "uvicorn app:app"

다음 코드는 실행시킨 3개의 서버를 한번에 죽이는 코드로 작성하였다. ./stop.sh 명령어를 실행시키면 3개의 서버가 죽는것을 확인할 수 잇다.

profile

? Which package manager would you ❤️ to use? npm ❯ yarn pnpm

보통은 npm이 default로 설정 되어있는데, 위 세개 이외에도 npm, yarn, pnpm, APT, Homebrew, Pip은 대표적인 패키지 관리자이다. 각각 무엇인지 알아보자.

일단 세 개의 공통점은 모두 패키지를 관리해주는 패키지 매니저이다 !

패키지 매니저란?

: 소프트웨어 패키지를 관리하고 설치, 업데이트, 삭제하는 도구

💻 패키지 매니저의 기능은 무엇이 있을까 ?

1. 의존성 관리

2. 버전 관리

3. 패키지 검색 및 공유

4. 스크립트 실행

JavaScript/Node.js

NPM: 가장 일반적인 JavaScript 패키지 매니저. Node.js와 함께 기본으로 제공됩니다. Yarn: 성능과 안정성이 향상된 NPM의 대안. PNPM: 빠른 설치와 효율적인 디스크 사용을 제공.

Python

Pip: Python 패키지 설치를 위한 표준 도구.

Ruby

RubyGems: Ruby 패키지 매니저로, Bundler와 함께 사용되는 경우가 많습니다.

Java

Maven: 의존성 관리와 빌드를 위한 도구. Gradle: 유연성과 성능이 뛰어난 빌드 도구.

macOS

Homebrew: macOS에서 패키지 설치와 관리.

Linux (Debian 기반)

APT: Debian 및 Ubuntu 기반 시스템에서 패키지 관리.

Linux (RPM 기반)

YUM: Red Hat, CentOS, Fedora 등에서 패키지 관리.

이 중 JavaScript/Node.js에서 사용하는 NPM vs Yarn vs PNPM을 비교해보자.

1. npm

: Node.js 생태계의 패키지 매니저로, JavaScript 라이브러리 및 도구를 관리한다.

📗 npm에 대해 설치 명령어 : npm install package-name 설치 삭제 명령어 : npm uninstall package-name 의존성 관리 : package.json, package-lock.json, node_modules와 같은 파일들이 생겨나 의존성을 관리해준다. MacOS 기준 설치 위치 : /usr/local/lib/node_modules

속도가 느리다는 단점이 존재하지만, 넓게 사용 가능하며 현재는 가장 많이 사용하고 있다 할 수 있음

2. Yarn

: Facebook이 주도하여 개발한 JavaScript 패키지 매니저로, NPM의 대안

📒 yarn에 대해 설치 명령어 : yarn add package-name 설치 삭제 명령어 : yarn remove package-name 의존성 관리 : package.json, yarn.lock, node_modules/와 같은 파일들이 생겨나 의존성을 관리해준다. MacOS 기준 설치 위치 : /usr/local/lib/node_modules

빠른속도와 일관성 측명에서 장점을 가지지만 node.js를 설치할때 기본적으로 포함되어 설치되지 않음으로 별도로 설치해야한다는 단점이 존재한다.

3. Pnpm

: 효율적이고 빠른 패키지 설치를 목표로 하는 JavaScript 패키지 매니저

📘 pnpm에 대해 설치 명령어 : pnpm add package-name 설치 삭제 명령어 ㅣ pnpm remove package-name 의존성 관리 : package.json, pnpm-lock.yaml, node_modules/와 같은 파일들이 생겨나 의존성을 관리해준다. MacOS 기준 설치 위치 : ~/.pnpm-store

하드 링크와 symlink를 사용하여 디스크 공간을 절약할 수 있다는 장점이 있지만 호환되지 않는 도구나 프로젝트가 존재할 수 있다는 점에 단점이 있다.

Hello.js 파일

import React from 'react';

function Hello() {
  return <div>Hello</div>;
}

export default Hello;

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

Hello.js 파일에서 선언한 Hello 함수를 App.js에서 사용한다.

App.js 내부에서 style을 정의하고 변수로 받아 사용하는 형식

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = {
    backgroundcolor: 'black',
    color: 'aqua',
    fontSize: '24px',
    padding: '1rem',
  };

  return <div style={style}>{name}</div>
}

export default App;

css를 가져올때는 외부에서 css 파일을 만들고 선언한 후 div className="gray-box"다음과 같이 className으로 가져올 수 있다.

props

Hello.js

import React from 'react';

function Hello(props) {
    return <div>Hello~ {props.name}</div>;
}

export default Hello;

위 코드에서 props를 따로 쓰지 않고 코드를 작성하고 싶을 때는 {}안에 변수를 넣어서 전달 받으면 된다.

function Hello({name}) {
    return <div>Hello~ {name}</div>;
}

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello name="React!!" />
    </div>
  );
}

export default App;

defaultProps 로 기본값 설정

Hello.js

import React from 'react';

function Hello({name, color}) {
    return <div style={{color}}>Hello~ {name}</div>;
}

Hello.defaultProps = {
    name: 'NoName',
};

export default Hello;

다음과 같이 defaultProps를 설정해서 아무값도 입력되지 않을때 출력되는 기본값을 저장해 놓을 수 있다.

props.children

: Wrapper 컴포넌트를 사용하여 테두리와 패딩이 적용된 컨테이너 안에 Hello 컴포넌트들을 렌더링

Wrapper.js

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return <div style={style}>{children}</div>;
}

export default Wrapper;

src/App.js

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="React!!" color="red" />
      <Hello color="pink" />
    </Wrapper>
  );
}

다음 코드를 보면 wrapper.js 파일에서 만든 디자인안에 app.js에서 Hello를 넣어 최종적으로 출력하는 것이다. 이렇게 style을 상속받아 디자인 할 수도있다 !!

이 중 React언어에 대해 알아보자.

React 언어란?

: 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용된다.

React를 사용하기 위한 초기 세팅 명령어

npx create-react-app my-app
cd my-app
npm start

my-app 자리에는 폴더의 이름을 적어주자 !! 이렇게 명령어를 치면 react를 개발하기 위한 초기 세팅이 완료된다.

DOM이란?

React를 공부하다보면 DOM에 대해 자주 언급되는데, DOM에 대해서 알아보자.

DOM이란(Document Object Model)로, 프로그래밍 언어가 이 구조에 접근하고 조작할 수 있도록 하는 인터페이스이다. 문서의 구조를 트리 형태로 표현하며, 각 요소를 객체로 나타낸다. 이때 자바스크립트와 같은 언어를 통해서 문서의 내용과 구조를 동적으로 변경할 수 있다.

즉 프로그래밍 언어는 DOM을 통해 문서의 구조, 스타일, 내용을 조작할 수 있다.

npm start로 실행시킨 브라우저는 다음과 같은 로고가 뜨면 성공 !!

다음과 같은 폴더의 구조가 생기고, 이중 우리는 src폴더를 건들면서 개발하면 댐. rm -rf *.css logo.svg reportWebVitals.js setupTests.js App.test.js 다음의 명령어로 필요하지 않은 파일을 삭제후 app.js 코드 작성 시작.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <div className="App">Hello app.js !!</div>
  }
}

export default App;

npm start로 폴더 안에들어가서 실행시키면 성공적으로 Hello app.js가 뜨는 것을 확인할 수 있다.

npm이란 Node Package Manager의 약자로 NPM을 딴 단어이다. npm은 JavaScript 런타임 환경인 Node.js의 피키지를 관리해주는 패키지 관리자이다. npm을 이용하면 Node.js로 개발 할때 필요한 패키지와 라이브러리를 쉽게 설치하고 관리할 수 있게 도와주는 패키지 관리자이다.

npm을 이용해서 할 수 있는 기능은 무엇이 있을까?

1. 패키지 설치

: npm을 사용해 node.js에서 사용하는 다양한 오픈 소스 패키지를 설치할 수 있다. 1-1. 전역 설치 : 프로젝트 폴더를 따로 만들지 않고 npm install -g 명령어로 설치하면 g옵션은 global 옵션으로 폴더 안에서 한정되지 않고 전역에서 패키지를 사용할 수 있다.

1-2. 로컬 설치 : 프로젝트 폴더를 만들고 폴더 안에서 npm install 의 명령어로 작성하면, 만든 폴더 안에서만 npm의 패키지를 사용할 수 있다.

2. 의존성 관리 : npm init 명령어로 npm을 폴더에서 실행시키면 package-lock.json, package.json, node_modules 폴더가 생성된다. 이때 각각의 역할을 자세히 알아보자

1). package-lock.json : 프로젝트의 의존성 트리를 고정하여 일관성을 보장하고 설치 속도를 향상시킨다.

2). package.json : 프로젝트의 메타데이터와 의존성 정보를 포함하는 주요 설정 파일

3). node_modules : 설치된 모든 패키지와 그 의존성을 저장하는 디렉토리

npm install 명령어를 통해 의존성 관리를 시작하게 되고, package.json 파일이 있을때 npm install 명령어를 사용하면 모든 의존성이 한 번에 설치된다.

3. 스크립트 실행 : npm start 명령어를 실행하면 파일 스크립트에 정의된 명령어가 실행된다.

4. 패키지 퍼블리싱 : npm 패키지를 개발할때 npm 레지스트리에 퍼블리싱한 후 다른 사용자들이 사용할 수 있도록 배포할 수 있는 명령어로 npm publish를 사용할 수 있다.

npm 패키지 배포해보기

https://www.npmjs.com

-> 다음 사이트에 들어가서 회원가입을 한 후 , one time 인증을 마친다.

그 후 배포하고 싶은 폴더 ex). npm-daeun-deploy 와 같이 폴더를 만들고

npm init -y, npm install commander 명령어를 통해 설치를 해준다.

간단한 예제 코드를 쳐서 배포가 성공하는지 확인해 보자.

cli.js 파일

#!/usr/bin/env node

const { program } = require('commander');

program.action(cmd => console.log('✓ Running!!'));

program.parse(process.argv);

package.json 파일

{
  "name": "impelfin-npm-deployment",
  "version": "1.0.1",
  "description": "",
  "main": "index.js",
  "bin" :{
    "log-run" : "bin/cli.js"
  },
  "keywords": [
    "npm-deploy"
  ],
  "author": "",
  "license": "MIT",
  "files": [
    "cli"
  ],
  "dependencies": {
    "commander": "^11.1.0"
  }
}

npm link, log-run 명령어로 연결한 후

npm login 명령어로 터미널에서 npm에 로그인 성공 한 후 이때 Logged in as <아이디> on https://registry.npmjs.org/. 다음과 같은 출력이 나오면 성공 !!

npm publish 배포 후

npm notice
npm notice 📦  <package 이름>@1.0.1
npm notice === Tarball Contents ===
npm notice 147B bin/cli.js
npm notice 304B package.json
npm notice === Tarball Details ===
npm notice name:          <package 이름>
npm notice version:       1.0.1
npm notice filename:      <package 이름>-1.0.1.tgz
npm notice package size:  412 B
npm notice unpacked size: 451 B
npm notice shasum:        d1b84699a43d1b0a9ec7f5cdc552640b03e9e631
npm notice integrity:     sha512-jN2BoFvob2fWo[...]Qb/s+2K1zOfPQ==
npm notice total files:   2
npm notice
npm notice Publishing to https://registry.npmjs.org/
+ <package 이름>@1.0.1

npm install <package 이름>@ 을 이용해 설치에 성공하는 것을 확인할 수 있다.