AI Platform / Web

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

모달(Modal)이란, 원하는 내용을 화면 위에 띄워 표현하는 방식이다. 기본적으로 많은 UI 라이브러리에서 쉽게 제작이 가능하다. 오늘은 Modal을 Component로 만들고 Nextjs/React에 적용하는 법을 알아보자. 모달을 만들기전에 알아야할 개념중 첫번째가 Portals라는 개념이다. 우리는 필요한 위치에 Component로 만들어 모달을 넣어줄 것이다. 그리고 추가로, 다른 Component보다 앞에 표시가 되려면 z-index를 사용하여 표현을 한다. 이때, 중요한 것은 부모의 z-index가 작다면, 자식의 z-index가 아무리 크더라도 부모의 z-index를 따르게 된다. 그렇기 때문에 Modal 자체를 종속적으로 Component 내부에 넣으면 다른 컴포넌트보다 앞에 있지 않는 ..

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

JavaScript에서 if문과 비슷한 switch 문에 대해 적어보려 한다. 우리는 switch문을 언제 사용하고, 잘 사용하고 있는지에 대해 고민해 보면 좋을 것 같다. 기본적인 문법 설명은 생략한다. eslint관점에서 우선 설명을 풀어본다. 그리고 TypeScript에서 SRP(Single Responsibility Principle) 원칙으로 switch를 어떻게 사용해야 할지에 대한 고민을 함께 해본 후, 추가로 React에서 활용해 보도록 하자. 일반적으로 우리는 switch 문에서 default값을 꼭 넣어줘야 에러가 발생하지 않는다고 생각한다. 왜냐하면, 개발자도 사람이기 때문에 실수로 모든 조건을 넣지 않아 예외가 발생 할 수 도 있기 때문이다. 또한, eslint 관점에서 defau..

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

웹팩은 모듈 번들러로 프런트엔드 프레임워크에서 가장 많이 사용되고 있다. 쉽게 말해서 웹팩은 웹을 구성하고 있는 HTML, CSS, JAVASCRIPT 등을 모두 각각의 모듈로 보고 이를 조합해서 하나로 만들어주는 도구라고 생각하면 된다. 모듈 번들러라는 단어가 어려울 수 있지만, 쉽게 이야기하면 모듈 변환기라고 생각해도 좋다. 위 그림은 웹팩 공식홈페이지에 있는 그림이다. 그림을 보면, 복잡한 파일들을 간단하게 결합시켜주는 느낌이라는 것을 한눈에 파악할 수 있다. 시작에 앞서 nodejs에 관한 환경 설정은 아래의 url로 대체한다. [Web/nodejs] - nodejs 기초 총 정리 Webpack 프런트엔드에서 대표적인 모듈 번들러인 웹팩에 대해 알아보자. 웹팩은 복잡한 입력 모듈을 단순한 모듈로 ..

다음 애러에 대한 해결책을 제시한다. typescript를 처음 척용하면서 삽질을 많이 했다. 나의경우는 create-react-app을 통해 프로젝트를 생성했다. 그러니 File was processed with these loaders: react-refrash 관련 애러가 발생했다. 추가로 require('/node_modules/react-refresh/runtime.js' 라는 에러도 발생을 했다. 객체에 대한 export가 계속 안되길래 as const 나 enum 등등 구글링해서 나오는 모든 것들을 해도 안됐었다. 약 3인정도 고민을 했었다. react-refresh관련 에러가 나오는 이유는 단순했다. color상수 설정을 해서 아래와 같이 만들었었다. export const Colors :..

REACT CRUD 리액트에서 가장 기초이자 기본이 crud이다. 다른 블로그들과의 차이점은 가능한 모든 case를 정리하여 성능비교까지 적어보려한다.(계속 업데이트 예정) 일반적인 javascript에서 todo list를 만들면서 crud를 많이 구현해 보았을 것이다. 일반적인 Javascript와 react CRUD의 차이점은 Immutability(불변성)에 있다고 할 수 있다. 기본적으로 리액트는 Mutation 하지 않게 작성을 해야한다. 아래의 예는 데이터 값을 직접 변경(mutate)하는 예이다. 즉, mutation한 수정이라고 할 수 있겠다. let player = {score: 1, name: 'Jeff'}; player.score = 2; // 결과값 // {score: 2, nam..