러아니푸의 기록

1.  Node.js 설치

https://nodejs.org/en/download

2. Visual Studio Code 설치

* os에 맞게 잘 선택해서 설치하시길 바랍니다.

https://code.visualstudio.com/

3. Visual Studio Code에서 프로젝트 관리 폴더 열기

파일 > 열기 > 미리 생성해둔 폴더 열기(react)

4.  터미널에 프로젝트 생성 명령어 입력

터미널 > 새 터미널 > 열린 터미널에 명령어 입력

npx create-react-app 프로젝트 이름

5. 프로젝트 실행

생성된 프로젝트 폴더로 다시 이동합니다. ( 파일 > 열기 > 방금 생성된 프로젝트 폴더 )

터미널을 다시 열고 실행 명령어를 입력합니다.

npm run start

127.0.0.1:3000 주소로 프로젝트가 열립니다. (localhost:3000도 동일한 주소라고 생각하시면 됩니다)

Would you like to run the app on another port instead? (Y/n)

위와 같은 문구가 뜬 경우에는 프로젝트에 설정된 실행 포트번호를 사용하고 있는 프로젝트가 있다는 뜻입니다.

설정 변경이 없었다면, 3000번 포트번호를 사용중인 프로젝트가 있을 수 있습니다.

Y 입력시 : 프로젝트 실행 포트번호가 아닌 다른 포트번호로 프로젝트를 실행시켜줍니다.

n 입력시 : 취소

6. 프로젝트 종료

프로젝트를 종료하고 싶다면 터미널에 Ctrl+C를 입력하시면 됩니다.

img {
 -webkit-user-drag: none;
 -khtml-user-drag: none;
 -moz-user-drag: none;
 -o-user-drag: none;
 user-drag: none;
 }

위 코드를 추가하여 간단하게 이미지 드래그를 막을 수 있습니다.

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

// 페이지 번역
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationKr from "./translation/kr/translation.json";
import translationEn from "./translation/en/translation.json";

i18n.use(initReactI18next).init({
    resources: {
        kr: translationKr,
        en: translationEn,
    },
    fallbackLng: "kr",
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>);

index.js 파일에 다국어 처리를 위해 i18n 설정을 추가합니다.

import { withTranslation } from "react-i18next";

export class Home extends React.Component {
	...
}
export default withTranslation()(Home);

 
클래스형 컴포넌트에서는 props로 다국어 문구를 받을 수 있도록 구성할 수 있습니다.
react-i18next 라이브러리에서 지원하는 withTranslation HOC로 컴포넌트를 감싸준 후 export default로 내보내도록 작성합니다.

 
* HOC(Higher Order Component) : 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다.

import { withTranslation } from "react-i18next";

export class Home extends React.Component {
	...

	render(){
	  const { t } = this.props;

	  return (
		<>
		  <div>{t('type')}</div> {/* "kr" or "en" */}
		  <div>{t('home.welcome')}</div> {/* "반갑습니다!" or "Welcome!" */}
		</>
	  )
 	}
}
export default withTranslation()(Home);

props를 통해  t 함수를 받아올 수 있고, 해당 함수로 연결시켜둔 다국어 문구들을 불러올 수 있습니다.
함수 매개변수로는 연결되어있는 각각의 json 언어 파일에서 translation 안에 있는 데이터 키값을 넣어주면 됩니다.
 
 
 

import { withTranslation } from "react-i18next";

export class Home extends React.Component {
	...
    
    // 지원 언어를 변경하는 함수
    changeLanguage = (languageType) => {
    	const { i18n } = this.props;
        i18n.changeLanguage(languageType);
    }

	render(){
	  const { t } = this.props;

	  return (
		<>
		  <div>{t('type')}</div> {/* "kr" or "en" */}
		  <div>{t('home.welcome')}</div> {/* "반갑습니다!" or "Welcome!" */}
          
                  <button onClick={() => this.changeLanguage('kr')}>
                      t('language.kr')
                  </button>
                  <button onClick={() => this.changeLanguage('en')}>
                      t('language.en')
                  </button>
		</>
	  )
 	}
}
export default withTranslation()(Home);

현재 지원하는 언어를 변경하고 싶다면 t 함수와 마찬가지로 props를 통해  in18 인스턴스를 받아와서 사용할 수 있습니다.
i18n.changeLanguage('kr') 과 같은 코드를 실행해주면, 현재 지원하는 언어가 kr(한국어) 값으로 변경됩니다.
 
 
 
https://react.i18next.com/getting-started

https://react.i18next.com/latest/withtranslation-hoc

📜 오류 발생

redux-toolkit을 클래스형 컴포넌트에서 사용하기 위해 'react-redux'에서 제공되는 connect를 사용하게 되었는데 아래와 같은 오류가 발생하였다.

usesyncexternalstore is not a function

해결 방법을 찾아보니 react 버전이 낮아서 발생하는 오류일 가능성이 있다고 해서 버전을 업그레이드 해주었더니 해결되었다.

기존 버전 ^17.0.1 -> 업그레이드 버전 ^18.1.0

"react" : "^18.1.0",
"react-dom": "^18.1.0",

📜 오류 발생

redux-toolkit을 사용하기 위해 라이브러리를 설치했는데 프로젝트 실행시 아래와 같은 오류가 발생하였다.

./node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js
SyntaxError: /Users/otdeal/Desktop/projects/otdeal_projects/robomd/frontend/node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js: Missing class properties transform.

여러가지 라이브러리를 설치하면서 꼬이거나 오류가 발생했을까 싶어서,

node_modules를 지우고 package.json의 모듈을 다시 설치해주기 위해 'yarn' 명령어를 실행했는데 아래와 같은 오류가 발생했다.

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error expect@29.7.0: The engine "node" is incompatible with this module. Expected version "^14.15.0 || ^16.10.0 || >=18.0.0". Got "16.8.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

에러 메세지를 확인하니 node 버전 문제로 인해 발생하는 오류로 확인되었다.

현재 사용하고 있던 노드 버전이 많이 낮은 상태였기 때문에 과감하게 노드 버전을 LTS 버전으로 변경하기로 하였다.

노드 버전을 올려주니 문제가 해결되었다.

https://nodejs.org/en/download

특정 버전으로 설치를 원한다면 아래 주소에서 찾아볼 수 있다.

https://nodejs.org/download/release/

📜 오류 발생

yarn 버전 업그레이드를 할 일이 생겨서 'brew upgrade yarn' 명령어를 실행했는데 오류가 발생하였다.

Error: 
  homebrew-cask is a shallow clone.
To `brew update`, first run:
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow
This command may take a few minutes to run due to the large size of the repository.
This restriction has been made on GitHub's request because updating shallow
clones is an extremely expensive operation due to the tree layout and traffic of
Homebrew/homebrew-core and Homebrew/homebrew-cask. We don't do this for you
automatically to avoid repeatedly performing an expensive unshallow operation in
CI systems (which should instead be fixed to not use shallow clones). Sorry for
the inconvenience!

에러 메세지에 'brew update'를 실행하기 위해서 어떤 명령어를 입력해야하는지 친절하게 알려주고있다.

아래 명령어들을 차례대로 실행해주어 brew를 업데이트 한다.

git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow

brew update

이후, yarn 버전 업그레이드를 위해 'brew upgrade yarn' 명령어를 다시 입력해주었더니 정상적으로 업그레이드 되었다.