본문 바로가기

JavaScript73

[ReactJS_Complete] Destructuring 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React Destructuring: 구조분해할당 1. 배열(Arrray) 2. 객체(Object) 참고 자료 06. 비구조화 할당 (구조 분해) 문법 · GitBook 06. 비구조화 할당 (구조분해) 문법 이번에는 1장 섹션 6 에서도 배웠던 비구조화 할당 문법을 잘 활용하는 방법에 대해서 알아보겠습니다. 이전에 배웠던것을 복습해보자면, 비구조화 할당 문법 learnjs.vlpt.us 2023. 5. 24.
[해결 방법] Uncaught ReferenceError: Must call super constructor 🟨 기본 환경: 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 키워드를.. 2023. 5. 24.
[해결 방법] A complete log of this run can be found in: ⚛️ 기본 환경: 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가 발생 했을 경우, 참고 자료 [Npm Error] A complete .. 2023. 5. 24.
[ReactJS_Complete] Exports and Imports 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React export: 내보내기 🚨 클래스나 함수를 내보낼 땐 세미콜론을 붙이지 않음 🚨 선언과 분리하여, 최상단 또는 최하단에 export문 사용 가능 export default: '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타낼 수 있음 → default를 붙여서 모듈을 내보내면 중괄호 {} 없이 모듈을 가져올 수 있음 🚨 import 시, 객체의 이름을 export 대상의 이름과 무관하여 명명할 수 있음 import: 가져오기 🚨 가져오고 싶은 대상을 {...} 목록 안에 작성하면 한 줄에 작성할.. 2023. 5. 24.
[ReactJS_Complete] Arrow Functions 이 글은 [[한글자막] 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) JS Bin Sample of the bin: jsbin.com 2023. 5. 23.
[ReactJS_영화_웹] #7 MOVIE APP UPGRADE(HOME) 이 글은 노마드코더의 [ReactJS로 영화 웹 서비스 만들기]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 이어진 글: [ReactJS_영화_웹] #7 MOVIE APP 기존 Home.js: 왼쪽 화면이 세로로 반복 기존 Detail.js: 오른쪽 화면(영화 제목 클릭 시, 이동) 슬라이드쇼를 만들기 위한 라이브러리 설치 npm i react-slick * 간단한 사용방법은 react-slick 사이트 참조 Neostack The last react carousel you will ever need react-slick.neostack.com 슬라이드쇼가 적용된 Home.js Home.js home.css Movie.js Movie.module.c.. 2023. 5. 22.