본문 바로가기

전체 글

 (351)
[Next.js] SSR, ISR 그리고 Link, Image SSR을 통한 페이지 구현 import React from "react"; import { GetServerSideProps, NextPage } from "next"; import Head from "next/head"; type SSRProps = { message: string; }; const SSR: NextPage = (props) => { const { message } = props; return ( 이 페이지는 서버 사이드 랜더링을 통해 접근 시에 서버에서 그려진 페이지입니다. {message} ); }; export const getServerSideProps: GetServerSideProps = async ( context ) => { const timestamp = new Date..
[Next.js] Next.js 랜더링 방법 - SSG Next.js에서는 다양한 렌더링 방법을 제공합니다. 다음은 Next.js에서 사용할 수 있는 주요한 4가지 렌더링 방법입니다 Static Generation (정적 생성) getStaticProps와 함께 사용됩니다. 빌드 시점에 페이지를 사전 렌더링하여 정적인 HTML 파일을 생성합니다. 최초 접속 시에는 사전 렌더링된 HTML이 제공되고, 이후 클라이언트 측에서는 정적 파일을 재사용합니다. 정적 페이지에 적합하며, 자주 변경되지 않는 컨텐츠에 사용됩니다. Server-side Rendering (서버 사이드 렌더링) getServerSideProps와 함께 사용됩니다. 각 요청마다 서버에서 페이지를 렌더링합니다. 매 요청마다 데이터를 가져와서 페이지를 동적으로 생성합니다. 매번 최신 데이터가 필요하..
[Git] fatal: 'git status --porcelain=2' 해결 방법 어떤 파일이 소실 되었을 경우 이런 문제가 발생한다. 해결 방법1 rm -f .git/index git reset 해결 방법2 문제가 되는 파일을 따로 복사하고, 해당 위치에서 삭제한다음 다시 추가하면 되기도 했다. 출처: https://stackoverflow.com/questions/47109232/git-fatal-unknown-index-entry-format
[web] spa 만들기 저장용 index.html index.js import App from './App.js'; new App({$target: document.querySelector('.App')}); App.js import Header from './components/Header.js'; import HomePage from './page/HomePage.js'; import SignupPage from './page/SignupPage.js'; import {setPersonalInfo} from './components/Storage.js' class App { constructor() { this.$body = document.body; this.render(); } async render() { const head..
[Git] 원격 브랜치 삭제 명령어 원격 브랜치를 삭제하기 위해 사용하는 명령어는 Git 명령어를 기반으로 합니다. 원격 브랜치를 삭제하는 방법은 두 가지가 있습니다. 먼저, 로컬 저장소에서 원격 브랜치를 삭제한 후, 원격 저장소에 해당 변경사항을 푸시하는 방법과, 원격 저장소에서 바로 원격 브랜치를 삭제하는 방법입니다. 첫 번째 방법은 다음과 같습니다: git branch -d git push origin --delete 위 명령어에서 은 삭제하려는 원격 브랜치의 이름입니다. 첫 번째 명령어(git branch -d)는 로컬 저장소에서 해당 브랜치를 삭제합니다. 두 번째 명령어(git push origin --delete)는 원격 저장소에 해당 브랜치 삭제를 푸시합니다. 두 번째 방법은 원격 저장소에서 바로 원격 브랜치를 삭제하는 방법입..
[web] 멀티파트 설명/의의 Using multipart/form-data format FormData To send the data as a multipart/formdata you need to pass a formData instance as a payload. Setting the Content-Type header is not required as Axios guesses it based on the payload type. const formData = new FormData(); formData.append('foo', 'bar'); axios.post('https://httpbin.org/post', formData); axios를 이용해서 헤더에 이진데이터를 이용할때는 멀티파트라는 개념이 있다. 이것을 이용해서 보내..
[web] ajax , axios 차이 Ajax와 Axios는 모두 JavaScript의 HTTP 요청을 처리하기 위한 라이브러리입니다. 그러나 Ajax는 기존에 사용되던 웹 개발 기술이고, Axios는 최근에 개발된 라이브러리입니다. Ajax는 Asynchronous JavaScript and XML의 약자로, 비동기적으로 서버와 데이터를 교환하기 위해 사용됩니다. Ajax를 사용하면 웹 페이지가 새로 고침되지 않고도 서버와 데이터를 주고받을 수 있습니다. 이를 통해 웹 페이지의 성능을 향상시키고, 보다 동적이고 인터랙티브한 사용자 경험을 제공할 수 있습니다. Ajax는 JavaScript와 XML을 주로 사용했지만, 최근에는 XML 대신 JSON을 더 많이 사용합니다. Axios는 현대적인 JavaScript 라이브러리로, Ajax와 비슷..
[React] jsx 문법 요령 - map을 이용하여 여러개의 태그 출력 {!myOrderList[0]?.useCoupons || myOrderList[0]?.useCoupons.length === 0 ? '-' : ( {myOrderList[0]?.useCoupons?.map((data) => ( {data.title} ))} )} jsx 문법을 쓸때 다음과 같이 구현할 수 있음.
728x90

티스토리툴바