전체 글

📌 TMDB API Document 공식 사이트https://developer.themoviedb.org/reference/intro/getting-started Getting StartedWelcome to version 3 of The Movie Database (TMDB) API. This is where you will find the definitive list of currently available methods for our movie, tv, actor and image API.developer.themoviedb.org    📌 Movie 컬렉션/시리즈 가져오는 법🤯상황 TMDB API 를 이용해서 Moive Application을 만드는 와중, 한 영화에 해당하는 Collecti..

📌 Font Awesome https://fontawesome.com/icons Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com 해당 사이트에서 Icon 관련하여 사용할 수 있습니다  아이콘을 적용하는 데 두 가지 방법이 있습니다. 1. Global Import 2. Indivisual Import     📌 방법1. fontawesome 설치하기npm install @fortawesome/fontawesome-svg-core @fortawesome/free..

🚨상황Invalid src prop (https://image.tmdb.org/t/p/w185/9BJxdhi4tuiQdgT8bfDuiPipnsx.jpg) on `next/image`, hostname "image.tmdb.org" is not configured under images in your `next.config.js`  원인 외부 이미지에 대한 호스트가 구성되지 않았다.   해결법next.config.js 파일을 생성하여 외부에서 불러올 이미지에 해당하는 hostname을 작성해준다.(아래 코드는 Next.js 14버전 기준으로 작성되었습니다.)// next.config.jsmodule.exports = { images: { remotePatterns: [ { p..

📌 Error Lens 에러가 발생했을 경우 해당 line에 발생한 에러가 무엇인지 나타나게 해준다.    📌 Extensions 설치하기    Extensions 은 다음과 같은 아이콘 클릭 후 검색하면 편하게 다운로드가 가능하다. (VSCode 기준)

📌 생명주기 메서드가 실행되는 시점마운트(mount)컴포넌트가 마운팅(생성)되는 시점업데이트(update) 이미 생성된 컴포넌트의 내용이 변경(업데이트)되는 시점언마운트(unmount) 컴포넌트가 더 이상 존재하지 않는 시점    📌 생명주기 메서드render()컴포넌트를 렌더링하는 메서드 컴포넌트가 UI 를 렌더링하기 위해서 쓰인다.render() 함수는 항상 순수해야 하며 부수 효과가 없어야 한다. this.setState 를 호출해서는 안된다. componentDidMount()컴포넌트가 마운트되고 난 후 호출되는 메서드this.setState()로 state 값을 변경하는 것이 가능하다.(다만, 일반적으론 state를 다루는 것은 생성자에서 하는 것이 좋다.)state가 변경되고, 그리고 그 ..

📌 React HooksuseInputuseTabsuseTitleuseClickuseConfirm & usePreventLeaveuseBeforeLeaveuseFadeln & useNetworkuseScroll & useFullscreenuseNotificationuseAxios💡Nomad Coders 에서 진행한 총 10가지의 custom hooks 에 대한 정리 모음집입니다.  들어가기에 앞서, useState 와 useEffect에 대해 알아보자📌 useState함수형 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다. 넘겨진 인수가 없는 경우 초기값은 undefined 다. const[state, setState] = useState(initialState) 에서 ..

🚨상황npm ERR! code ENOENTnpm ERR! syscall opennpm ERR! path C:\Users\User\OneDrive\바탕 화면\Study_React\package.jsonnpm ERR! errno -4058npm ERR! enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\Users\User\OneDrive\바탕 화면\Study_React\package.json'npm ERR! enoent This is related to npm not being able to find a file.npm ERR! enoent 원인 npm start의 폴더 대상 문제 > start하는 경..

📌 Github 리포지토리 이름 변경하기Settings - Repository name 수정 - Rename 클릭   📌 변경된 이름으로 재연동하기새롭게 생성된 url 복사 후 , 다음과 같이 명령어 입력 > 현재 연결된 리포지토리 주소 확인 : $git remote -v> 리포지토리 주소 변경 : $git remote set-url origin 주소

📌2.6 JSXJSX 란? 문자열도, HTML도 아닌 JavaScript 를 확장한 문법입니다. React에서 JSX 사용이 필수가 아니지만, 대부분의 사람들은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움이 된다고 생각하여 사용이 됩니다.   예시 보기const element = ( Hello, world! );const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!');두 예시는 동일한 기능을 합니다. 다만, 위의 예시는 JSX를 통해 표현을 했고 밑의 예시는 React.createElement() 문법을 사용하여 표현하였습니다.   Babel 이란? ES6 및 JS..