개발 노트

https://velog.io/@s_soo100/Next.js-13Next.js-13.2%EB%B2%84%EC%A0%BC%EC%97%90-Next-auth-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

https://next-auth.js.org/getting-started/client

Node.js 자식 프로세스(Child Process): 알아야 할 모든 것 (freecodecamp.org)

1. spawn()

• 용도: 새로운 프로세스를 생성하고, 표준 입력/출력 스트림을 통해 데이터 전송.
• 특징:
  • 비동기적으로 작동하며, 데이터 스트림을 처리할 수 있음.
  • 대용량 데이터 전송에 유리.
• 사용 예:
   

  const { spawn } = require('child_process');
  const child = spawn('ls', ['-lh', '/usr']);
  
  child.stdout.on('data', (data) => {
      console.log(`stdout: ${data}`);
  });
  
  child.stderr.on('data', (data) => {
      console.error(`stderr: ${data}`);
  });
  
  child.on('close', (code) => {
      console.log(`자식 프로세스가 ${code} 코드로 종료됨`);
  });
  

2. exec()

• 용도: 쉘 명령어를 실행하고, 결과를 콜백 함수로 반환.
• 특징:
  • 명령어의 실행 결과를 버퍼에 저장하여 한 번에 반환.
  • 짧고 간단한 명령어 실행에 적합.
  • 결과의 크기에 제한이 있음.
• 사용 예:
   

  const { exec } = require('child_process');
  exec('ls -lh /usr', (error, stdout, stderr) => {
      if (error) {
          console.error(`오류: ${error}`);
          return;
      }
      console.log(`stdout: ${stdout}`);
      console.error(`stderr: ${stderr}`);
  });
  

3. execFile()

• 용도: 파일 실행을 위한 전용 메서드.
• 특징:
  • 쉘을 거치지 않고 직접 실행.
  • 보안상 유리하며, 인자 전달이 간편.
  • 실행 파일과 인자를 배열로 전달.
• 사용 예:
   

  const { execFile } = require('child_process');
  execFile('node', ['-v'], (error, stdout, stderr) => {
      if (error) {
          console.error(`오류: ${error}`);
          return;
      }
      console.log(`stdout: ${stdout}`);
      console.error(`stderr: ${stderr}`);
  });
  

4. fork()

• 용도: Node.js의 자식 프로세스를 생성하는 데 특화.
• 특징:
  • 새로운 V8 인스턴스를 생성하고, 부모 프로세스와 IPC(Inter-Process Communication)를 지원.
  • 주로 Node.js 애플리케이션에서 사용.
• 사용 예:
   

  const { fork } = require('child_process');
  const child = fork('child.js');
  
  child.on('message', (message) => {
      console.log(`자식 프로세스에서 메시지: ${message}`);
  });
  
  child.send('안녕하세요, 자식 프로세스!');

연결 관련(mssql & mysql & mqtt)

• 처음부터 인터넷 연결이 안되는 상황
• 중간부터 인터넷 연결이 안되는 상황
• 쿼리 실행 실패 시 문자보내는 로직 테스트
• 쿼리 자체에 문자열 에러인 경우
• 쿼리 실행도중에 연결이 끊어진 경우
• failSql 재전송 관련

• connection관련
• 행 시 connection갯수 확인 (실행 직후/ 10분 이상 / 1시간 이상)

• db 업데이트관련
• 데이터 전체적으로 수정후 정상적으로 업로드 되는지 각 컬럼별로 확인

• fs모듈 관련
• 저장위치 확인 및 경로 없을 때 정상적으로 파일 및 디렉토리 생성되는 지 확인

• SMS관련
• 원하는 상황에 문자가 정상적으로 전송되는지 확인(문자내용이 잘리지 않는지도 확인)
• 원하는 시간 간격으로 정상적으로 전송되는지 확인(보통 콘솔로 확인)

로그 생성 문자열 패턴

• 파일명-함수명-변수명or내용
• 💥💥💥💥💥( 중요!!! ) 최종 결과 저장 시 검색에 용이한 key문자열 삽입💥💥💥💥💥💥

테스트 환경

- OS: window

- pm2 version: 5.3 / 5.4

상황

• node로 실행 시 정상적으로 동작하지만 pm2로 실행 시 host에 대한 access deny가 발생하면서 연결이 되지 않는 오류가 발생
• node로 실행 시 정상적으로 동작한다는 것은 DB access자체에는 문제가 없음
• 다른 프로젝트에서는 dotenv를 사용하지 않아서 pm2로 실행시켜도 정상적으로 동작함
• 하드코딩으로 테스트 -> 정상 실행 -> .env파일을 가지고오지 못하는 문제가 있는 것을 확인

