2024/10월 최근 Netlify 사용법

사이트

https://www.netlify.com/

Scale & Ship Faster with a Composable Web Architecture | Netlify

사이트 접속 로그인 부터 빡셌음.

뭘 다 인증하라고 한다. ( 신분증 )

그러다가 갑자기 로그인이 안돼서

깃허브로 로그인하려다가 안돼서 그냥 email 로그인했음.

그랬는데도 로그인 안돼서 비번 찾기도 하고 갑자기 비번도 바꿨더니 로그인 됐다. 

강의 참고

웹사이트 배포하는 법, Netlify 면 버튼하나면 충분 (tistory.com)

웹사이트 배포하는 법, Netlify 면 버튼하나면 충분

 

---

사이트 생성 방법

여기에 사이트 만들기 버튼있음.

Builds - New site from Git

그 전에 이메일 가입으로 로그인 한 사람은 

깃헙 연결시켜줘야함

그럼 다시 아까 빌드 버튼 들어가면

또 뭐 연결해줘야함.

 

연결 끝나면 내 프로젝트 뜸.

사이트 이름 정할 때

중복이면 안됨.

Check availability 눌러서 유효한 지 확인하기.

내 브런치는 main

그냥 확인만 해주고 쭉 내려줌. 

맨 밑에 민트 버튼 클릭.

그럼 이제 끝.

---

근데 사이트가 안뜸. 
- 자바스크립트로만 짠 파일인 경우

 

1) 내 주요 프로젝트 이름을 확인하기. 

 

주요 프로젝트를 main.html 로 했었는데

이렇게 하면 netlify 가 인식을 못한다고 한다.

index.html 으로 이름을 바꿔줌. 

혹시 몰라서

netlify.toml 도 추가해줌.

근데 index.html 이렇게만 해줘도 사이트 개설이 되는 것 같다.

개설된 것 확인.

---

근데 사이트가 안뜸. 
- 리액트로 짠 파일인 경우

Diagnosis: The build failure is caused by errors in the code related to missing dependencies and invalid attributes in the React components.

Solution:

For the missing dependency issue with React Hook useEffect in the file FingerItems.js at Line 21, make sure to include the missing dependency updateTotalPages in the dependency array of the useEffect hook.

For the invalid attribute value issue related to the href attribute in various files, such as LeftSidebar.js, Pagination.js, RightSidebar.js, etc., ensure that valid and navigable addresses are provided for the href attributes at the specified lines indicated in the error messages.

Fixing these issues should resolve the build failure.

Ai 가 말하는 해당의 사유로 업로드 실패함.

React Hook useEffect의 종속성 배열 관련 문제 (FingerItems.js)

• 문제: useEffect 훅에서 updateTotalPages라는 종속성(dependency)이 누락되었기 때문에 발생하는 에러입니다.
• 해결책: useEffect의 두 번째 인자인 종속성 배열에 updateTotalPages를 추가해야 합니다.

useEffect(() => {
  // 코드
}, [itemsPerPage, updateTotalPages]); // 기존 배열에 updateTotalPages 추가

그래서 추가해줌. 
내가 개인적으로 빼먹었던 문제였다.

---

유효하지 않은 href 속성 문제

• 문제: 여러 파일(예: LeftSidebar.js, Pagination.js, RightSidebar.js 등)에서 href 속성이 유효하지 않거나
• 잘못된 값을 가지고 있어 발생하는 문제입니다.
• 해결책: 각 href 속성에 유효한 URL을 입력해야 합니다.

내가 임시 클릭 주소로 a 태그를 쓰고 href="#" 를 썼는데 이걸 수정해줘야 했음.

 

a 태그를 사용할 경우, 

href="javascript:void(0)" 사용

<a href="javascript:void(0)">링크</a>

이런 식으로 수정을 하거나

href를 아예 비워두기

<a>링크</a>

주소가 있으면 써주기 
to="/경로"

<a href="/fingers">For Fingers</a>  // 유효한 URL

 

아니면 되도록 Link 컴포넌트로 대체해주기
= 이것 또한 to="#"는 피해야 한다. 

( Link 컴포넌트를 먼저 import 하는건 필수 )

to="/"와 같은 기본 경로로 연결

<Link to="/">링크</Link>

아니면 얘도 주소가 있으면 써주기

import { Link } from 'react-router-dom';

<li>
  <Link to="/notice">notice</Link>
</li>
<li>
  <Link to="/q-a">q / a</Link>
</li>

 

실제 페이지 이동이 없다면 <button> 태그로 바꿔서 동작을 추가하는 방법도 있다. 

 <button>SEARCH</button>

 

a 태그를 없애고 span 태그를 사용하여 불필요한 href="#" 문제를 해결할 수도 있음

 <span
        onClick={(e) => {
          e.preventDefault();
          if (currentPage > 1) {
            onPageChange(currentPage - 1);
          }
        }}
        style={{ cursor: "pointer" }}
      >
        <FontAwesomeIcon icon={faAngleLeft} />
      </span>

 

---

 

그 다음에 얘도 netlify.toml 넣어주기

프로젝트의 루트 디렉토리에 넣어줌. 

( 최상위 폴더 ) 

---

두번째 프로젝트 생성하는 방법

왼쪽에 team 누르고

오른쪽에 Add new site 를 클릭.

Import an existing project 누르면 된다.

 

그러곤 똑같이 깃헙 연결해주면 됨.

---

만든 사이트 삭제하는 방법

Site configuration 클릭하기

젤 밑으로 스크롤 하다보면 

Damage Zone 있다

 

여기서 삭제해주면 된다.