이모저모 개발 블로그

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

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

1. Component* 중에서 CSS가 중복되는 부분을 추출하여 Wrapper Component로 활용

* Component: 화면에 표시되는 HTML(정확히는 JSX) 코드를 반환하는 JS Function

2. 기존 div wrapper를 Card wrapper로 변경

🚨 Contents가 보이지 않는 문제 발생

3. Card Component의 return에서 <div></div> 사이에 contents가 없으므로 props를 활용하여 내용 추가

children을 활용하여, <Card></Card> 안의 Content를 호출

{props.children}

🚨 CSS가 깨지는 문제 발생

4. className을 활용하여 CSS 고치기

화면에 load된 코드를 확인해보면, Card component로 감싸진 이후 className이 card로 변경되었음

→ className 변경에 따른 CSS 깨짐

→ className card에 기존 className 추가

⭐ Card Component에 값을 전달하지 않아도 props를 사용할 수 있는 이유

 React는 컴포넌트를 생성하고 렌더링할 때 해당 컴포넌트에 전달된 속성들을 객체 형태로 props 변수에 자동으로 전달
 = ExpenseItem component를 객체 형태의 props로 Card component에 전달

5. 결과

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

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

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

기존 Home.js

변경 Home.js

- hover event 추가: 포스터 이미지에 마우스 hover 시, 영화 제목 Load

기존 Detail.js

변경 Detail.js

- DOWNLOAD Btn에 torrent 파일 경로 데이터 주입

 - WATCH NOW Btn에 API 제공 사이트 경로 데이터 주입

Movie.js

Movie.module.css

Detail.js

Detail.module.css

소스 코드

🔗 HJ0216/TIL/REACT

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

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

1. Array.prototype.map(callbackFn, thisArg)

: 호출 배열의 모든 요소에 제공된 함수를 호출한 결과로 채워진 새 배열을 생성하는 함수

2. Array.prototype.find(callbackFn, thisArg)

: 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환, 만족하는 값이 없으면 undefined 반환

3. Array.prototype.findIndex(callbackFn, thisArg)

: 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소의 인덱스를 반환, 만족하는 요소가 없으면 -1 반환

4. Array.prototype.filter(callbackFn, thisArg)

: 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소 반환

5. Array.prototype.reduce(callbackFn, initialValue)

: 배열의 각 요소에 대해 콜백 함수를 순서대로 실행하여 이전 요소에 대한 계산의 반환값 전달, 배열의 모든 요소에 대해 감속기를 실행한 최종 결과로 단일 값을 반환

6. Array.prototype.concat(...value(optional))

: 두 개 이상의 배열 병합, 기존 배열의 변경없이 새 배열 반환

7.  Array.prototype.slice(start(optional), end(optional))

: 기존 배열의 변경없이 새 배열로 시작값(포함)부터 끝값(제외)까지의 값으로 이뤄진 새로운 배열 반환

8. Array.prototype.splice(start, deleteCount(optional), item(optional))

:  기존 요소를 제거 또는 바꾸거나 새 요소를 제자리에 추가하여 변경된 배열을 반환

참고 자료

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

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

Destructuring: 구조분해할당

1. 배열(Arrray)

2. 객체(Object)

참고 자료

🟨 기본 환경: IDE: VS code, Language: JavaScript

발생 Error

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

🚨 다음과 같은 Error 발생

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

발생 원인

클래스 상속 후, 자식 클래스의 생성자에서 super()를 호출하지 않음

⭐ constructor를 생략할 경우, 자동으로 super()가 생성되지만, 기재할 경우에는 super()를 작성해야 함

해결 방법

상위 클래스의 메서드나 필드에 접근하고자 할때 super 키워드를 사용해야하므로 하위 클래스의 constructor에서 super()를 호출하여, 참조 에러를 제거

참고 자료