전체 글

📌 깃 커밋 메시지 컨벤션 Git Commit Message ConventionGit Commit Message Convention(깃 커밋 메시지 규칙)은 협업 프로젝트에서 효율적인 커밋 메시지 작성과 변경 이력을 쉽게 이해할 수 있도록 돕는 규칙입니다. 일반적으로 이 규칙은 커밋 메시지를 일관되고 명확하게 작성하기 위해 사용되며, 다음과 같은 구조와 형식을 따릅니다.   📌 기본 구조: 1. 타입(Type):커밋의 목적을 나타내는 필수 항목으로, 작업의 성격을 설명합니다. 일반적으로 사용되는 타입은 다음과 같습니다.feat: 새로운 기능 추가fix: 버그 수정docs: 문서 변경 (예: README 수정)style: 코드 스타일 변경 (포맷팅, 세미콜론 추가 등, 코드 자체 변화는 없음)refac..

👌참고localhost의 IPv6는0:0:0:0:0:0:0:1 IPv4 는 다음과 같다127.0.0.1 IP 구하기public static String getIP() { HttpServletRequest req = ((ServletRequestAttributes)RequestContextHolder.currentRequestAttributes()).getRequest(); String ip = req.getHeader("X-FORWARDED-FOR"); if (ip == null) { ip = req.getRemoteAddr(); } return ip;}  🚨상황IP 주소를 DB에 저장할 때, IPv6으로 기입되는 현상   해결법IntelliJ 에서 vmopti..

📌 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하는 경..