본문 바로가기

전체 글

 (106)
Next.js 6가지 원칙 및 4가지 랜더링 기법 프로젝트 세팅 및 장점을 살리기위한 복습 후 적용 예정! 이전에 SSG를 구현하기 위해서는 예전 getStaticPaths 함수 같은 게 필요.Next.js 13 버전에서는 generateStaticParams 함수로 바뀌었다. 1. SSG (Static Site Generation)개념Static Site Generation은 빌드 타임에 페이지를 생성하여 정적 파일로 저장하는 방식입니다.페이지를 정적으로 생성하여 성능이 매우 우수합니다.언제 사용해야 하나요?변하지 않는 콘텐츠: 자주 변경되지 않는 콘텐츠 (예: 블로그 포스트, 문서 페이지 등).빠른 로드 속도가 중요한 경우: 빌드 타임에 생성된 HTML을 제공하므로 페이지 로드 속도가 매우 빠릅니다.사용법generateStaticParams를 사용하..
Fiesta Tour_3일차 ( 기획 및 기능 구체화 , 테이블 설계 ) 오전회의회의번역이 가능한지 확인하고 확실히 타겟층 정하고 들어가면 좋을 것 같음 -혜은현지인 투어가 강조된만큼 주 타겟층이 외국인 관광객이 되지 않을까 예측 - 상준오전 10:00 튜터링보성님 백오피스 분량 많음 상품관리 결제내역 등등 관리 가능해야 함…유저 정보 관리 / 상품 관리 / 결제 내역 및 리스트 관리 등 전반적인 서비스 조작이 가능해야하므로 리소스가 과도할 시 관리 파트 담당자 분들과 협업하여 해결 추천디자이너 분량 체크 - 백오피스는 아주 간단히 디자인 해도 된다다들 양이 많아서 열심히 해야 된다. 여러분의 노력에 달려 있다.번역 관련 질문 - 번역할 때 가장 많이 쓰는 api가 i18n-next**https://inblog.ai/luke/react-i18nnext-16165?traffic..
Fiesta Tour_2일차 ( 레퍼런스 조사 및 지도 코드 임시 구현 ) 튜터링 내용기능만 보았을 때는 분량을 늘려야 한다그렇다면 디자인 할 화면이 너무 많아진다. 화면 수를 줄이는 방법은?기능 난이도를 높이는 방법도주제를 더 명확하게 하자기능을 먼저 기준으로 잡고 다음 화면을 정하는 방법도 있다 튜터링 내용에 따라 프로젝트 주제 구체화 , 기획 세분화 , 기능 분배reference 조사 참조 사이트https://www.myro.co.kr/planning/guam MYRO - AI 여행 플래너평균 10시간 이상이 소요되는 여행 일정 세부 스케줄링을 가고 싶은 장소만 장바구니에 담듯이 선택하면 인공지능이 최적의 일정을 자동으로 스케줄링 해주는 쉽고 간편한 AI 여행 플래너 서비www.myro.co.krhttps://www.stubbyplanner.com/ 상상속 유럽여행을 현실..
Fiesta Tour_1일차 ( 주제 선정 , 와이어프레임 기획 , 개발 기획 ) 프로젝트 기획에따른 와이어 프레임 작성 프로젝트 명 : 피에스타 투어 (Fiesta Tour)소개한 줄 정리 : 기획부터 실행까지 옮겨주는 축제 여행 플랫폼내용 : 추천 여행지부터 일정 공유까지 유저들과의 소통으로 보다 나은 계획 수립에 도움을 줍니다프로젝트 핵심 기술실시간 채팅( 단체 톡 )고객 맞춤 안내( 여행지 추천 기능 )결제 기능( 숙소, 항공, 축제 입장 비용 등 )백오피스( 관리자 페이지 )기술 스택ReactNext.jsTailwindCSSTypeScriptSupabase사용 API여행API - Tour API지도API - 카카오 API결제API - 토스 API  Code Convention 변수, 함수, 인스턴스✅카멜케이스로 작성하기!첫 단어는 소문자, 그 다음 단어부터는 대문자변수 이름은..
TeamProject_PokéGotchi - 5일차 DB구조 유저별 게임 점수 갱신 및 코인 획득 포켓볼 피하기 게임 퀴즈 게임 user 정보 routeimport { createClient } from '@/supabase/server';import { NextRequest, NextResponse } from 'next/server';export async function GET(request: NextRequest) {  try {    const supabase = createClient();    const {      data: { user }    } = await supabase.auth.getUser();    if (!user) return NextResponse.json({ error: '유저 없음' }, { status: 401 })..
TeamProject_PokéGotchi - 4일차 키를 꾹 누르면서 입력 시 가속도가 붙듯이 한번에 많이 움직이는 문제 발생 기존 코드  const handleKeyDown = (event: KeyboardEvent) => {    switch (event.key) {      case 'a':        moveSelectedPokemon(-20, 0);        break;      case 'd':        moveSelectedPokemon(20, 0);        break;      case ' ':        moveSelectedPokemon(0, -50);        setTimeout(() => moveSelectedPokemon(0, 50), 500);        break;    }  }; 변경 코드import _ ..
TeamProject_PokéGotchi - 3일차 수박 게임 준비 중 물리엔진 Matter.js 사용법https://velog.io/@rificul/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-Matter.js-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0#%EC%B5%9C%EC%A2%85-%EC%BD%94%EB%93%9C 리액트에서 Matter.js 사용해보기참고)https://brm.io/matter-js/https://paulie.dev/posts/2020/08/react-hooks-and-matter-js/리액트에서 Matter.js를 사용하여 바닥을 만들고 공을 생성해보기npm i matter-jsvelog.io TS로 개발한 githubhttps://github.com/..
TeamProject_PokéGotchi - 2일차 웹 페이지에서 즐길 수 있는 간단한 게임 구현 1. 포켓볼 피하기 게임참고 자료 : https://fe-developers.kakaoent.com/2022/220830-simple-canvas-game/전체 코드'use client';import Link from 'next/link';import React, { useCallback, useEffect, useRef, useState } from 'react';interface ItemPos {  x: number;  y: number;  w: number;  h: number;}export default function PokeBallGamePage() {  const [state, setState] = useState'play' | 'pause' |..

티스토리툴바