작업 상태

express로 만든 node server.js를 서버에서 실행할때 나온 에러입니다.
 
에러 메시지 

Error: listen EACCES: permission denied 0.0.0.0:443

원인

- 1024 미만의 포트는 특권 포트로 간주되며 루트 또는 슈퍼유저 권한을 가진 프로세스만 바인드할 수 있습니다. 
포트 80, 443에 바인드하려는 경우 프로세스가 충분한 권한을 가지도록 해야합니다.

처리

- 관리자 권한으로 node에게 포트 접근 권한을 부여합니다.

 

]# setcap 'cap_net_bind_service=+ep' /usr/bin/node

~$ getcap /usr/bin/node
/usr/bin/node = cap_net_bind_service+ep

참고

 

setcap은 파일에 특정 권한을 부여하는 명령어입니다.


-e : effective  효력 부여
-p : Permitted  허용
-i : Inheritable  권한 상속 여부(execve)

-r: is used to remove a capability set from a file.

cap_net_bind_service : 특정 포트에 대한 바인딩 권한을 부여
cap_chown: 파일 소유자 변경 권한
cap_dac_override: 파일 권한 무시 권한
cap_fowner: 파일 소유자 변경 권한
cap_setgid: 그룹 ID 변경 권한
cap_setuid: 사용자 ID 변경 권한
cap_sys_admin: 시스템 관리 권한
cap_sys_chroot: chroot() 시스템 호출을 사용하여 디렉토리를 변경할 수 있는 권한
cap_sys_ptrace: 다른 프로세스를 추적할 수 있는 권한

작업 상태

- react 코드를 tsx코드로 변환하던 중에 발생했습니다.
 


에러 메시지 

- Property 'focus' does not exist on type 'never'.ts(2339)

    const liRef = useRef(null);
