전반적인 내용은 4주차와 같다
오히려 5주차보다 4주차에서 했던 메타태그에 og를 이용하는 부분이 가장 어려웠다
그래서 별 문제 없이 해나가는 중 역시나 문제가 생겼다
내가 만든 팬명록을 aws에서 지원하는 기능을 활용해 배포하는 과정을 하기 전에
"서버에 올리는 작업은 특정 분야의 개발자가 아니면 자주 하지 않는 일이며 잘 모르는 경우도 많다"
라고, 강의내용을 따라하면 된다고 말씀하셨다
그렇게 안심을 하고 강의에 첨부된 자료를 따라 복사 붙여 넣기 하면서 시키는대로 했지만
패키지를 설치하는 과정에서 갑자기 터미널에 빨간 글씨가 나온다
검색해본다 -> 누군가 영어로 질문을 올려놨길레 번역기 돌리니 버전 문제라고 업그레이드 어쩌고 ...
-> 아무튼 했다 '근데 왜 또 엑세스 어쩌고 하면서 에러가 나오는건데' -> 그래서 검색하고 번역기 돌렸는데 모르겠다
일단 진행하자 하고 패키지를 다시 설치해보니까 괜찮다 그리고 쭉쭉 진행
그러나 결과적으로 '배포는 완료되었지만 중간에 오류가 생겨 페이지에 문제가 있습니다'라는 문구가 나왔다
(번역하니 대충 이런 말이었다)
혹시나 하고 만들어진 url에 들어가니 내가 만든 내용들은 다 어디가고 520인지 502인지 에러페이지만 나온다
일단 '그래 한 번에 되겠냐' 하며 다시 시도해본다
또 문제 없이 잘 되나 했더니 마지막엔 또 전과 같은 에러가 나오면서 문제가 생겼다
뭐가 문제일까
- 서버에 올리려고 복사한 폴더와 파일을 삭제하고 다시 해본다 (실패)
- 인스턴스나 환경 등 다 삭제하고 다시 해본다(실패)
- 다른 곳에 새로운 폴더와 파일을 만들고 코드를 복사해 다시 배포해본다(실패)
- 키페어 보안환경 등등 지울 수 있는 걸 다 지워서 초기 상태로 만들고 다시 시도 (실패)
- 엑세스키를 삭제하고 새로 만들어 해본다(성공)
기존 엑세스키 용도 선택에서 (CLI인가) 첫번째를 선택했는데
다시 만들 때는 용도를 (로컬컴퓨팅) 세 번째를 선택했다
당장은 다른 파일도 하나 또 배포 해봤는데 문제 없이 작동이 되어
다행이란 생각과 안도의 한숨을 쉬었다
(이것저것 배포하면 유료 서비스로 자동 전환되서 하나만)
그 뒤 정확한 원인은 모르겠지만 일부러 에러를 다시 만들었다가
돌이킬 수 없을 것 같으니 이대로 사용하다가 다시 문제가 생긴다면
그 때 다시 어느 과정에서 에러가 생긴건지 검색하고 원인을 찾아야겠다
우연히 버킷리스트를 만들었던 것에서 버튼 추가로(완료 / 실행 취소)
완료 버튼을 누르면 버킷리스트를 완료했다는 의미에서 가운데 줄이 추가되고,
실행 취소를 누르면 가운데 줄이 다시 사라지는 기능을 만든 것을 보게되었다
나는 이게 어떻게 되는거지 하며 한참을 들여다보았다
데이터베이스에 저장되는 값을 확인하며 내가 나름대로 이해한 것은
데이터 베이스에 저장될 때마다 각각의 데이터는 객체 형태으로 저장이되고
이 객체에 번호표를 붙이는 것처럼 객체마다 가지고 있는 num이란 공통된 키에
값을 순서대로 1부터 다르게 주는 것이었다
이렇게 내가 처리하려는 데이터가 어떤 것인지 구분을 하고
객체에 또 다른 공통된 특정 키를를 추가해주어
GET요청시 조건문이 그 키의 값에 따라 실행되고 다른 실행결과가 나오게 하는 것이다
이렇게 나름 이해를 하고 코드에 ajax가 있었는데 아직은 모르는 것이라 찾아보니
내가 배운 fetch와 같은 역할을 하는 것 같았으며
일단 ajax를 내가 배운 fetch로 바꿔서 구현해보려고 했다
이게 뭐라고 알듯 말듯 하면서 왜 안되는건지 한참 고민하고 들여다 보고
별 거 아닌데 변수명이 틀리거나 따옴표나 #등을 빼먹거나 해서 시간이 좀 많이 걸렸다
구현에 성공하고 이것을 배포까지 해보는 걸로 마무리 했다
그리고 어떻게 보면 당연한건데 함수를 호출 시 인자가 없는 상태로만 호출을 하다가
인자가 jQuery로 주어 함수 호출 시 그 인자를 매개변수로 작동되게 할 수 있다는 것을 알게되었다
그 동안은 코딩 테스트 혹은 특정 예제만을 통해서 공부하면서
함수를 호출할 때 인자를 줄 수 있는 것을 알고 있었지만
function solution(num1, num2) {
return num1+ num2;
}
console.log(solution(1,2)) // 3
// 함수 호출 시 인자를 전달할 수 있다막상 강의 내용만 따라서 만들다보니 저런 생각을 못했었다
onclick="done_bucket()" // 기존에 쓰던 방법
onclick="done_bucket(${num})" // 이렇게 인자를 추가해서 호출, 그 인자를 매개변수로 활용 가능하다
추가로 밑에는 내가 ajax를 fetch로 바꾼 것 중 하나이다
function done_bucket(num) {
let formData = new FormData();
formData.append("num_give", num);
fetch("/bucket/done", { method: "POST", body: formData })
.then((response) => response.json())
.then((data) => {
alert(data["msg"]);
window.location.reload();
// $.ajax({
// type: "POST",
// url: "/bucket/done",
// data: { num_give: num },
// success: function (response) {
// alert(response["msg"]);
// window.location.reload();
// },
// });
});
}앞서 말했던 것처럼 별 내용은 없는데 변수명이나 사소한 거 하나씩 틀려서 시간이 걸렸다
그나마 배포는 한 번에 되서 다행이었지
이 글을 쓰는 게 생각보다 오래 걸린다
내가 말하고 싶은 혹은 이해한 내용을 글로 표현한다는 것과
나중에 이렇게 기록한 것을 통해 내가 도움을 받을 수도 있기 때문이며,
또 다른 누군가가 이 글을 볼 수 있기에 신중하게 생각하게 된다