kasumil의 코딩 공작소

morgan - 파라미터에 따른 로그출력 다르게 하는 라이브러리('dev', 'combined', 'common', 'short', 'tiny')cookie-parser - req에 포함된 cookie를 해석해서 req.cookies를 객체로 만들어주는 미들웨어body-parser - req.body를 객체로 만들어주는 미들웨어(단, 멀티파트폼은 안된다. - 이미지/영상/파일)express-session - 세션 관리용 미들웨어(로그인 시 세션구현)dotenv - 의미 그대로 .(dot)ENV을 읽어 process.env로 만들어준다. -> 가끔 실제 서버 로그에 get(.env)로 공격하는 곳도 있다.실제로 응답해주는 서버들이 있기에...multer - 이미지, 동영상, 파일을 업로드할 때 사용되는 라..

원래는 3부까지가 마지막이었으나 사용하다보니 루트 도메인(subdomain 즉,www을 제거한 본도메인 자체를 말함)이 접속이 안되더라...왜 그런가 봤더니 내가 설정하지 않았음... 방법은 간단한데 알려주는 곳이 별로 없음.LLM한테 물어보는데 대충 대답해서 좀 얼탔습니다... 방법은 간단합니다.Route53으로 이동합니다. 새로운 루트도메인을 생성합니다.기존에 기본 생성된 SOA, NS유형이 아닌 A형태를 만들예정입니다. 아래 내용으로 만들어주세요.리전은 본인이 생성하신곳으로 선택하시면 됩니다.dualstack.~으로 적힌 내용을 선택하시면 됩니다.저장하고 끝. 그러면 해당 주소로 www.domain.com,  domain.com  으로 접속이 가능해져서 끝납니다.이상 끝.

도메인구매 Ec2인스턴스 생성. 보안그룹 생성. 로드밸런스 생성. 타겟그룹(대상그룹) 생성.라우터53 세팅ACM 세팅APACHE 세팅이부분은 솔직히 웬만한 주니어들은 개발용 사이트 설정할떄 뺴곤 접근할 이유도, 볼일도 없을부분이긴합니다.저도 아예 초기로 노베이스로 세팅하는건 처음이라 헤맸네요.남이 만들어놓은 자료 들고 만들었으니까요..저도 회사 재직당시 이부분은 배우질 못했습니다.그냥 적용된 부분 사용하기만...;;; 서버에 접속하는 방법은 tabby, putty, wsl, iterms2가 있으니 여러 방법을 쓰셔서 접속하시면 됩니다.aws로 접속해도 되는데일단 저는 ubuntu에서 적용하였으므로 해당 내용에 맞춰 설명합니다. 아무튼 접속후 설치합니다.# apt 업데이트sudo apt update && ..

도메인구매 Ec2인스턴스 생성. 보안그룹 생성. 로드밸런스 생성. 타겟그룹(대상그룹) 생성.라우터53 세팅ACM 세팅APACHE 세팅앞서 구매한 도메인을 연결하는 작업을 위한 세팅..?입니다.이때 route53 페이지에서 도메인등록을 클릭하면, aws에서 도메인을 구매하는 것이라 비용이 좀 나갑니다;;왼쪽 "호스팅 영역"을 클릭합니다. 우측 상단 호스팅 생성을 클릭합니다.www은 제외하고 구매하신 도메인만 작성합니다.그 후 호스팅 영역 생성 클릭subdomain으로 적힌 곳에 www은 본 도메인으로 사용할 것이니 www을 작성합니다.레코드 유형은 CNAME으로 작성합니다.값을 넣을 차례입니다.해당 화면을 유지한 상태로새창을 열고 앞서 로드밸런서 페이지로 만들어두신 곳으로 이동해서오른쪽 하단 dns값을 복..

도메인구매 Ec2인스턴스 생성. 보안그룹 생성. 로드밸런스 생성. 타겟그룹(대상그룹) 생성.라우터53 세팅ACM 세팅APACHE 세팅방법은 간단합니다.도메인 구매https://www.hosting.kr/domain/search?q=kasumitech 도메인 검색 - 호스팅케이알 Hostingkr도메인/일반 상담 : 09:00~20:00 (평일) 호스팅 장애 상담 : 00:00~24:00 (365일)www.hosting.kr해당 페이지에서 회원 가입을하고, 도메인을 구매합니다.DNS서버를 설정하라는데, 그냥 무시하고 놔둡시다.  AWShttps://aws.amazon.com/ko/AWS에서 회원가입을 진행합니다.EC2에 접속해서 "인스턴스 시작"을 클릭합니다.서버이름은 원하는대로 하고 ec2를 접미사 또는..

import Messages from "@/components/messages";import { unstable_noStore } from "next/cache";// export const revalidate = 5; // 모든 페이지에서 요청시 캐싱 진행 5초간 백엔드 요청 안함// export const dynamic = "force-dynamic"; // 모든 페이지에서 캐싱안함export default async function MessagesPage() { // unstable_noStore() // 해당 페이지에서 캐싱안함. const response = await fetch("http://localhost:8080/messages", { // cache: 'force-cache',..

import NewsList from "@/components/news-list";async function NewsPage() { const response = await fetch("http://localhost:8080/news"); if (!response.ok) { throw new Error("Failed to fetch news"); } const news = await response.json(); return ( News Page ; );}export default NewsPage;  이렇게 되는 이유는 Next.js에서 node 기능을 지원한다.추가로 캐싱도 지원하는데 그냥 넘기고, 원래는 에러나 로딩중에 대한 상태 처리도 적용해야하나더미..

"use client";import NewsList from "@/components/news-list";import { useEffect, useState } from "react";function NewsPage() { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(); const [news, setNews] = useState(); useEffect(() => { async function fetchNews() { const response = await fetch("http://localhost:8080/news"); if (!response.ok) { ..

원래는 axios 상태값이나 redux로 상태 변경해서 처리했던건데, 이게 되네?실험기능. 실험적인 기능이긴한데, axios나 tanstack query같은 라이브러리를 이용해서 통신시 작동충돌이 없을지 모르겠다.import { useFormStatus } from "react-dom";import action from './actions';function Submit() { const status = useFormStatus(); return Submit}export default function App() { return ( );}  +++++ 리액트 메타팀에서 이걸 useActionState로 변경하였습니다. +++++++dom에서 직접 안건드리기 위함인가? impo..

https://www.framer.com/motion/ Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com 설치방법npm install framer-motion 사용방법그냥 html을 사용하는 방법과 같습니다. motion.(element)로 사용합니다.import { motion } from "framer-motion"export const MyComponent = () => ( )initial - 초기값,animatie - 행동값Transition - 사용시간 해당 내용으로 적용됩니다. 공식문서에도 적혀있듯이 여러 내용이 있지만, 중요한..