38. React 코드 오류 정리3

Mission: React 코드 오류 정리 및 해결 방법

에러:
Cannot read properties of undefined (reading 'title')

원인:
객체의 속성이나 배열의 요소를 읽으려고 할 때, 해당 객체 또는 배열이 정의되어 있지 않거나 값을 가지고 있지 않을 때 발생한다.
즉, 'post' 객체가 정의되지 않았거나 'post.title' 속성이 없는 경우에 발생한다.

해결방안:

• 'post' 객체가 정의되어 있는지 확인하고, 해당 속성이 존재하는지 확인한 후, 접근하도록 코드를 수정한다.

// 예시 1 - post 객체가 정의되지 않은 경우
const post = undefined;
console.log(post.title); // TypeError: Cannot read properties of undefined (reading 'title')
// 해결 - 객체가 정의되었는지 확인 후 접근
if (post && post.title) {
  console.log(post.title);
} else {
  console.log("post 객체 또는 title 속성이 존재하지 않습니다.");
}
// 예시 2 - post 객체는 정의되어 있지만 title 속성이 없는 경우
const post = { content: "Lorem ipsum dolor sit amet." };
console.log(post.title); // TypeError: Cannot read properties of undefined (reading 'title')
// 해결 - title 속성이 존재하는지 확인 후 접근
if (post && post.title) {
  console.log(post.title);
} else {
  console.log("title 속성이 존재하지 않습니다.");
}

에러:
EACCES - permission denied, mkdir '/usr/local/lib/node_modules/typescript'

원인:
1. 관리자 권한 없이 전역 설치를 시도하는 경우
2. npm의 노드 모듈 저장 위치에 대한 권한 문제로 인해 설치에 실패하는 경우

해결방안
1. 관리자 권한으로 실행하기
sudo 명령어를 사용하여 npm을 관리자 권한으로 실행하여 설치를 시도할 수 있다. 하지만 sudo를 사용하는 것은 보안상 권장되지 않으므로 가능하면 다른 방법을 찾아보는 것이 좋다.

sudo npm i typescript -g

2. npm의 노드 모듈 저장 위치 변경
   npm의 노드 모듈 저장 위치를 사용자 계정에 속하는 디렉토리로 변경하여 권한 문제를 해결할 수 있다. 아래 명령어를 사용하여 저장 위치를 변경하고, 시스템 PATH에 해당 디렉토리를 추가한다.

npm config set prefix ~/.npm-global

그리고 ~/.npm-global/bin을 시스템 PATH에 추가한다. 이를 위해 .bashrc 파일이나 .zshrc 파일에 아래와 같은 내용을 추가한다.

export PATH=$HOME/.npm-global/bin:$PATH