해결

• .env파일을 정상적으로 불러오기 위해서는 실행시킬 때 그 경로로 이동해서 실행해야 함
• pm2는 실행시키는 위치 자체가 중요하기 때문에 제 위치에서 실행시키지 않으면 경로를 제대로 인식하지 못함
• bat 파일로 실행 시 실행위치 지정이 중요함

1. npm run build:worker
- mqttWorker.ts 에서 mqttWorker.built.js로 만들기위한 build로 git으로 가져왔다면 mqttWorker.built.js가 이미 생성되어있어서 굳이 build를 하지 않아도 됨

- 하지만 mqttWorker.ts를 수정한경우 build를 해주어야하는데 이때 src\app\layout.tsx의 getPrefLangCookie와 충돌하여 정상적으로 build가 이루어지지 않음

----> 이때 처리방법 getPrefLangCookie과 관련된 항목들 주석처리

//src/app/layout.tsx

// 쿠키 가지고오는 부분 build:worker시 주석
export const getPrefLangCookie = () => {
  return cookies().get('googtrans')?.value ?? 'ko';
};

//return부분 아래와 같이 변경
 <Layout settingData={parsedSettingData} svMssqlData={farmsArray}>

//src/layout/Layout.tsx
type LayoutProps = {
  children?: React.ReactNode;
  settingData: SettingsPayload;
  //langCookie: string;
  svMssqlData: FarmInfo[];
};

const Layout: React.FC<LayoutProps> = ({ children, settingData, svMssqlData }) => {

//return부분 Nav에 langCookie를 전달하는부분 삭제

<Nav  />

//src/layout/Nav.tsx

//NavProps 제거
//type NavProps = {
 // langCookie: string;
//};

const Nav: React.FC = () => {


//return부분에서 langCookie대신 ko로 기본값 사용

//<GoogleTranslate prefLangCookie={langCookie} />
<GoogleTranslate prefLangCookie={'ko'} />

2. npm run build

- .next 폴더삭제/ .next.zip삭제 후 src\app\layout.tsx에서 meta tag의 날짜 변경

- npm run build 후 .next 폴더를 .next.zip으로 압축

- git 에 저장 후 배포

쿠키관련 사용부분 업데이트

  //언어설정값에 따라 useState 변경
  const handleChange = (value: string) => {
    const lang = "/auto/" + value;
    setLangCookie(lang);
  };

 앞쪽에 auto를 붙여서 사용하는 코드로  변경

  //langCookie값 변화에 따라 실행시키는 이벤트 (언어감지)
  useEffect(() => {
    const splitLangCookie = langCookie.split("/")[2];
    if (splitLangCookie === "ko") {
      resetGoogleTranslate();
    } else {
      const element = document.querySelector<HTMLSelectElement>(".goog-te-combo");
      if (element) {
        element.value = splitLangCookie;
        element.dispatchEvent(new Event("change"));
      }
    }
  }, [langCookie]);

사용시에는  split으로 잘라서 사용

<div>
      <div id="google_translate_element" style={{ visibility: "hidden", width: "1px", height: "1px" }}></div>
      <LanguageSelector onChange={handleChange} value={langCookie.split("/")[2]} />
      {langCookie.split("/")[2] !== 'ko' && 
      <Script
        src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        strategy="afterInteractive"
      />
      }
    </div>

 return부분도  잘라서 사용하는 코드로 변경

export default function LanguageSelector({ onChange, value }: LanguageSelectorProps) {
  return (
    <Select
      className='w-[70px] py-0.5'
      onChange={onChange}
      value={value ? value : 'ko'}
    >
      {languages.map(lang => (
        <Option key={lang.value} value={lang.value}>
          <p className='flex flex-row items-center'>
            <img src={lang.src} alt={lang.label} className="w-6 h-4" />
            {/* {lang.label} */}
          </p>
        </Option>
      ))}
    </Select>
  );
}

LanguageSelector에서 값이 없을 시 'ko'로 처리하도록 변경

import { cookies } from 'next/headers';

export const getPrefLangCookie = () => {
  return cookies().get("googtrans")?.value ?? "ko";
};


return(
   <Layout settingData={parsedSettingData} langCookie={langCookie}>{children}</Layout>
)

서버컴포넌트 내에서 쿠키값 가져온 뒤 prop으로 전달