주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

react(nextjs), tailwind를 통해 별점 컴포넌트를 만들어보자.  준비물로는 5점짜리 별 5개가 이어진 이미지 2장이 필요한데, 별이 채워진 이미지와 별이 채워지지않은 이미지가 필요하다. (하나의 별만 있다면 크기를 지정하고 반복해서 배경이미지를 repeat 시키면 될 듯하다.) 그 이유는 마우스가 호버될때, 아래 영상과 같이 마우스 커서에 따라 채워진 이미지를 보여주기 위함이다. 컴포넌트 코드'use client';import clsx from 'clsx';import React, { useState } from 'react';interface Props { value?: number; onChange?: (radio: number) => void; width?: num..

React의 가상 DOM, Vue의 가상 DOM과 비교 가상 DOM이란?DOM (Document Object Model)브라우저가 제공하는 문서 객체 모델HTML 요소를 트리 구조로 표현하며, 브라우저에서 렌더링되는 실제 DOM을 말한다.실제 DOM은 업데이트가 발생할때마다 전체 DOM 구조를 다시 계산하고 렌더링한다. 가상 DOM (Virtual DOM)메모리 상에서 실제 DOM의 경량화된 사본을 만드는 개념으로 DOM 상태를 Javascript 객체로 나타내어 빠르게 연산할수 있다. 실제 DOM 조작 전에 변경 사항을 비교하고 필요한 부분만 실제 DOM에 업데이트 하는 방식으로 성능 최적화를 하기 위하여 생성된다.리액트는 가상 DOM을 업데이트 할때 최소한의 DOM 업데이트를 보장하기 때문에 복잡한 ..

리액트 컴포넌트는 생성(Mount), 갱신(Update), 제거(Unmount) 주기를 가지게됩니다. 해당 주기에서 사용되는 메소드에 대해 알아보겠습니다. 생성(Mount) constructor(props) 메소드를 바인딩 하거나 state를 초기화하는 작업이 없을 경우 사용합니다. 만약, 해당 작업이 없다면 사용하지 않아도됩니다. getDerivedStateFromProps(nextProps, prevState) props로 받아 온 값을 state로 넣어주고 싶을때 사용합니다. state를 변경할 때는 setState가 아닌 반환 값으로 변경해야하며 반환 값이 null일 경우에는 아무일도 발생되지 않습니다. render() 반드시 구현되어야하는 유일한 메소드입니다. 이 메소드가 호출되면 this.pr..

https 적용을 진행하던 중에 오류가 나서 해결을 못하고 있었습니다.ㅠ 강의대로 진행했는데, 왜??? 이러던 중에 질답게시판에 제로초님이 블로그글을 참고하여 진행하라고 댓글을 달아두신걸 봤고.... 제가 나중에 헷갈릴가봐.. 나름대로 추가 정보를 정리하여 글을 작성합니다. 약간의 난관들도 있었지만, 다행이 성공했습니다.! 제로초님 블로그를 거의 대부분 참고했습니다. www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb (NodeJS) nginx와 let's encrypt로 SSL 적용하기(+자동 갱신) 리눅스에서 letsencrypt를 직접 설치합시다. 2020년 9월부로는 기존 방식보다 snap을 통해서 설치하는 게 더 쉬운 것 같습니다(htt..