DAN'S 기술블로그

라우팅이란 URL 주소에 따라 어떤 UI를 보여줄지 규칙을 정하는 작업을 말한다. 기본적으로 리액트는 component에 기능이 중점되어있기 때문에 라우팅을 하기 위해서는 다른 회사의 라이브러리를 추가해야 한다. 많이 사용되는 라이브러리는 react-router-dom이다. Route 사용법 기본적인 사용법은 아래와 같다. 패키지 설치 : npm install react-router-dom 설치한 패키지를 import해서 그 안의 BrowserRouter로 라우팅 할 컴포넌트를 감싸준다. (최상위 컴포넌트를 감싸주면 된다) 라우터를 사용할 컴포넌트에서 Router를 import해서 사용하면 된다. Router의 사용법이 5버전에서 6버전으로 넘어가면서 꽤 바꼈다. 내 경우는 5버전 강의를 보면서 6버전을..

이전 포스트 : https://actually-i-am.tistory.com/46 리액트의 기초 - 컴포넌트와 JSX 리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇인가 그렇다면 컴포넌트는 무엇인가? 그것을 알기 전에 react는 결국 UI를 만들어주기 위한 도구라는 것을 환기해보 actually-i-am.tistory.com 이전 포스팅에서 컴포넌트는 재사용하기 좋다고 설명했지만 props없이는 무리가 있다. 이전 포스팅에서 정의했던 Hello컴포넌트를 다시 보자. 만약에 'Hello, 유저이름'과 같은 식으로 나타내고 싶다고 생각을 해주자. 3명의 이름을 부르려면 3개의 컴포넌트가 필요하다. 하지만 props를 사용한다면 아래 하나의 컴포넌트를 재사용 가능하다. import..

리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇인가 그렇다면 컴포넌트는 무엇인가? 그것을 알기 전에 react는 결국 UI를 만들어주기 위한 도구라는 것을 환기해보자. 보통 사이트는 html, css, js로 만들어져 있는데, 리액트는 이것들을 컴포넌트 단위로 묶어서 UI를 만든다. 예를들어서 버튼 하나도 컴포넌트라고 할 수 있다. 컴포넌트는 독립적이고, 고립되어 있으며 재사용이 가능하다. 컴포넌트를 만드는 방법은 아래와 같다. 다음은 Hello라는 컴포넌트를 만드는 코드이다. import React from 'react'; function Hello(){ return Hello; } export default Hello; 위 코드에서 눈에 띄는 것은 html과 비슷해보이는 코..

리액트는 UI를 만드는 자바스크립트 라이브러리이다. CSR을 하기 때문에 앱과 같은 사용성을 제공할 수 있다. 리액트를 왜 사용하는가 JavaScript만 사용할 때 힘든 지점 기존 자바스크립트에서는 DOM을 업데이트하기 위해서는 명령형 접근을 해야 했다. 즉, 모든 세부 단계의 코드를 작성해야했다는 말이다. 예를 들어서, 위 이미지처럼 생긴 할 일 관리 어플리케이션을 만든다고 생각하고, 수도코드를 작성해보자. /* 할 일 입력받기 */ // 1. 할 일을 입력받는 form을 html로 코딩한다. // 2. 할 일을 입력받는 form 노드를 찾아둔다. // 3. form노드가 submit될 때, input에 입력한 값을 저장해둔다. // 4. 새로운 element를 생성하고, 그 안에 2번에 저장한 값을..

CORS 에러 만나보기 우선 CORS 에러를 만나보자. 개발자 툴을 열고 콘솔탭에서 아래 코드를 입력해보자. fetch('https://www.google.com/'); 크롬에서는 아래와 같은 에러메세지를 마주할 수 있다. (브라우저마다 에러메세지가 조금씩 다르게 뜰 수 있다.) Access to fetch at 'https://www.google.com/' from origin 'https://actually-i-am.tistory.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an..

쓰로틀링과 디바운싱은 성능상의 이유로 DOM 이벤트를 실행되는 javascript의 양을 제한하는 방법이다. 예를들어 지금 개발자 툴을 열고 콘솔탭에서 아래 코드를 입력해보자. const event = () => { console.log("test"); } window.addEventListener('scroll', event); 그리고 이 페이지 스크롤을 몇 번 해보자. "test"라는 문구가 최소 몇십번은 호출되어 있을 것이다. 콜백 함수가 조금이라도 복잡한 함수로 되어있다면 홈페이지의 성능이 저하된다. 쉽게 말해서 쓰로틀링과 디바운싱은 console창에 뜨는 "test"라는 텍스트가 출력되는 숫자를 줄여주는 방법이라고 생각하면 된다. memo. 위 이벤트를 지우고 싶다면? 아래 코드를 콘솔창에 입력..

음악 자동재생 오류 발생! 리액트로 간단한 토이프로젝트를 하는데, 배경음 자동 재생이 막혀서 삽질하다가 쓰는 글이다. 결론부터 말하자면, 에러메세지를 제대로 안 읽는 내가 잘못했다. Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 웹 사이트에 배경음악을 자동재생해놓고 크롬 브라우저에서 열면 다음과 같은 에러메세지가 나타난다. (정책상의 문제기 때문에 엣지 브라우저에선 되더라) 사용자가 문서(사이트)와 상호작용하지 않았기 때문에 play()가 실패했다는 말이다. 왜 이걸 제대로 읽지 않아서 몇시간을 허비한 것일까... 오류 발생 원인과 해결 방법 아무튼, Chro..