AI Platform / Web

React를 처음 배우면, useState를 상태관리를 위해 사용한다. 이 글을 보고 있는 여러분도 적어도 한번 정도는 사용해 봤을 것이다. useState는 리액트에 제공하는 가장 기본적은 Hook으로 useEffect와 함께 가장 많이 사용된다. 상태관리가 무엇인지에 대해 알아본 후 useState의 본질적인 사용법에 대해 알아보도록 하자. React에서 State state란 무엇일까? 쉽게 말하면 state는 데이터라고 생각하면 이해가 빠르다. 따라서 상태관리란, 데이터 관리라고 할 수 있다. 공식 문서에 따르면 state를 구분하는 방식은 아래와 같다. 시간에 따라, 변한다면 state가 아니다. parent component에서 Props를 받을 수 있다면, state가 아니다. 기존의 sta..

이미지를 첨부하고, 첨부한 이미지를 브라우저 상에서 보여주는 방식을 알아보자. 브라우저에서 이미지를 업로드하여 보여주는 방식으로는 fileReader를 사용하는 방식과 URL.createObjectURL()을 사용하는 방식이 있다. 오늘 알아볼 방식은 URL.createObjectURL()이다. 우선은 작동 순서를 알아보고, React로 전반적인 파일 업로드와 Image를 브라우저로 표현하는 방식에 대해 알아보자. 그 후에 vanillaJS로 URL.revokeObjectURL() 도 추가로 알아보도록 하자. 구현 로직 순서 우리가 구현할 로직을 우선 생각해 보면 아래와 같다. input 태그를 통해 image를 받는다. 받은 image 파일에서 Blob 객체를 뽑아낸다. 뽑아낸 Blob 객체를 URL...

로그인 화면을 들어가 보면 마우스를 클릭할 필요 없이, 바로 input 창에 커서가 올라가 있는 것을 확인 할 수 있다. 이러한 방법을 autofocus라고 한다. 관련 내용을 보면서 구현까지 해보도록 하자. autofocus 페이지 로드 시 별도의 클릭없이 지정한 input창에서 바로 작성을 가능하게 할 수 있도록 하는 기능을 만들어 보자. 이러한 기능을 autofocus라고 한다. 기본적으로 vanilla javascript로 작성을 해보자. 당연히 react에서도 focus를 사용할 수 있다. 아래의 예시를 처음부터 자세히 본다면, 앞으로 autofocus를 마스터 했다고 할 수 있다. react/nextjs에서 autofocus를 사용하는 방식은 약간 다르다. 관련 내용은 아래의 링크를 참고하자...

프런트엔드 error를 확인하는 방법은 여러 가지가 있다. 우리는 기본적으로 개발자도구에 console에 발생하는 에러를 통해서 주로 error를 확인한다. 하지만 무작정 error handling을 try catch로 하는 것은 좋은 방식이 아니다. try catch로 해야 하는 부분과 Error boundaries를 활용하는 방법을 알아보고, 리액트라는 선언형 코드에서 사용하는 코드에 대해 알아보자. 이 글을 통해 스스로 내 프로젝트에 error를 넣어주는 방식에 대한 기초를 알아보자. 1. try catch javascript를 배운사람은 다 알 수 있는 에러 처리 방법이다. 보통은 nodejs 백엔드에서 api 호출 시 많이 사용한다. 그러면 react에서도 사용하면 될까? 반은 맞고 반은 아니다..

react로 DOM에 접근하여 스크롤 이벤트, 포커싱 등을 할 수 있는 방법이 바로 ref를 사용하는 방법이다. 기본적인 React에서 부모 자식 컴포넌트의 상호작용은 props로 한다. 그리고 자식을 수정하기 위해서는 props의 값 변경을 통해 수행한다. 수정을 하는 것이 자식 컴포넌트가 아닌 DOM Element나 React Element인 경우도 있을 것이다. 이러한 경우에 ref를 통해 render 되는 html 태그(DOM Node, React Element)에 접근하는 것이 가능하다. 또한, Ref 자체가 단방향 흐름인 React에서 어떠한 오아시스 같은 역할을 하는지도 알아보자. 1. Ref 사용 시기 공식문서는 아래와 같은 시기에 사용을 권장한다. focus 하는 경우 input 태그 선..

마우스 클릭 시 type 지정하여, event 값을 가져오는 데 어려움을 겪는 사람들을 위해 글을 적어보겠다. 보통 에러가 나는 부분은 event를 가지고와서 핸들링할 때, 주로 발생을 한다. event.target as HTMLElement 를 활용해서 사용하는 방식을 사용하면 된다. 사실 간단히 아래와 같이 구현이 가능하다. type CustomMouseEvent = MouseEvent; const TestComponent = () => { const handleSelect = (event: CustomMouseEvent) => { const eventTarget = event.target as HTMLElement; console.log(eventTarget.innerTest) }; return (..

보통 우리는 키보드를 javascript로 핸들링 할때, keyCode를 사용해서 적용 한다. 왜냐하면 구글링을 하다보면 KeyCode에 관한 내용들이 많기 때문이다. 하지만 아래의 문서를 보면 Deprecated 되었다고 나와있는 것을 알 수 있다. 정단히 정리하면, 웹 표준에서 제거가 되었다. 호환성 목적으로 사용하기는 하지만, 사용하지 않는것을 추천한다. 1. keyCode 그래도 대부분 사용하지 않더라도 대략적인 사용법은 아래와 같다. 요즘 리액트를 많이 쓰니 리액트 기준으로 관련 로직을 보면 아래와 같다. 아래와 같이 간단하게 사용가능하다. onKeyDown 리스너를 통해서 키보드를 누르는 event를 받는다. 그리고 받은 이벤트에 event.keyCode를 보면 숫자가 적혀있는 것을 알 수 있..

키보드 포커싱에 대해 알아보자. 기본적으로 마우스 없어도 tab을 이용해서 input 값들을 넣을 수 있다. 그리고 사용자 기준으로 tab을 눌렀을 때 포커싱(마우스 커서)의 위치가 예상 되는 곳에 존재할 수 있도록 만들어 보자. 중요하지 않지만, 매우 중요한 기능이다. 웹 접근성관 관련된 키보드 포커싱에 대해 알아보자. 0. 기본 포커싱 우리는 input창을 누르면 자연스럽게 input창에 커서가 들어간다. 즉, 웹은 사용자가 사용하는 부분에 대해서는 기본적으로 자동으로 포커싱을 시켜준다. 상호작용하는 element로는 a 태그, input 태그, select 태그, button 태그들이 있다. 그리고 이러한 태그들을 tab키를 이용해서 키보드로 이동을 할 수 있다. (반대로 이동은 shift + ta..