본문 바로가기

전체 글

[JavaScript] Access to fetch at... has been blocked by CORS policy 오류 해결 방법 개요 API 등을 불러와 사용할 때 아래와 같은 문구와 함께 오류가 발생하는 일이 있다. 'api를 호출한 주소'의 원본에서 'api의 데이터를 보내주는 주소' 가져오기에 대한 액세스가 CORS 정책에 의해 차단되었습니다. : 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 불투명한 응답이 요구 사항을 충족하는 경우 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화된 리소스를 가져옵니다. 에러메시지를 보아하니 - CORS 정책이란 것 때문에 데이터 가져오는게 차단되었고 - Access-Control-Allow-Origin 라는 게 있어야 하고 - 요청 모드를 no-cors로 설정해서 가져올 수도 있다는 것 같다. 발생 원인 CORS에 앞서 먼저 알아야 하.. 더보기
[React] 리액트 Hook 정리 - 2 Context Hook 리액트 컴포넌트 트리에서 컨텍스트 객체를 받아 현재 값을 반환하는 Hook 함수. 부모와 자식 컴포넌트 사이 중간 컴포넌트들을 건너뛰고 데이터를 전달할 수 있다. 즉, 전역적인 데이터를 공유할 때 쓴다. (UI테마 등) 만약 깊이가 깊은 컴포넌트나, 애플리케이션 내의 여러 컴포넌트들에 props를 전달해야 한다면, 일일히 넘겨주려면 코드 작성도 수정도 번거로울 것이다. context를 쓰면 단계마다 넘겨줄 필요 없이 한번에 여러 컴포넌트들에게 값을 공유할 수 있다. -특징: useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 된다. -사용법: 선언: createContext(초기값) 컴포넌트: 사용: useContext(Context명) -사용 예: .. 더보기
[React] 리액트 Hook 정리 - 1 1. Hook이란? 기존 클래스 컴포넌트에서만 가능했던 기능들(state, lifecycle관리)을 클래스 없이 사용할 수 있게 해주는 기능. 리액트 버전 16.8부터 추가되었다. 2. Hook을 쓰는 이유 - Class개념과 같이 객체지향에 익숙하지 않은 개발자도 리액트의 주요기능을 함수에서 쉽게 사용할 수 있음 - componentDidMount나 componentDidUpdate등의 lifecycle API 에서 불필요하게 포함된 요소를 직관적으로 분리해 사용가능. - Hook을 쓰면 계층 변화 없이 상태 로직을 재사용할 수 있음. 3. Hook 사용 시 주의점 - 최상위 레벨에서 Hook을 호출해야함. (반복문이나 조건문 등 중첩 함수 내에서 실행x) - 리액트 함수 컴포넌트 내에서만 Hook을 .. 더보기
[React] vscode에서 리액트 JSX 태그 자동완성 적용 방법 개요 HTML에서 꺽쇠()를 입력하지 않고 태그명만 입력하면 자동완성되는 기능에 익숙해지고 보니, 리액트에서 JSX태그도 자동완성을 하고싶은데... 익스텐션을 찾아봐도 마땅히 나오는게 없었다. 서치를 해보니 따로 익스텐션 설치 없이도 할 수 있는 기능이었다. 방법1 - 개별 파일에 적용 VScode창 오른쪽 하단에는 현재 커서 위치나 인코딩 형식, 적용중인 익스텐션 등이 나와있는 바가 있다. 그중에서도 (js파일을 열고있는 상태라면) JavaScript라고 써져있는 부분이 있다. 이걸 클릭한다. 그러면 화면 상단에 여러 언어들이 나열된 언어 모드 선택 창이 뜬다. react를 검색해서 JavaScript React를 눌러준다. 이제 JSX 태그를 작성해보면 자동완성이 뜨는걸 확인할 수 있다. li>a 등.. 더보기
[JavaScript] Unexpected token .. in JSON at position .. 오류 해결하기 문법 오류: 위치 1에서 JSON의 예기치 않은 토큰 r 원인 json구조가 아닌 데이터를 json파일로 생각하고 읽으려고 했을 때 발생한다. 해결방법 콘솔로 데이터의 타입을 확인해보거나, 오타나 따옴표 등의 자잘한 형식오류가 없는지 확인해보도록 하자. 내 경우엔 데이터를 받아온걸 json형식이라고 생각하고 .json()으로 처리한 데이터가 다른 형식이어서 저 오류가 떴고, 형식에 맞춰 다르게 처리를 해주었다. 참고 자료 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Errors/Unexpected_token - https://itprogramming119.tistory.com/entry/%EC%97%90%EB%9F%AC%EC%BD%9.. 더보기
[JavaScript] 커스텀 이벤트 만들기 코딩 중에 커스텀 이벤트를 쓸 상황이 생겨서 애매하게 알고있던걸 이번 기회에 공부해봤다. 커스텀 이벤트 생성 - Event 기존에 존재하는 이벤트(click, mouseover등)를 커스텀으로 변형해서 사용할 수도 있고, 아예 새로운 이름의 커스텀 이벤트를 만들 수도 있다. const event1 = new Event('click'); const event2 = new Event('eventname', { "bubbles" : true, "cancelable" : false, "composed" : true }); bubbles 이벤트 버블링을 하는지 여부 (기본값 false) cancelable 이벤트를 취소할 수 있는지 여부 (기본값 false) composed 이벤트가 Shadow DOM 경계를 넘.. 더보기
[JavaScript] 자바스크립트로 캔버스 제어하기 - 스타일 저장 & 불러오기 (save와 restore) 개요 캔버스의 컨텍스트 영역에서는 한번에 하나의 스타일만 가질 수 있다. 예를 들어, 빨강색의 꽉찬 원과 파란색의 사각형을 그리려면.. 1. 현재 컨텍스트 영역의 채우기 스타일을 빨강색으로 설정한다. 2. 원을 그린다. 3. 현재 컨텍스트 영역의 채우기 스타일을 파란색으로 설정한다. 4. 사각형을 그린다. 한번에 빨강색과 파란색을 설정해두는게 아니라, 위의 예시처럼 스타일 하나를 설정하고 그리고 다시 스타일 하나를 설정하고 그리고.. 하는 방식이다. 그런데 만약, 빨강색 도형을 쭉 그리다가 파란색 도형을 또 쭉 그리다가 다시 빨강색 도형을 쭉 그리다가... 이런 식으로 전에 그렸던 스타일의 도형을 다시 그려야 한다고 하자. 한두번은 그렇다 쳐도, 만약 전에 그렸던 스타일을 자주 다시 그려야 한다면 코드에.. 더보기
[JavaScript] 자바스크립트로 캔버스 제어하기 - 2d 그래픽 그리기 자바스크립트에서 캔버스를 동적으로 제어하는 기능에 대해 공부한 내용 중, 2d 그래픽을 그리는 부분에 대해 정리했다. 캔버스 생성 화면에 createElement로 캔버스 엘리먼트를 생성하고, getContext로 캔버스에 연결된 렌더링 컨텍스트를 정의한다. const myCanvas = document.createElement('canvas'); //캔버스 엘리먼트 생성 const ctx = myCanvas.getContext('2d'); //생성한 캔버스에 컨텍스트를 연결 document.body.appendChild(myCanvas); //body 내에 캔버스를 배치 myCanvas.style.width = 100%; myCanvas.style.height = 100%; 여기서 렌더링 컨텍스트를 정.. 더보기

티스토리툴바