Ec2 인스턴스로 배포를 진행하면서 npm run start 와 npm start의 차이가 있는지 의문이 생겨 알아보았다.결론은 같은 결과를 내는 명령어로 script가 정의되어 있는 경우 동일하게 작동된다.npm start 를 제외한 모든 script 는 npm run 을 사용해야한다script 실행 명령어 중 start와 test 스크립트의 경우, 자주 사용되기 때문에 npm run에서 run을 생략해도 무방하다. npm run start npm run test // run 생략npm startnpm test script에 정의되어 있지 않는다면? npm start의 경우는 기본적으로 node server.js 를 실행시킨다.node server.js 는 서버를 시작하는데 사용할 수 있다.

github의 Readme 작성 중 해당 프로젝트의 스크린 샷 이미지를 Readme에 넣고 싶어 방법을 찾아봤다.readme 파일에 이미지 넣는 방법Github 프로젝트의 Issue 탭으로 들어간다.New Issue 버튼을 눌러 이슈 추가 화면으로 들어간다. 이미지를 내용 칸으로 드래그 앤 드랍한다.![Uploading {image name}]() 문구가 나오고 잠시 뒤 Html의 이미지태그 or  이미지 주소가 나온다 해당 주소를 Readme 에 붙여 놓으면 된다. 이미지 사이즈 조정하기img 태그로 width 와 height값을 넣어준다.

프로젝트를 진행하다 보면 데이터를 시간 순으로 정렬 할 때가 있다.일반적으로 날짜, 시간에 따라 내림차 순 오름차 순으로 데이터를 정렬한다. 테스트 데이터const data = [ { user: 1, createDate: '2024-03-10' }, { user: 2, createDate: '2024-02-11' }, { user: 3, createDate: '2024-02-15 }, { user: 4, createDate: '2024-03-09 }, { user: 5, createDate: '2024-03-20 },] 오름차 순과거에서 최신 날짜 순으로new Date()를 사용하여 문자열로 입력된 날짜를 날짜 형태로 변환한 후..

키에 토큰(jwt)을 저장하거나 로그인 페이지 구성 시 id같은 사용자 정보를 저장하는 등 react-cookie 라이브러리를 활용하는 경우가 많 react-cookie에 대해 정리해보았다.cookie?쿠키는 사용자 웹 사이트 방문 시 생기는 4KB 이하의 작은 파일로 키와 값이 들어있는 데이터 파일 이다. 쿠키는 사용자가 페이지를 얼마나 자주 방문하는지 알려줌으로써, 사용자가 관심을 갖는 정보를 파악할 수 있도록 해주는 역할을 한다. 예를 들어 쇼핑몰 사이트의 장바구니를 상품을 넣고 며칠 후에 방문했을 때, 상품이 그래도 유지되어있는 이유는 쿠키를 활용하기 때문이다.react-cookiereact-cookie npm react-cookieUniversal cookies for React. Latest ..

관제 시스템 프로젝트 중 로그인 연장 버튼을 누르면 로그인 상태를 연장 시키는 기능을 넣어야 해서 react-idle-timer 라이브러를 활용해서 제작하여 react-idle-timer 사용 방법에 대해 정리해보았습니다. react-idle-timerReact 애플리케이션에서 사용자가 일정 시간 동안 비활성 상태일 때 특정 작업을 수행하도록 돕는 라이브러리입니다. 예를 들어, 사용자가 일정 시간 동안 키보드나 마우스 등의 입력을 하지 않는 경우 세션을 만료시키거나, 경고 메시지를 띄우는 등의 기능을 구현할 수 있습니다. 👉 선택 이유개발 효율성: react-idle-timer는 다양한 비활성화 이벤트를 기본으로 제공하며, 설정이 간단하여 직접 타이머 기능을 구현하는 것보다 빠르게 프로젝트에 적용할 수..

tailwind에 대해 처음 알아봤을 때 더욱 쉽게 작성하고 사용할 수 있도록 해주는 twin.macro(Tailwind와 emotion 또는 Styled Components를 혼합 - 포스팅된 글은 emotion을 사용했다)에 대해 알아보았다.twin.macro?twin.macronpm : https://www.npmjs.com/package/twin.macrogithub : https://github.com/ben-rogerson/twin.macro#readme NextJS 에서 사용 방법설치tailwind, emotion, twin.macro 설치//emotionnpm i @emotion/react @emotion/styled @emotion/css @emotion/server @emotion/ba..

관리자 페이지같이 다수의 리스트가 있는 화면을 만들다 보면 경우에 따라 체크 박스를 통해 여러 리스트를 선택 후 해당 리스트들에게 특정 기능을 부여할 때가 있다.체크박스 전체 선택 / 해제 & 개별 선택thead에 있는 체크 박스 선택 시 리스트 전체 체크, 재 선택 시 전체 해제개별 선택 후에도 thead에 있는 체크 박스 선택 시 리스트 전체 체크import { useState } from "react";export default function Test() { const userDatas:any = []; for (var i = 1; i { if (checked) { setCheckItems((prev) => [...prev, id]); } else { setChe..

카테고리나 리스트 등 같은 영역에서 사용자의 집중도를 위해 다수 중 하나만 선택되어 영역이 보이거나 선택된 ui가 보여야 할 때가 있다. 리스트 선택 시 관련 정보 하나만 보이기선택 시 관련 content가 보이고 재 선택 시 닫기오픈 된 상태에서 다른 리스트 선택 시 기존 content닫히며 새 content보이기import { cls } from '@/utils/config';import { useState } from 'react';export default function List() { // 임시 데이터 const userDatas = []; for (var i = 1; i { if (countIndex === index) { setCountIndex(-1); } el..

Next.js 13에서 사용할 수있는 Server-Side Rendering (SSR) 에 대해 애기 해보고자 한다.글을 쓰게 된 이유는 Notion.api를 활용해서 블로그를 제작해봤는데 api를 불러올때 브라우저를 통하면  CORS 에러가 나 해결방안으로 SSR을 사용했기 때문이다.  CORS 에러CORS(Cross-Origin Resource Sharing) 에러는 클라이언트에서 다른 도메인에 요청을 보낼 때 발생할 수 있습니다. 이 에러는 보안상의 이유로 브라우저가 동일 출처 정책(Same-Origin Policy)을 적용하기 때문입니다.관련 글 : https://minsun309.tistory.com/entry/CORS-%EC%97%90%EB%9F%AC Notion APICORS 에러에 대한 해..

Next.js Amazon EC2 배포(1) 에서 진행한 인스턴스 생성에 이어서 인스턴스에 접속 & 무중단 배포에 대해 정리해보았다. 인스턴스에 접속.pem파일을 저장해둔 곳으로 가서 ssh 접속을 해야한다. 생성한 인스턴스에 들어가서 우측 상단에 있는 연결 버튼을 누른다.인스턴스에 연결 중 페이지에 있는 탭 중 SSH 클라이언트 클릭해 예로 있는 명령어를 .pem 파일이 위치한 터미널에 들어가 명령어를 사용한다.// 예ssh -i ".pem파일이름" ubuntu@ec2-00-000-00-000.ap-northeast-2.compute.amazonaws.com접속에 성공하면 yes를 입력하고 ubuntu@ip 라는 초록 글씨가 나오면 성공적으로 접속이 된 것이다.Git & Node아래 명령어를 입력해 u..