React12 React Image Upload 컴포넌트 제작 1. 기능 image upload(drag drop, paste) image Resize (라이브러리 사용) image preview 2. JSX 작성 2-1. Image Upload Component JSX 업로드 {!!resizeFiles?.length && ( )} 2-2. Image Preview Component JSX import { UploadFiles } from "./ImageUpload"; import style from "./ImageUpload.module.scss"; interface Props { resizeFiles: UploadFiles[]; setResizeFiles: React.Dispatch; } export default function ImagePreview({ re.. 2023. 6. 4. [NextJS] Viewport에 들어온 컴포넌트만 불러오기 NextJS에는 코드스플리팅을 위한 Dynamic import라는 기능이 있습니다. 어떤 컴포넌트를 특정 조건에서만 렌더링할때(모달 혹은 hover/ click시 노출되는 컴포넌트가 대표적) 그 컴포넌트를 위한JS를 해당 조건이 true일때 import해오는 기능입니다. 이 기능을 활용하지 않고, NextJS로 페이지를 구성하면 lighthouse의 퍼포먼스에서 처참한 점수를 보실 수도 있습니다. 아무튼 이 기능은 사용하기 어렵지 않지만, 섹션 하나하나가 모여 거대한 한페이지를 이루는 랜딩/이벤트 등의 페이지에서 단순하게 사용하면 퍼포먼스적인 이득을 보기가 힘듭니다. 그 이유는 viewport에 보이지 않는 컴포넌트도 전부 렌더링하기 때문인데, 이를 처리하기 위해서는 해당 컴포넌트가 viewport에 보.. 2022. 4. 17. [React Native Web] 에러 정리 react native web 5편을 작성하기전에 react native를 실행할때 겪은 에러에대해서 정리를 하도록 하겠습니다. React Native는 크로스 플랫폼 개발 프레임워크이기 때문에 일반 네이티브 개발보다 에러가 날 상황이 많습니다. 지금까지 겪은 에러의 이유는 대표적으로, 1. 맥 OS업데이트 2. Xcode 업데이트 3. 다른 맥혹은 PC에서 git저장소를 받아 npm install > pod install을 마치고 실행할때 위의 3가지 이유인데, 위의 상황들에서도 에러가 나지않고 실행하는 팁 및 해결방법을 공유하겠습니다 - Xcode를 Appstore가 아닌 애플 소프트웨어 다운로드 페이지에서 받기 개인프로젝트를 할때라면 Xcode버전변경에따라 에러도 해결해보고 하겠지만, 실무에서 Re.. 2021. 6. 1. [React Native Web] 앱과 웹을 한번에 개발하기 - 4(feat.Styled-Components) (이때까지 잘 되던 프로젝트에 babel.config.js의 @babel/preset-env가 에러를 내고있습니다. can't find variable에러가 뜰경우 해당 presets인 @babel/preset-env을 삭제하고, npm start -- --reset-cache를 실행하여 캐시 삭제 후 npm run ios를 실행하여 확인해보시기 바랍니다! 이 에러 및 자잘한 에러에 대해서 글을 작성 중입니다.) 세팅은 어느정도 완료됬으니 이제 뭘 만들면 좋을까 하다가 역시 Todo List가 최고인것 같아서 네이티브앱에 특화된 Todo List를 제작해보도록 하겠습니다. 본격적인 시작에 앞서.. 1-1. styled Component 설치 npm install --save styled-component.. 2021. 5. 9. 이전 1 2 3 다음
