Javascript 104

[React] ReactJS 가 인기가 많은 이유

😢 내가 겪은 문제 나는 원래 Spring JAVA 개발을 했다. 짝꿍인 jQuery 와 함께 웹 프론트 개발을 처음 시작했었다. 대한민국은 자바 공화국이라 스프링만 할줄 알아도 밥굶을일은 없다고 들었다. 근데 React 가 프론트 개발에서 엄청난 인기를 받고 있다고 해서 궁금했다. React 는 어떤 강점이 있는지 간단하게 확인해보고 이런게 있구나 ~ 하고 내가 쓰는 React 가 어떤 강점이 있는지 확인해보려고 한다. 가상 DOM (Virtual DOM): React는 가상 DOM을 사용하여 효율적으로 UI를 업데이트할 수 있다. 단방향 데이터 흐름: React는 단방향 데이터 흐름을 지원한다. 이로 인해 데이터의 흐름을 예측 가능하고 관리하기 쉽게 만든다. 컴포넌트 기반 아키텍처: React는 컴포..

Javascript/React 2023.08.16

[NextJS] Syled-components props 전달 하는 방법

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

Javascript/Next 2023.08.16

[NextJS] NextJS Typescript 프로젝트 생성

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

Javascript/Next 2023.08.14

[NextJS] NextJS 에 티처블 머신(Teachable Machine) 붙이기

📱테스트 환경 "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..

Javascript/Next 2023.08.09