민프

'use client'는 Client에서만 render한다는 의미가 아니다'user client' 명령어가 있든 없든 모든 Component(Client Component, Server Component)는 Backend에서 먼저 pre-render가 되는데 그건 전부 interactive하지 않는 HTML로 변환되게 된다.여기에서 'use client'를 사용하게 되면 어떤 Component가 hydreate 되는지, 즉 어떤 것이 Interactive를 필요로 하는지, 더 쉽게 말해 어떤 것이 JavaScript가 필요한지, 어떤 것이 불필요한지 등을 결정하는데에 사용하게 된다. 정리해보자면 1. 모든 것이 첫번째로 Server Side에서 Pre-Render가 되어서 HTML로 변환된다.2. HTM..

AWS에서는 S3를 통해 정적 웹 사이트 호스팅을 할 수 있습니다. 따라서 PHP, JSP처럼 서버 스크립트가 포함된 동적 웹 사이트만 아니라면 웹서버의 역할로도 사용할 수 있습니다. 근데 S3에서는 http의 웹서비스만 제공하고 있다보니 CDN 및 SSL 과 같은 필수 작업들이 필요한데, 이러한 작업은 모두 CloudFront에서 해결해줄 수 있습니다. 따라서 이번 포스팅에서는 React앱을 빌드 후 배포할 때 S3 + CloudFront로 배포를하고 Jenkins를 이용해서 배포 자동화를 구축해보려고 합니다. 순서는 아래와 같습니다. 1. CRA로 프로젝트 만들기 -> 빌드 실행 2. AWS S3, CloudFront 관련 설정하기 1. CRA로 프로젝트 만든 후 빌드하기 그럼 첫번째로 CRA로 간단..

리엑트란? https://ko.legacy.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org 공식 홈페이지를 보면 아래와 같이 나와있다. React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. - React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다. - UI를 구성하는 컴포넌트 기반의 개발을 지원한다. - React에서의 "가상 DOM"은 React가..

자바스크립트에서 console.log 메시지를 제거하는 가장 간단한 방법은 웹팩(Webpack) 또는 다른 빌드 도구를 사용하여 프로덕션 빌드를 최적화하는 것이다. 하지만 React의 기본 환경인 Create React App(CRA)은 이러한 레벨의 세부 조정을 허용하지 않는다. 따라서 다른 빌드 툴을 사용해야하는데 빌드툴에서는 Babel, Terser 등... 여러가지가 있지만 나는 Terser를 해보려고 한다. 근데 Terser라는 라이브러리를 통해 console.log를 제거하는 것이 가능하다. Terser란 무엇일까? 공식 깃헙에서는 아래와 같이 설명하고 있다. A JavaScript mangler/compressor toolkit for ES6+. 여기에서 mangler, compressor이..

overflow-y: scroll; /* 스크롤바의 너비를 0으로 설정하여 숨김 */ ::-webkit-scrollbar { width: 0; background: transparent; }

내가 원하는 모습은 위 사진과 같다. 처음엔 moment 라이브러리로 시간 차이를 구해서 카운트 다운을 해주려고 했는데 관련 라이브러리가 있어서 사용해보았다 라이브러리 설명은 아래 링크에 들어가서 보면 된다. https://www.npmjs.com/package/react-countdown react-countdown A customizable countdown component for React.. Latest version: 2.3.5, last published: 7 months ago. Start using react-countdown in your project by running `npm i react-countdown`. There are 155 other projects in the np..

STOMP? https://minf.tistory.com/220 [STOMP] STOMP란 무엇일까? STOMP(Simple (or Streaming) Text Oriented Message Protocol )란 무엇일까? 공식 홈페이지에 따르면 STOMP는 단순(또는 스트리밍) 텍스트 지향 메시징 프로토콜입니다. STOMP는 STOMP 클라이언트가 모든 STOMP 메시지 minf.tistory.com ㅇ. NPM 설치 npm i @types/sockjs-client npm i sockjs-client npm i @types/stompjs npm install @stomp/stompjs ㅇ. 코드 import { Client } from "@stomp/stompjs"; import SockJS from ..

ERR! Error: The package "@esbuild/darwin-arm64" could not be found, and is needed by esbuild. ERR! ERR! If you are installing esbuild with npm, make sure that you don't specify the ERR! "--no-optional" or "--omit=optional" flags. The "optionalDependencies" feature ERR! of "package.json" is used by esbuild to install the correct binary executable ERR! for your current platform. ERR! at generateBi..

아래 공식문서와 예시 링크를 참고하였다 https://codesandbox.io/s/lym08b?file=/demo.tsx divine-haze-lym08b - CodeSandbox https://github.com/mui/material-ui/blob/v5.12.3/docs/data/material/components/slider/DiscreteSliderLabel.tsx codesandbox.io https://mui.com/material-ui/react-slider/ React Slider component - Material UI Sliders allow users to make selections from a range of values. mui.com const marks = [ { valu..