React 46

[IT] React ( CSR ) vs Next ( SSR )

원래는 React 개발을 하고 있었는데 페이지별로 공유했을 때 META TAG 가 변경돼게 하고 싶었다. 이게 React 같은 경우에는 CSR 이라 안돼고, 그렇게 하고싶으면 NextJS SSR 를 이용해야 한다고 했다. 이때부터 내가 NextJS 개발을 이어하게 되는 계기가 되었다. 그리고 애초에 요즘에는 SSR 개발이 유행한다고 하더라. ( 뇌피셜임 ) 그래서 간단하게 CSR 과 SSR 의 차이를 알아보자. [ 그전에 React 의 강점을 살펴보고 싶으면 ? ] [ReactJS] ReactJS 가 인기가 많은 이유 😢 내가 겪은 문제 나는 원래 Spring JAVA 개발을 했다. 짝꿍인 jQuery 와 함께 웹 프론트 개발을 처음 시작했었다. 대한민국은 자바 공화국이라 스프링만 할줄 알아도 밥굶을일은..

IT 2023.08.16

[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

[CSS] postition absolute • fixed 했을 때 가운데정렬

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 나는 개발할 때 CSS 작성하는게 제일 햇갈리고 어렵다... 원래 필요할때마다 찾아쓰라고는 하는데 할때마다 멈칫멈칫 하는게 아주 기분이 나쁘다. 그래서 그냥 기록해놓는게 편하겠다 싶어서 기록하기로 하였다. 아주아주 간단하고 복사해서 붙여놓으면 바로 쓸 수 있다. 아주 좋다고 할 수 있다. left: 50%; transform: translate(-50%, -50%); 중요한건 2번째 줄 코드인데 translate(-50%, -50%): 백분율 값을 사용하여 요소를 수평 및 수직으로 이동 -50% 값은 요소의 너비의 반만큼을 왼쪽(수평)으로, 높이의 반만큼을 위..

CSS 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