FE

이 두 화면의 차이점이 보이시나요? (내용 빼고..)간단하게 생각하면 두 화면 상단에 있는 버튼의 모양이 다릅니다. 왼쪽 이미지는 뒤로가기 버튼, 오른쪽 이미지는 닫기 버튼임을 알 수 있죠.더 나아가면 뒤로가기와 닫기를 누를 때 일어나는 화면 전환이 있습니다.보편적으로

✏️ 요약 React + typescript 환경에서 html2canvas 라이브러리를 활용하여 AWS S3에서 불러온 이미지를 포함한 DOM 캡처 구현하기 🎨 구현 화면

😓 발생한 문제 많은 이미지들을 모두 로컬에 저장할 수 없기 때문에 S3 서버에 저장하고 이미지 url 을 Next.js의 Image 태그에서 사용하고자 했다. 공식 문서 및 여러 문서들을 보고 나서 next.config를 수정하는 방법을 사용하기로 했다. 하지만 여

개인 프로젝트를 진행하던 중, emotion과 storybook을 연결하는 과정에서 css 오류를 해결하려고 여러 방법을 사용했더니 너무 많은 패키지들을 설치하게 되었다. 불필요한 패키지들을 그대로 두면 용량도 잡아먹고 속도에도 영향을 줄 것 같아서 정리하고 싶었다.p

styled-component, scss 같은 스타일링 라이브러리를 사용하다가 npm trend에서 emotion을 접하고 개인 프로젝트에 적용시켜 보았다.npm trend : emotion/react vs styled-component공식문서랑 기술 블로그를 확인하다

Vite + React + Typescript 환경에서 개발을 진행하다가 svg 파일로 아이콘을 불러오려고 했다.평소처럼 ReactComponent 로 svg 파일을 불러와서 컴포넌트로서 사용하려고 했는데 오류가 발생하였다.오류😱 오류는 항상 예상하지 못한 부분에서

short-form 형태의 프로젝트를 구현 중 입니다. 다양한 video 재생 방법이 있는데, 그 중에서 가장 많이 사용되는 라이브러리인 react-player를 사용해서 페이지를 구현했습니다.📚 react-player 페이지기본 코드는 이렇게 ReactPlayer

mouseOver 이벤트를 상위 엘리먼트에 줬는데, 하위 엘리멘트에서도 발생해서 엄청난 지진 현상이 발생했다. 정지 버튼 위에 마우스를 가져가면 깜빡이는 현상이 문제이다.처음에는 z-index로 해결할 수 있을까? 했지만 근본적인 해결 방법이 아니었다.이벤트에는 이벤트

우리가 검색 인풋에 단어를 입력하면 입력되는 글자가 변경됨에 따라 값 변경 함수가 계속해서 호출되게 된다. 이렇게 잦은 값 변경이 일어나거나 혹은 연결된 API가 있는 경우 불필요한 렌더링 등으로 성능 저하가 일어나기 쉽다. 그래서 값 변경 사이에 일정한 시간 텀을 두

React Native ios 개발 중에 에러 메시지를 마주했다.Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.이 오류는 @re