React

JSX(JavaScript XML)는 자바스크립트의 확장 문법으로, React에서 UI를 표현하기 위해 사용된다. 이 JSX는 이름에 걸맞게 XML과 매우 비슷하게 생겼는데, 브라우저에서는 JSX를 직접 실행할 수 없기 때문에 JSX 코드를 자바스크립트 코드로...

1. 문제 React 앱의 index 파일에 React.StrictMode를 사용하려고 건드리다가 아래와 같은 에러를 발견했다. 문제 코드 >ReactDOM.render is no longer supported in React 18. Use createRoot in

✨ 시작하며 Redux는 JavaScript 애플리케이션의 상태 관리를 용이하게 만드는 라이브러리이다. 현업에서 자주 사용함에 따라 현재 만들고 있는 TypeScript 언어를 사용 중인 프로젝트에 적용해 보고자 했고, 그 과정을...

로그인 여부를 체크해서 필요한 페이지, 접근경로만 보여 주었지만 URL 입력을 통해 언제든 접근할 수 있는 부분에 대해서 고민이 되었다. 아예 Router에서 로그인 인증 / 접근 제한을 설정하는 방법이 있다고 하여 프로젝트에 적용해...

리팩토링 중인 리액트 프로젝트를 Netlify로 배포하면서 단계별로 오류를 만나보았다...구글링하면서 하나씩 배운 오류 해결방법을 한 곳에 정리해 보려고 한다. 1. 배포하기 - build failed Github Repository에 push...

React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리이다. 프로젝트에서 조금 더 규격화된 API 요청 방식 고려와 useEffect 사용을 줄여 복잡한 코드구조를..

React 프로젝트에서 유튜브 url을 갖고 커스텀한 비디오 플레이어를 구현하면서 react-player 라이브러리를 사용하게 되었다. React-Player 영상 요소로 플레이어를 구현할 때 사용하는 라이브러리 중 하나이다. 다른 플레이어 라이브러리들 중...

resister와 Controller의 주요 차이는 Uncontrolled Components와 Controlled Components의 사용과 관련이 있다. Uncontrolled Components(비제어 컴포넌트) : React 내 상태 관리가 아닌...

현재 실무 프로젝트에서 emotion을 사용하고 있는데,기존의 styled components와 비슷해서 어려울 건 없지만 theme 세팅 방법에 대해 정리해두려 한다...

1탄 2탄에 나누어 리액트에서 첨부파일을 가져와 화면에 보여주고, 가져온 첨부파일을 API로 요청하는 방법에 대한 글을 써보려 한다. 이번 글에서는 `버튼` 클릭으로 `input` 파일 선택창을 실행하는 방법과, `fileChangeHandler`에서...

보통 이미지/오디오 업로드 시 formData를 사용해 API 요청을 하게 되는데, 백엔드에서 formData 안에 application/json 형식의 json data와 파일을 함께 넣어서 요청하는 방식으로 구현해 주셨다. 처음에 보고 읭 json data를 for

React + Vite + TS 환경에서의 Storybook 세팅 방법과 Storybook 컴포넌트 구현 정보가 생각보다 많지 않았어서 여기서 찾고 저기서 찾고 많이 헤맸었다. 그래서 Storybook 적용하면서 틈틈이 기록해 두었던 것을 블로그 글로 남겨보려 한다..

chromatic은 스토리북 관리자들이 만든 무료 퍼블리싱 서비스이다. Netlify, Vercel과 같이 스토리북 사이트를 배포할 수 있을뿐만 아니라, 크로마틱 사이트 자체에서 컴포넌트를 미리 확인할 수 있고, 빌드 내역이 기록되어 컴포넌트 단위로 변경 사항을 확인할