축구 풋살 점수판 프로그램

축구 풋살 점수판 프로그램

https://score-board-fe.vercel.app/football 축구나 풋살에서 사용할 수 있는 점수판입니다. 업데이트 예정 기능 소리 기능 추가 휴식 시간 기능 추가 기능 설명 상단 - 전체 시간 표시 점수 표시 기능 팀 이름 변경 기능

  • format_list_bulleted Develop/Made by powerku
  • · 2023. 11. 3.
  • textsms
React - Timer 분/초/소수점 타이머 만들기

React - Timer 분/초/소수점 타이머 만들기

Next.js 에서 React와 TypeScript를 이용해서 타이머를 구현해보도록 하겠습니다. React Hook은 useEffect와 useMemo를 사용하였습니다. 1. 컴포넌트 렌더링 시 setInterval 함수를 통해서 1초 감소 2. setInterval 종료 3. 다시 재렌더링 이런 메커니즘으로 타이머가 진행 됩니다. 1분 이하에는 0.1초 단위로 시간이 내려갑니다. See the Pen React + TypeScript Starter by powerku (@powerku) on CodePen. 타이머 컴포넌트 timer.tsx const Timer = ({minute = 15, second = 0}: TimerProps) => { const [min, setMinute] = React.u..

  • format_list_bulleted Develop/React
  • · 2023. 11. 1.
  • textsms
React - useMemo 이용해서 성능 최적화 하기

React - useMemo 이용해서 성능 최적화 하기

useMemo란? useMemo는 리액트 훅 중의 하나입니다. Memoization 메모이제이션. 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술. 리액트에서 재 렌더링 될때 마다, 계산된 값을 캐시로 가지고 있기 때문에 동일한 계산을 반복하지 않고 이전 캐시된 값을 사용하여 성능 향상을 시킬 수 있습니다. 계산비용이 높거나, 컴포넌트가 불필요하게 자주 렌더링 되는 경우에 사용하면 좋습니다. useMemo 사용법 useMemo(calculateValue, dependency) 파라미터 caculateValue 계산하려는 값을 반환하는 함수 입니다. 반드시 return 값이 있어야 합니다...

  • format_list_bulleted Develop/React
  • · 2023. 11. 1.
  • textsms
next-auth useSession getServerSession 동작 안할 때, 해결 방법

next-auth useSession getServerSession 동작 안할 때, 해결 방법

next-auth에서 클라이언트 컴포넌트에서는 useSession 서버 컴포넌트에서는 getServerSession을 이용해서 현재 로그인된 유저 정보를 알 수가 있습니다. 오류 1: Unhandled Runtime ErrorError: React Context is unavailable in Server Components 하지만 아래와 같이 페이지 내에서 async, await을 사용하려고 하니 아래와 같은 오류가 발생하였습니다. const Page = async () => { const session = useSession(); if (!session?.user) { redirect("/board"); } const user = await prisma.user.findUnique({ where: {..

  • format_list_bulleted Develop/Next.js
  • · 2023. 10. 28.
  • textsms
next-auth 이용해서 10분만에 소셜 로그인 구현 하기

next-auth 이용해서 10분만에 소셜 로그인 구현 하기

next-auth란? next-auth는 Next.js 프로젝트에서 소셜 로그인을 간단하게 구현할 수 있는 라이브러리 입니다. 국내에서는 구글, 카카오, 네이버, 페이스북, 애플 등 다양한 소셜 로그인을 이용하고 사용합니다. 해당 사이트가 늘어나면 늘어날 수록 로직은 달라지고 복잡해지는데 next-auth를 이용하면 한번에 쉽고 간단하게 구현 가능합니다. Next.js 프로젝트 구성하기 Typescript, tailwind, App Router 방식을 이용해서 구현할 예정입니다. 저는 shacdn이라는 라이브러리를 사용해서 버튼과 아바타 컴포넌트를 사용할 예정입니다. Next.js 설치하기 npx create-next-app Next.js 설치하는 방법에 대해서 알아보도록 하겠습니다. 설치하는 방법에는 ..

  • format_list_bulleted Develop/React
  • · 2023. 10. 26.
  • textsms
Next.js 에서 sitemap.xml 만드는 방법

Next.js 에서 sitemap.xml 만드는 방법

sitemap.xml 이란? 검색엔진 크롤러가 웹 사이트를 효율적으로 크롤링 하기 위해 정보를 작성해둔 파일입니다. 페이지 url, 최근 업데이트 날짜, 업데이트 주기, 우선순위 등을 작성합니다. Google에 자신의 웹사이트가 검색되기를 원하면 sitemap이 있으면 좋습니다. Next 13 에서 sitemap.xml 만들기 정적 sitemap 만들기 app/sitemap.xml https://powerku.tistory.com 2023-10-24T22:21:12+09:00 1.0 https://powerku.tistory.com/category 동적 stiemap 만들기 app/sitemap.ts import { MetadataRoute } from 'next' export default functi..

  • format_list_bulleted Develop/Next.js
  • · 2023. 10. 25.
  • textsms
Next.js 설치하기 npx create-next-app

Next.js 설치하기 npx create-next-app

Next.js 설치하는 방법에 대해서 알아보도록 하겠습니다. 설치하는 방법에는 두가지가 있습니다. npx create-next-app을 이용해서 한 번에 자동으로 설치하는 방법과 next.js에 필요한 라이브러리를 하나하나 설치해서 직접 설정하는 두 가지 방법이 있습니다. 이번 글에서는 자동 설치에 대해서 알아보겠습니다. npx create-next-app을 이용하여 설치하기 1. 프로젝트 폴더를 생성할 폴더에서 커맨드창에서 아래 명령어를 입력합니다. npx create-next-app@latest 2. 프로젝트 구성 설정을 선택합니다. What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like t..

  • format_list_bulleted Develop/React
  • · 2023. 10. 24.
  • textsms
Zustand - 요즘 인기 있는 간편한 React 상태 관리 라이브러리

Zustand - 요즘 인기 있는 간편한 React 상태 관리 라이브러리

React 상태 관리 라이브러리란? React에서는 상태 값을 useState나 useReducer를 이용해서 관리할 수 있습니다만, 다양한 컴포넌트, 페이지에서 공유하기 위해는 상태 관리 라이브러리를 사용하는 것이 편리하고 좋습니다. 그중 유명한 것들이 Redux, Recoil, Zustand 등이 있습니다. 그중 Zustand 특징, 설치 방법, 사용법에 대해서 작성해 보겠습니다. Zustand 란? React 상태 관리 라이브러리 중 하나입니다. 가볍고 사용하기 간편해서 Redux 다음으로 가장 npm 다운로드수가 가장 높습니다. Zustand 특징 React 상태 관리 라이브러리 중 하나인 Redux의 경우에는 사용하기 어렵고, 코드가 복잡합니다. 그래서 React를 공부하는 분들 중에, Redu..

  • format_list_bulleted Develop/React
  • · 2023. 10. 19.
  • textsms
Tailwind 설치 방법 사용법 장단점 CSS와 비교

Tailwind 설치 방법 사용법 장단점 CSS와 비교

Tailwind 란? Tailwind는 CSS를 HTML 코드에서 class이름으로 이용하여 스타일을 생성하고 작성합니다 클릭하세요 장점 생산성 최적화 HTML과 CSS 파일을 두 개를 열어놓고 작업하지 않아도 돼서 작업 속도가 빠르고, 다양한 에디터에서 자동완성 기능을 제공합니다. 또 CSS 파일 크기가 감소하여, 로딩 속도 향상에도 도움을 줍니다. CSS 파일을 만들게 되면, 스타일을 주기 위해 클래스 이름을 뭐로 할까 고민을 하게 되는데, 그런 시간도 줄일 수 있습니다. 단점 예쁘지 않은 코드 스타일 많게 되면, 코드가 길어지게 되고, 예쁘지 않게 되고 이해하기 어렵습니다. 타이틀 내용 확인 클래스명 학습 런닝 커브 처음 사용하게 되면, 클래스명을 외워서 사용해야 하는데, 조금 공부가 필요합니다 초..

  • format_list_bulleted Develop/CSS
  • · 2023. 10. 17.
  • textsms
CSS - Gap 속성 사용법 margin과의 차이점

CSS - Gap 속성 사용법 margin과의 차이점

Gap이란? grid와 flex 요소 행과 열에 간격을 지정할 수 있습니다. margin은 요소 외부에 여백이 생성되지만, gap 속성은 요소 내부에 지정 됩니다. margin은 첫번째, 마지막 요소에 여백을 제거하기 위해서 first-child, last-child 구문을 쓰기도 하였지만, gap 요소 내부에 간격이 생기기 때문에 간편하게 사용할 수 있습니다. 단, ie 브라우저에서는 지원하지 않습니다. 사용법 { gap: 10px; } { gap: 10px 20px; // row-gap, column-gap } 예시 See the Pen Untitled by powerku (@powerku) on CodePen.

  • format_list_bulleted Develop/CSS
  • · 2023. 10. 14.
  • textsms
반응형