금일 달성 항목
1. JavaScript 문법 종합반 5주차 : DOM과 클래스, 클로저 1회차 완강
2. git&github 사용 및 업로드까지
3. 혼자 공부하는 자바스크립트_ 상수와 변수 (111Page) 까지 진행
문제 해결 과정 1 - CORS 오류 해결
[문제]
어제 있던 문제를 해결하기 위하여 다시 구글링을 했습니다.
[시도 및 해결]
CORS 해결방식을 시도 했는데 내가 잘못한건가 싶어 다른 예시를 가져와서 CORS문제를 해결해보고자 했습니다 ㅠ
https://inpa.tistory.com/entry/%F0%9F%8C%90-CORS-%EC%BA%90%EC%8B%9C-%EC%97%90%EB%9F%AC
🌐 리소스 캐시로 인한 CORS 에러 현상 고찰
브라우저 캐시로 인한 CORS 문제 CORS(Cross-Origin Resource Sharing)는 서로 다른 출처(Origin)의 리소스를 공유하고 싶을때 사용하는 정책을 말한다. 기본적으로 브라우저는 SOP(Same Origin Policy) 정책을 따르
inpa.tistory.com
아래 사이트에서 CORS 에러가 뜨는 코드를 가져와서 테스트 해봤습니다. 그안에 구글링한 방법인 Access-Control-Allow-Origin을 간단히 추가해주었습니다.
1. CORS 오류 예시 코드
<img src="https://third-party-test.glitch.me/check.svg" alt="이미지">
<script>
fetch('https://third-party-test.glitch.me/check.svg')
.then(response => response.blob())
.then(imgBlob => {
const imageObjectURL = URL.createObjectURL(imgBlob); // 응답 받은 이미지를 blob 객체로 변환
const img = document.createElement('img'); // 이미지 태그를 생성하고
img.src = imageObjectURL; // 이미지 경로를 설정한뒤
document.body.append(img); // html에 추가
})
</script>
1. CORS오류 예시에 삽입한 코드
<script>
fetch(url, {
mode: "cors",
headers: {
"Access-Control-Allow-Origin": "http://127.0.0.1:5500/",
}
</script>해결이 되었습니다!!!
중간중간 문자열과 부호에 대한 오류가 나긴했지만 코스 문제자체는 해결이 되었습니다!!
(문자열 부호에 대한 것은 튜터께서 알려주셨습니다.. 바로바로 바꿔주시는게 정말 멋있었습니다.. ㅠㅠㅠ)
1. CORS 오류 예시 코드 - 해결
<body>
<img src="https://third-party-test.glitch.me/check.svg" alt="이미지" />
<script>
fetch(url, {
mode: "cors",
headers: {
"Access-Control-Allow-Origin": "http://127.0.0.1:5500/",
} //추가!!!
.then((response) => response.blob())
.then((imgBlob) => {
const imageObjectURL = URL.createObjectURL(imgBlob); // 응답 받은 이미지를 blob 객체로 변환
const img = document.createElement("img"); // 이미지 태그를 생성하고
img.src = imageObjectURL; // 이미지 경로를 설정한뒤
document.body.append(img); // html에 추가
}),
});
</script>
</body>
그래서 위 해결 코드를 저를 계속 괴롭히던 나루토에게 넣어주었습니다!
2. 4주차 숙제 코드
class HttpError extends Error {
constructor(response) {
super(`${response.status} for ${response.url}`);
this.name = "HttpError";
this.response = response;
}
}
function loadJson(url) {
console.log("test");
return fetch(url, {
mode: "cors",
headers: {
"Access-Control-Allow-Origin": "http://127.0.0.1:5500/",
},
});
}
function narutoIsNotOtaku() {
let title = prompt("애니메이션 제목을 입력하세요.", "naruto");
return (
loadJson(`https://animechan.vercel.app/api/random/anime?title=${title}`)
.then((res) => {
// console.log(res.json());
res.json().then((data) => {
alert(`${data.character}: ${data.quote}.`);
});
// return res;
})
// .then((data) => console.log(data))
.catch((err) => {
if (err instanceof HttpError && err.response.status == 404) {
alert(
"일치하는 애니메이션이 없습니다. 일반인이시면 naruto, onepiece 정도나 입력해주세요!"
);
return narutoIsNotOtaku();
} else {
throw err;
}
})
);
}
narutoIsNotOtaku();튜터님이 넣어주실때 JSON 문법을 활용해서 넣어주셨는데 따로 찾아보니 텍스트 정보를 저장하고 바꾸는데 사용하는 문법인 것을 배울 수 있었습니다!
https://dlgkstjq623.tistory.com/267
JSON 문법 정리
[JSON] JSON : JavaScript Object Notation의 약자이다.JSON은 텍스트 정보를 저장하고 바꾸는데 사용되는 문법입니다.XML과 매우 유사하죠.JSON은 XML보다 작고, 더 빠르고 더 쉽게 파싱합니다. [JSON의 예]{"employ
dlgkstjq623.tistory.com
실행했을 때 오류 없이 잘 열리는 것을 확인 할 수 있었습니다.!!!
[알게 된 점]
코드 자체가 생각보다 엄청 단순함에도 코드를 넣는 위치나 기본적인 오류사항에 대해서 제대로 파악하지 못하는 것에
부끄러움을 느꼈습니다.. 그래서 '혼자 공부하는 자바스크립트' 책을 보며 기초적인 부분을 쌓아보려고 합니다.
문제 해결 과정 2 - Git 다운로드
[문제]
맥에서 깃을 다운로드 하려고 하는데 Password 부분이 왜 아무것도 나오지 않을까?...
[시도 및 해결]
구글링을 해보니 맥북 M1 에어의 문제인가 싶어서 설정에 들어가 이것저것 다 허용을 눌렀습니다.
[맥북]맥OS M1 git 설치하기
개요 맥OS 에서 git 을 설치하는 방법에 대해서 정리 진행합니다. 1. Git 사이트 접속 및 HomeBrew 설치하기 제일먼저, 다음 git 사이트로 접속하여 주시기 바랍니다. git 주소는 https://git-scm.com/ 다음과
afsdzvcx123.tistory.com
위 사이트에 들어가도 똑같이 뜨는 것을 보고, 순간 아.. 원래 안보이게 나오는건가?..
해서 그냥 Password 부분이 왜 아무것도 나오지 않아도 맥 비밀번호를 입력했더니. 다운로드가 시작되었습니다.;
[알게 된 점]
사실 이것도 30분정도 해결방법을 찾으려고 구글링하다가 튜터님한테 갈까 고민했는데, 결국 혼자 해결했습니다!
너무 별거 아니라서 부끄러웠습니다.. (나같은 사람이 없으려나요?..)
그리고 생각보다 내가 겪은 오류들은 모든 사람들이 똑같이 겪어본 오류이므로 구글링하다보면 해결방법은 분명히 있다!! 라는 것을 깨달았습니다. 튜터님에게 너무 의지하지 않으려고 합니다.
'혼자 고민해보기_ 개발 > TIL (Today I Learned)' 카테고리의 다른 글
| 20230526(토)_ 바닐라 자바스크립트 공부, 예제 풀기 (0) | 2023.05.27 |
|---|---|
| 20230525(금)_ 자바스크립트 예제풀기, 프로그램 에러 해결 (0) | 2023.05.26 |
| 20230524(수)_ JavaScript 문법 종합반 1회차 진행 중 (0) | 2023.05.24 |
| 20230523(화)_ JavaScript 문법 종합반 1회차 진행 중 (1) | 2023.05.23 |
| 20230522(월)_ JavaScript 문법 종합반 1회차 진행 중 (0) | 2023.05.22 |