...
    useEffect(() => {
        if (qna && qna.id === question.id && liRef.current) {
            liRef.current.focus();  //문제 발생 메시지
        }
    }, [qna, question.id]);
    return (
        <li ref={liRef} tabIndex={0}

원인

- 타입스크립트가 해당 요소에 대한 속성을 인식하지 못하는 것을 나타냅니다. 해당 요소의 타입을 명시적으로 지정하거나 해당 요소에 대한 타입 정의를 확실히 하는 것이 필요합니다. 
- useRef를 사용할 때 타입을 명시하지 않으면 타입추론이 이루어지지 않아서 never 타입으로 간주될 수 있습니다.


처리

    const liRef = useRef<HTMLLIElement>(null);


참고

문서 객체 모델(DOM) - Web API | MDN (mozilla.org)

 

문서 객체 모델(DOM) - Web API | MDN

문서 객체 모델(DOM)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로

developer.mozilla.org

never 타입은 절대 발생할 수 없는 타입을 나타냅니다. 예를 들어, never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰입니다. 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 될 수 있습니다

소개 · GitBook (typescript-kr.github.io)

 

TypeScript 한글 문서

TypeScript 한글 번역 문서입니다

typescript-kr.github.io

 

작업 상태

- vscode에서 express 작업중이었습니다.

- vscode node-terminal 설정 후 사용시 발생한 현상입니다.

        {
            "command": "npm run dev",
            "name": "client 3500",
            "request": "launch",
            "type": "node-terminal"
        }

  
에러 상황

원인

- 근본 원인은 확인하지 못했고 현상에서 원인은

1. nodemon은 변경사항을 확인하고 재시작합니다.

2. vscode에서 디버그 모드 시작시 설정파일을 변환해서 사용하는듯 합니다.

3. vscode에서 vite.config.js 이파일을 잠시 temp파일로 만들고 삭제하려 합니다. > nodemon이 변화감지 후 재시작 > vscode로 변화감지후 설정 재변경을 위한 파일 생성을 서로 사이좋게 주고받습니다.


처리

- nodemon에서 임시파일 변경 감지를 제거합니다.

 

기존 package.json설정입니다.

    "scripts": {
        "dev": "cross-env NODE_ENV=development nodemon server.js",

수정후

    "scripts": {
        "dev": "cross-env NODE_ENV=development nodemon server.js --ignore './vite.config*.mjs",

참고

 

nodemon을 사용할 때 자주 쓰이는 주요 옵션들은 다음과 같습니다.

-e, --ext [ext]: 모니터링할 파일의 확장자를 설정합니다. 예를 들어, -e js,hbs와 같이 사용하면 확장자가 .js와 .hbs인 파일을 모니터링합니다.
-i, --ignore [pattern]: nodemon이 모니터링하지 않을 파일의 패턴을 설정합니다. 정규 표현식으로 작성할 수 있습니다.
-w, --watch [path]: 모니터링할 디렉토리를 설정합니다. 여러 개의 경로를 설정할 수 있습니다.
-V, --version: nodemon의 버전 정보를 출력합니다.
-h, --help: 도움말을 출력합니다.

 

nodemon --help 치면 좀더 자세히 나옵니다.

작업 상태

- 기존에 react에서 사용하던 코드를 vite사용 환경으로 포팅하던중 .env 에서 설정한 변수 사용중 발생했습니다.

- react만 사용할때는 정상 작동했던 코드입니다.

 

.env

REACT_APP_LOG_LEVEL=debug

  

const apiLogLevel = process.env.REACT_APP_LOG_LEVEL; //에러가 발생한 장소 입니다


에러 메시지 

Uncaught ReferenceError: process is not defined


원인

- vite 쪽 환경으로 이동하면서 발생한 문제였습니다.

처리

-  vite 에서 환경변수 관리하는 형태로 변경합니다.

- vite 쪽에서 VITE_ prefix 사용을 권장합니다.

const apiLogLevel = import.meta.env.VITE_APP_LOG_LEVEL;

 

.env

VITE_APP_LOG_LEVEL=debug

 

또는

npm install dotenv 이후 

import dotenv from 'dotenv';
dotenv.config();

로 하면 동작하기는 합니다.

 


참고

--------------------------React

React에서 .env 환경 변수를 사용하기 위해서는 몇 가지 조건이 있습니다.

환경 변수 이름은 반드시 REACT_APP_으로 시작해야 합니다.
환경 변수는 프로젝트 루트 디렉토리에 위치한 .env 파일에 선언해야 합니다.
위 두 가지 조건을 만족하면, React 애플리케이션에서 process.env.REACT_APP_ 접두어를 사용하여 .env 파일에 선언된 환경 변수에 접근할 수 있습니다.

 

.env 파일명 

<projectroot>/.env
REACT_APP_LOG_LEVEL=debug

 

react.js에서 사용예시

const apiLogLevel = process.env.REACT_APP_LOG_LEVEL;

 

--------------------------Vite

Vite에서 .env 환경 변수를 사용하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

.env 파일을 프로젝트 루트 디렉토리에 위치시킵니다.
.env 파일에서 사용할 환경 변수를 선언합니다. 변수 이름은 VITE_으로 시작해야 합니다.

 

/.env
VITE_APP_LOG_LEVEL=debug

 

vite 환경에서 사용예시

const apiUrl = import.meta.env.VITE_APP_LOG_LEVEL;

 

주의할점은, Vite에서는 .env.local, .env.development, .env.production과 같은 환경 변수 파일도 지원합니다. 이러한 파일을 사용하면, 개발 환경과 프로덕션 환경에서 각각 다른 환경 변수 값을 설정할 수 있습니다.

 

보통은 참조할점인데. react에서 이동하는 상황이어서  .env, .env.development, .env.production 이 세개의 파일이 존재했는데, vite에서는 설정값에 따라 알아서 다른 환경변수 파일을 불러옵니다.

 

Vite의 환경 변수와 모드 | Vite (vitejs-kr.github.io)

 

Vite

Vite, 차세대 프런트엔드 개발 툴

vitejs-kr.github.io

 

+ Recent posts