내맘대로 개발일지

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 바로 어제도 아니다. 몇 시간 전 포스팅에서 카카오톡 인앱에서 이미지 다운로드 하는 방법을 기록했다. { const baseUrl = window.location.origin; const url = new URL("/", baseUrl); const userAgent = window.navigator.userAgent; const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( userAgent ); if (isMobile && navigator.share !==..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 지난 포스팅에서 이미지 다운로드 하는 방법을 기록했다. [NextJS] 이미지 다운로드 하는 방법 📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 모듈화가 중요하다는 말을 참 많이듣는것같다. 전부 함수화 해서 모듈화 해서 사용하고 있는데 이미지를 다운 8735.tistory.com 이게 진짜 소름인게, 크롬이나 사파리 같은 곳에서 잘 되는데 카카오톡 인앱 웹에서는 안된다. ( 나는 진짜 너무 열받았었다. ) 카카오 데브톡에 가도 나랑 비슷한 상황에 처한 사람이 많..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 공유하기 버튼을 생성하는 일이 제일 많은 일 중에 하나라고 뽑을 수 있을 정도로 참 많이 작업을 하는 것 같다. 그래서 함수로 만들어서 필요할때마다 붙여쓸 수 있도록 해놓았는데, 다른 프로젝트를 하거나 필요한 상황이 있을 때 쉽게 가져가다 붙일 수 있도록 하려고 한다. 시스템 공유나 URL 복사하기 같은 경우에는 이전 포스트에서 정리해놓았으니 확인하고 오면 더 시스템 공유까지 붙여 있어보이는 공유하기를 만들 수 있을 것이다. [ 시스템 공유하는 방법 & URL 복사하는 방법 보고오기 ] [NextJS] NextJS 모바일 시스템공유 하는방법 📱테스트 환경 "r..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 기존에 .tsx 파일에 같이있던 함수를 분리하는 도중에 해당 코드에서 에러가 발생했다. unhandledRejection: Error [ReferenceError]: Image is not defined const imageElement = new Image(); ^ 이게 에러가 브라우저 콘솔창에서는 안나왔는데, VS Code 터미널에는 발생하는 에러였다. 딱히 문제가 되는 건 없었는데, 매우 거슬렸다. 해당 스택오버플로우를 참고해서 수정해봤는데 깔끔하게 실패했다. 에러는 나랑 같은 것 같은데, 이렇게 하는게 아닌 것 같았다. { }, [])

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 개발환경 ( http ) 에서는 문제가 없었는데 배포환경 ( https ) 에서는 한번씩 디자인이 깨졌다. 아니면 새로고침 했을 때 디자인이 깨져있다가 원상복구되는 현상을 겪었었다. 해결방법을 찾아보니, .babelrc 를 이용하여 해결하는 방법은 되게 많이 설명되었는데, NextJS 11 버전부터는 비권장 하는 방법이다. 그래서 열심히 정보를 찾아봐서 하는 방법을 찾아서 기록해두려고 한다. 언제나 복사 + 붙여넣기 하면 사용할 수 있도록. 먼저 stlyed-components 를 추가해준다. 나는 NextJS + Typescript 환경이니까 설치 npm i..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 이 코드는 정말 많이 사용하는 것 같다 .. 아무래도 모바일 대응을 하다보면 공유하기 버튼을 클릭 했을 때 시스템 공유 모달이 열리게 하고 싶은 경우가 많아서 그렇다. 그래서 언제든지 꺼내사용할 수 있도록 여기에 기록하려고 한다 . 언제나 똑같이 복사 + 붙여넣기 하면 바로 사용할 수 있도록 .. 개발을 못하는 나를 위해 복붙은 언제나 중요한 것 같다 ^^ share.tsx export const testShare = () => { const baseUrl = window.location.origin; const url = new URL("/", baseUrl..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 모듈화가 중요하다는 말을 참 많이듣는것같다. 전부 함수화 해서 모듈화 해서 사용하고 있는데 이미지를 다운로드 하는 일은 많을 것 같아서 해당 함수를 여기에 기록해두려고 한다. 언제든지 복사해놓고 사용 할 수 있도록 코드를 넣어놓도록 해야겠다. downloadImage.tsx export const downloadImage = ( imageUrl: RequestInfo | URL, fileName: string ) => { // 이미지를 불러와서 Blob 객체 생성 fetch(imageUrl) .then((response) => response.blob()) ...

😢 내가 겪은 문제 원래는 작년까지만 해도 ReactJS 개발을 했었다. 하지만 SEO 의 중요함을 깨닫고 SSR 개발을 진행하려고 했다. 그중 React 기반의 NextJS 를 알게 돼었고, 지금까지 NextJS 개발을 이어오고 있다. 요즘엔 SEO 의 중요성이 강조되면서 같이 SSR 프레임워크가 인기가 같이 높아지고있다고 한다. 그래서 SSR 의 인기가 많아지는 이유를 여러 방면에서 살펴 보려고 한다. 다음과 같은 이유가 있다고 한다. SEO (Search Engine Optimization) 개선 : 검색 엔진은 페이지의 내용을 수집하고 인덱싱하는데 HTML 내용을 기반으로 작업한다. CSR (Client-Side Rendering)의 경우 초기 로딩 시에는 빈 페이지가 보여지고 JavaScript..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 React 로 개발할 때는 그냥 props 전달해주면 바로바로 사용할 수 있었던 것 같은데 .. Nextjs + Typescript 로 개발하려니 props 가 전달이 안된다 .. 계속 없는 오버러드라고 사용할 수가 없단다. 난 정말 타입스크립트가 너무 어렵다 .. ㅠ width: ${(props) => props.similarPercentage}%; 해서 해결방법은 인터페이스를 만들고 사용하는 방법이다. 생각보다 간단하긴 한데 타입스크립트를 알고 쓰기 위해서는 많은 공부가 필요할 것 같다 .. 해당 코드는 % 막대기를 만들면서 작성한 코드이다. export ..

📱테스트 환경MacBook Pro 13 ( M2 )😢 내가 겪은 문제신규 프로젝트를 진행할때마다 NextJS + TypeScript 프로젝트를 생성하려고 하는데 명령어가 익숙하지가 않아서맨날 검색해서 사용했는데 .. 이럴꺼면 그냥 기록해놓고 필요할때마다 긁어와서 사용해야겠다 ^^ 해당 명령어를 터미널에서 사용하면 Typescript 가 적용된 Next 프로젝트를 생성 할 수 있다.@latest  latest 는 번역해도 "최신의" 라는 뜻인데 말 그대로 최신버전을 설치한다는 말이다.npx create-next-app@latest --typescript Ok to proceed ? 계속 진행 할꺼냐고 묻는말에 y 를 해답해주고What is your Project named ? 프로젝트 이름을 설정해주고..