kasumil의 코딩 공작소

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 - 사용시간 해당 내용으로 적용됩니다. 공식문서에도 적혀있듯이 여러 내용이 있지만, 중요한..

대학교를 졸업하기 전에 컴퓨터 관련 개발자가 되고 싶다는 꿈을 품고,개발자 붐이 일어나기 전인 2020년도에 위**라는 부트캠프 학원에 입문했습니다.해당 학원을 수료한 후 별다른 지원은 없었습니다.(이력서를 한 번 봐주는 것 외에는 A/S가 끝이었습니다. 차라리 국비 지원 프로그램을 이용할 걸 그랬습니다. 무료였는데 말이죠! 지금도 가끔 '내 700만 원!'을 생각하며 후회합니다.)학원을 수료한 후 약 400개 정도의 이력서를 뿌려 간신히 입사에 성공했습니다.신입을 키워주겠다는 말에 끌려 입사했죠.인터넷에 올라온 멋진 포트폴리오처럼 만들기에는 디자인적인 지원이 전무했고,제 개발 실력도 부족해 선뜻 만들지 못했습니다.디자인이 구려도 2~3개라도 만들어볼 걸 그랬습니다.간신히 입사한 회사는 스타트업이었고, ..

나는 이전에 기본 내용을 이미 책으로 배운 상태였는데, 실무에서 사용하지 않는 회사에서 재직하다보니타입스크립트에 대한 내용을 어설프게 알고 있었다. 이직 & 나의 성장을 위해서 알긴해야하니, 어떻게 해야하나 싶었는데이 강의 보고 확실하게 이해함. https://youtu.be/V9XLst8UEtk?si=gH9Tqi-Fcrsp5qiQ 제네릭에 대한 내용이 타입스크립트에선 가장 어렵다이부분이 왜 어렵냐하면 타입추론이 적용되기때문에.타입스크립트가 처음 나왔을때, 나도 적용하고 싶었지만 회사에서 해당 내용을 쓰지 않았고 타입스크립트에 대한 알려주는 사람이 없었기도하고 무엇보다 유튜브 내 강의들이 영어.그리고 국내 서적들 대부분이 그냥 엄청 어렵게 적어놨었다.초보자가 보는 책에 삼각함수 적용하는 것을 왜 적어두는..

리액트 토스티파이 사용중인데, 중복 호출이 되는 문제가 발생했다. 이를 어떻게 막나 고민했는데, 방법이 쉽게 나오나했다. https://fkhadra.github.io/react-toastify/introduction/ React-toastify | React-Toastify Financial Contributors on Open Collective fkhadra.github.io 바로 container에서 limit 1을 넣는 것. 그런데, 이건 그냥 알림을 1개로 제한하는 기능이라. 연속호출시 꺼지면 다시 여러번 호출되는 문제가 발생하더라. 그래서 찾아보니 https://fkhadra.github.io/react-toastify/prevent-duplicate/ Prevent duplicate | R..

간단한 지도 만들기 기능. 대략적인 기능은 chat gpt를 통해 만들었으나 세부 기능은 최신화가 되지 않아서 내가 만들어야 했다. 주소 검색에 따라 주소출력을 구현하여야만 했어 만들었다. import React, { useState } from 'react' import { GoogleMap, useJsApiLoader, MarkerF } from '@react-google-maps/api'; const containerStyle = { width: '100vw', height: '100vh' }; const OPTIONS = { minZoom: 4, maxZoom: 18, } function Map() { const { isLoaded } = useJsApiLoader({ id: 'google-map..

www.도메인.com 도메인.com 위 주소는 엄연히 다르다. 그런데, 해당 주소를 매칭시키는 방법은 딱히 없길래 끄적거려본다. 아파치 .conf 파일에서 ServerName example.com ServerAlias www.example.com DocumentRoot /var/www/html RewriteEngine on RewriteCond %{HTTP_HOST} !^www\. [NC] RewriteRule ^(.*)$ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 리다이렉팅 모듈을 넣어주면 route53를 통하거나 해서 굳이 어렵게 할 필요없이 그냥 www로 자동 리다이렉팅 된다. 끝.