본 문서에서는 Next.js 기반 웹 사이트를 수정 후 재배포하는 과정을 안내합니다.
필독 주의 사항
본 문서의 목차
사전 준비 사항
•
프로젝트 열기
•
프로젝트 실행하기
•
수정 전에, 프로젝트가 정상적으로 동작하는지 확인해 보겠습니다.
•
Windows 환경에서는 Ctrl + ` 을, Mac 환경에서는 Command + ` 버튼을 눌러 Terminal 을 실행합니다.
이미지
•
yarn 을 입력하고 엔터를 누릅니다. 아래에 여러 영문 글자들이 뜨게 됩니다.
•
마지막에 Done in 0.00s. 문자가 보이면, 실행할 준비가 왼료된 것입니다.
이미지
•
yarn dev 를 입력하고 엔터를 누릅니다. 아래에 여러 영문 글자들이 뜨게 됩니다.
•
•
이때, 터미널 입력 칸에는 이미지와 같이 흰색 직사각형이 표시되는데, 이는 웹 홈페이지가 정상적으로 실행되고 있음을 의미합니다.
•
만약 명령어를 종료하고 싶다면 Ctrl + C 를 눌러 나올 수 있습니다 (홈페이지 접속이 끊깁니다)
이미지
•
홈페이지가 정상적으로 보여진다면, 프로젝트가 잘 실행된 것입니다.
프로젝트 수정하기
텍스트 이외에 사항을 수정하시면 프로젝트 내에서 오류가 발생하거나 구성이 깨질 수 있으니, 반드시 유레카에 유지보수 요청을 해 주시기 바랍니다.
•
기존 텍스트를 신규 텍스트로 변경하고 싶다면,
◦
이미지에 있는 VS Code 의 검색 기능을 통해 Search 란에 기존 텍스트를 입력합니다.
◦
문장의 길이는 제한이 없으며, 길게 입력할수록 정확도가 증가합니다.
이미지
•
기존 텍스트가 있는 검색 결과를 클릭한 다음,
1.
기존 텍스트를 확인합니다.
2.
신규 텍스트로 변경합니다.
3.
웹 브라우저에서 새로고침하여 변경되었는지 확인합니다.
이미지
만약 신규 텍스트로 변경하였는데 반영이 안 되었을 경우, 잘못된 곳을 수정한 것이므로
1.
해당 텍스트를 다시 기존 텍스트로 복구합니다. (Ctrl + Z)
2.
검색 결과에서 다른 결과를 클릭해서, 신규 텍스트로 변경 후 반영되는지 확인하는 절차를 반복합니다.
수정 사항 다시 배포하기
•
변경을 완료하였다면, 이제 변경한 사항을 다시 실 서버로 배포해야 합니다.
•
터미널을 다시 실행합니다. (Ctrl + `)
◦
이미 실행 중인 터미널이 있다면, 이어서 작업을 진행합니다.
•
yarn build 를 실행합니다.
•
마지막에 Done in 00.00s. 가 나오는지 확인합니다.
이미지
•
yarn export 를 실행합니다.
•
마지막에 Done in 00.00s. 가 나오는지 확인합니다.
이미지
결과물 확인 후 배포하기
•
VS Code 에서 Explorer 탭을 열고, 마우스 오른쪽 버튼을 클릭해 Reveal in File Explorer 메뉴를 클릭합니다.
이미지
•
프로젝트 디렉토리 안에 out 폴더가 있는지 확인합니다.
이미지
•
해당 out 폴더를 호스팅 서버에 업로드합니다.
◦
호스팅 서버의 경우 호스팅사마다 업로드 방식이 다르므로,
상세한 사항은 담당자에게 문의 부탁드립니다.