내맘대로 개발일지

📱테스트 환경 "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 ? 프로젝트 이름을 설정해주고..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 요즘 또 남들이 핫하다는 티처블 머신을 이용해서 개발해보고싶었다. 먼저 필요한 걸 설치해줬다. npm install @tensorflow/tfjs @tensorflow-models/mobilenet @tensorflow-models/knn-classifier 코드 자체는 공식 홈페이지에 가도 설명이 너무 잘 돼어있어서 딱히 설명이 필요할 것 같진 않다. import { useEffect, useRef } from 'react'; import * as tf from '@tensorflow/tfjs'; import * as tmImage from '@teachablemachine/i..