이모저모 개발 블로그

⚛️ 기본 환경: IDE: VS code, Language: React

발생 Error

React를 실행하고자, 터미널에서 다음 명령어를 입력할 경우,

🚨 다음과 같은 Error 발생

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Local\npm-cache\_logs\2023-05-24T01_17_19_007Z-debug-0.log 

발생 원인

React 파일이 존재하지 않은 경로에서 npm 설치 시도

해결 방법

React 파일이 존재하지 폴더로 이동 후 npm 설치

+ 올바른 경로에서 npm install 시, 동일한 error가 발생 했을 경우,

참고 자료

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

⚛️ 기본 환경: IDE: VS code, Language: React

export: 내보내기

🚨 클래스나 함수를 내보낼 땐 세미콜론을 붙이지 않음

🚨 선언과 분리하여, 최상단 또는 최하단에 export문 사용 가능

export default: '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타낼 수 있음

→ default를 붙여서 모듈을 내보내면 중괄호 {} 없이 모듈을 가져올 수 있음

    🚨 import 시, 객체의 이름을 export 대상의 이름과 무관하여 명명할 수 있음

import: 가져오기

🚨 가져오고 싶은 대상을 {...} 목록 안에 작성하면 한 줄에 작성할 수 있음

🚨 export 대상의 이름으로 import를 해야함(다르게 지정하고자 할 경우, as 사용)

+ as를 사용하여, 객체 행태로 import

참고 자료

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

⚛️ 기본 환경: IDE: VS code, Language: React

화살표 함수(Arrow Functions) 표현식

1. 기본

2. 인자가 1개일 경우

: 인자 소괄호() 생략 가능

🚨 인자가 1개도 없는 경우, 빈 소괄호 필수 기재

🚨 인자가 2개 이상인 경우, 소괄호 필수 기재

3. 함수 내용이 return 밖에 없을 경우

: 본문 중괄호{} 생략 가능

🚨 {} 생략 시, return도 함께 생략

+ Web Editor(For HTML, CSS, JavaScript)

이 글은 노마드코더의 [ReactJS로 영화 웹 서비스 만들기]를 수강하며 정리한 글입니다.

⚛️ 기본 환경: IDE: VS code, Language: React

이어진 글: [ReactJS_영화_웹] #7 MOVIE APP

기존 Home.js: 왼쪽 화면이 세로로 반복 

기존 Detail.js: 오른쪽 화면(영화 제목 클릭 시, 이동)

슬라이드쇼를 만들기 위한 라이브러리 설치

npm i react-slick

* 간단한 사용방법은 react-slick 사이트 참조

슬라이드쇼가 적용된 Home.js

Home.js

home.css

Movie.js

Movie.module.css

소스 코드

🔗 HJ0216/TIL/REACT

참고 자료

⚛️ 기본 환경: IDE: VS code, Language: React

발생 Error

React에서 다음 Source Code를 실행할 경우,

⚠️ 다음과 같은 Error 발생

TypeError: Cannot read property 'movie' of undefined

발생 원인

getMovie()에 사용되는 API JSON데이터 구조는 다음과 같음

해당 객체 전체를 json으로 받고 rating을 추출하고자할 경우, data.data.movie.rating으로 접근할 수 있으나 객체가 로드되지 않은 상태에서 접근 시 TypeError 발생

해결 방법

1. ?.(Optional Chaining) 연산자를 사용하여 객체 체인 중간에 있는 속성 또는 메서드에 접근하기 전에 해당 값이 존재하는지 확인하고, 값이 존재하지 않을 경우에 undefined를 반환하여,TypeError를 방지

* ?.(Optional Chaining) 연산자: 값이 존재하지 않을 가능성이 있는 중첩된 객체나 배열의 속성 또는 메서드에 안전하게 접근할 수 있도록 도와줌(API 비동기 작업 중 데이터가 로드되면 실제 값을 반환하고, 로드되지 않았을 때는 undefined를 반환)

2. 객체를 크게 잡을 경우, 단계를 깊이 들어가야하므로 setData의 범위를 JSON의 일부(json.data.movie)로 한정