Sungtt

[Next.js@13] Next에서 mysql 연동하기 기본적으로 필요한 세팅인 mysql, schema, table은 설치 및 생성되어있다는 가정하에 작성한다. 필요한 라이브러리를 설치한다. serverless-mysql은 서버리스 규모로 mysql 연결을 관리하기 위한 모듈이다. 이 라이브러리는 mysql을 랩핑하고있기때문에 반드시 mysql을 설치해주어야한다. npm i mysql npm i serverless-mysql //typescript 이용 시 npm i @types/mysql 1. mysql 연결 파일을 생성한다. 루트경로에 db 디렉토리를 만들고 db.ts 파일을 생성했다. 내부에는 'serverless-mysql'에서 mysql을 import 시킨다. 기본적인 설정은 mysql과 동일..

[Next.js@13] API Routes 사용하기 API Routes란 Next 내에서 API를 구축하기 위한 솔루션이다. 프로젝트 내의 'pages/api/*' 파일들은 서버 전용 번들이기 때문에 클라이언트의 번들 크기에는 영향이 없다. 사용법을 알아보자. 1. /pages/api 경로에 API Routes 파일을 생성한다. hello.ts라는 파일을 생성하였다 2. API Routes 코드를 작성한다. api요청 시 경로 쿼리에 index번호를 넣고, 그에 맞는 boardArr 객체요소를 반환해줄 거다. 이 파일에게 api 요청을 하고싶다면 로컬호스트 환경일 때 `http://localhost:3000/api/hello` 라는 주소에 요청해야 응답이 온다. //hello.ts import type ..

[Next.js@13] middleware.ts 미들웨어 사용하기 버전마다 사용법이 상이하게 달라서 제목에 버전을 명시하기로 했다. 정확히는 13.0.2 환경에서 진행된다. 1. 루트레벨의 폴더에 middleware.ts 파일을 생성한다. 이전에는 각 pages 경로에 middleware파일을 생성하면 그에 맞게 분기되어 실행됐다고한다. 하지만 버셀에서는 고객의 피드백을 받고 이를 단일 파일로 관리할 수 있도록 구조를 변경했다고 한다. 나는 전역에서 실행되는 미들웨어와, 페이지 구조에 보이는 '/posts/*'에 미들웨어를 설정할 것이다. 2. middelware.ts에 코드를 작성해준다. 공식사이트에선 아래와 같이 req.nextUrl.pathname.startsWith에 접근하여 그에 따른 분기를 나..

next.config.js 파일에 compiler 옵션을 추가한 뒤 재실행 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: false, + compiler: { + styledComponents: true, + }, }; module.exports = nextConfig; 공식사이트에서 찾은 키워드 https://nextjs.org/docs/advanced-features/compiler Advanced Features: Next.js Compiler | Next.js Learn about the Next.js Compiler, written in Rust, which transforms and minifies ..

소켓에서 true를 주면 소리를 재생하는 컴포넌트가 있는데 작동하지않는다. 잠시 검색해보니 상호작용을 하기전까진 소리의 재생을 막는다고한다. 터치 또는 클릭 시 소리가 없는 소리파일을 재생하여 몰래 상호작용 시키기 또는 ui적으로 알람켜기 버튼을 만들어 상호작용하기. 둘 다 시도해봤는데 되지가않는다. 다른 이슈가 있는걸까? 아이패드의 web inspector를 통해 콘솔을 확인했다. DOMException line:2 column:576920 라고 떠서 가보니 play()를 호출이 제대로 안된듯 하다... 수많은 테스트끝에 시작점이 상호작용이 아니라면 사파리에선 사운드를 재생시켜주지않는듯하다 결론을 내렸다. 아래 사이트는 그에 대한 대책을 알려준다,. https://d0gf00t.tistory.com/3..

framer motion과 styled components를 혼합하여 사용할 때 부터 생긴 오류다. styled components에 props로 전달할 값들 이름 앞에 $를 붙임으로써 해결했다. 아래는 참고글 https://dev.to/jeansmaug/how-to-fix-the-received-true-for-a-non-boolean-attribute-error-3pm9 How to fix the 'Received "true" for a non-boolean attribute' error How to fix Received 'true' for a non-boolean attribute error when using styled-components or emotion. dev.to https://sty..

우선 프론트와 백에서 쓰이는 각각의 socket.io를 설치하였다. 프론트에서는 npm i socket.io-client 백에서는 npm i socket.io node 설정 처음에는 4000포트를 소켓으로 사용하려했지만, https와 연동함에 있어서 그냥 서버와 같은 포트로 열도록 구현했다. import express, { Request, Response, NextFunction } from 'express'; import { Server } from 'socket.io'; import http from 'http'; const SERVER_PORT = 3002; const app = express(); const server = http.createServer(app); const io = new Se..

const moveVertically = (y) => keyframes` 0% { transform : translateY(0px) } 100% { transform : translateY(${y}px) } `; const BallAnimation = styled.g` animation : ${props => moveVertically(props.y)} ${props => props.time}s linear `; 키프레임 생성 시 인자를 받아서 호출하고, 컴포넌트에서는 애니메이션 호출 시 props값을 넘기면 된다.

타입을 검사하는 타입스크립트에서 만난 오류다. as속성을 string 타입으로 지정하여 전달하니 오류가 나더라. 스타일드컴포넌트의 as는 원하는 styled에 string을 전달하여 원하는 태그로 변경한다. 아래 코드는 button태그로 생성된 Styled를 div로 변경해준다. const Styled = styled.button` ... ` props로 전달 시에는? interface As { as: string; } const Styled = styled.button` ... ` 해당 컴포넌트에 빨간줄이 생기고 설명을 보면 아래와 같다. 이 JSX 태그의 'children' 속성에는 여러 자식이 있어야 하는 'never' 형식이 필요하지만, 단일 자식만 제공되었습니다. 아래처럼 as가 가질수있는 타입..

개요 npx create-react-app appname 실행 후 만난 오류 전역설치를 더 이상 지원하지않기때문에 제거하라고 한다. 오류 내용 You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app 해결 전역에 설치되어있는 CRA를 제거해준 후 ..