소프트 네비게이션 next.js 앱은 네비게이션은 디폴트값으로 소프트 네비게이션으로 이뤄진다고 한다. https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating Routing: Linking and Navigating | Next.js Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook. nextjs.org 그런데 저놈의 소프트 네비게이션은 어떻게 선택할 수 있는 것이 아니다. 내가 하드한걸 원해도 불가능하다니... 오... 젠장 이 현상을 알아보느라 3시간을 할애했다. 발단은 이렇다. 특정 화면에..
react-quill https://quilljs.com/ Quill - Your powerful rich text editor Sailec Light Sofia Pro Slabo 27px Roboto Slab Inconsolata Ubuntu Mono Quill Rich Text Editor Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any ne quilljs.com quill은 유명한 위지위그 에디터로 많은 사람들이 애용하고 있는 오픈소스다. react-quill 라..
https://www.typescriptlang.org/ko/docs/handbook/utility-types.html#excludetype-excludedunion Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org Partial // Partial type Post = { title: 'string' index: number content: string } const updatePostContent = (post:Post, updateContent: Partial):Post => { return {...post, ...updateContent} } Partial은 Type의..
회사에서 shadcn/ui를 적극적으로 활용해서 앱을 개발하고 있다. https://ui.shadcn.com/ shadcn/ui Beautifully designed components built with Radix UI and Tailwind CSS. ui.shadcn.com 이미 만들어진 컴포넌트를 앱으로 가져와 직접 커스터마이징 할 수 있고, use-react-form과 같은 편의성 좋은 기능도 함께 딸려오니 작업할 때 굉장히 편리하다. 각설하고 shadcn/ui를 이용해 간단한 signin 컴포넌트를 만든 것을 기록해보려 한다. 사실 form을 다루는 것은 정말 까다롭다. 각 종 유효성 검사, 에러메시지, submit 등 신경쓸 것이 많은 로직이 한번에 모이므로 생각없이 짜다가는 정말 작업의 늪에..
이런게 되는구나 싶네요. type CalculatorProps = { left: number operator: keyof typeof operations right: number } type operations = { '+': (left: number, right: number) => number '-': (left: number, right: number) => number '*': (left: number, right: number) => number '/': (left: number, right: number) => number } operations 타입의 모든 key를 뽑아 CalculatorProps.operator의 유니온 타입으로 적용합니다.
https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript How to write a React Component in TypeScript Stay up to date Subscribe to the newsletter to stay up to date with articles, courses and much more! Learn more Stay up to date Subscribe to the newsletter to stay up to date with articles, courses and much more! Learn more All rights reserved © Kent C. D kentcdodds.com 위 글을 참고했습..
문제 한 변의 길이가 N인 정사각형 모양의 마을 M을 만드는 중이다. 마을의 모든 칸에는 건물이 하나씩 있고 r번째 행, c번째 열에해당하는 칸에는 정수 Mrc가 적혀있다. Mrc는 해당 칸에 있는 건물의 유형에 해당한다. 건물의 유형이 동일하면서, 서로 상하좌우에 인접한 건물끼리는 서로 전력을 공유할 수 있다. 전력을 공유할 수 있는 건물의 개수가 K개 이상이면 이를 단지라고 한다. 플레이어는 단 하나의 발전기만 설치할 수 있다. 발전기는 특정 건물의 유형 하나에 해당하는 모든 단지에 전력 공급이 가능하다. 가장 많은 단지가 있는 건물 유형에 전력을 공급할 것인데, 건물 유형이 여러개라면 Mrc가 더 큰 건물 유형에 전력을 공급한다. 전력을 공급해야 할 건물의 유형 번호를 구해보자. 코드 const r..
문제 한 변의 길이가 N인 정사각형 마을 M이 있다. r번째 행, c번째 열에 하당하는 칸 Mrc에는 0과 1이 적혀있다. 0이면 아무것도 없는 칸이고 1이면 집이 있는 칸이다. 마을에 있는 집에 전력을 공급하기 위해선 그 집에 발전기를 설치하거나, 상하좌우로 인접한 집 중 하나가 전력을 공급받고 있어야 한다. 마을 M의 모든 집에 전력을 공급할 경우, 발전기의 최소 갯수를 구하여라 코드 const readline = require('readline'); let rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = []; rl.on('line', (line) => { input.push(li..
문제 게임에 통증이라는 시스템이 있음. 게임 안에는 통증 수치를 감소시켜 주는 아이템인 A와 B가 있음. 각 아이템은 사용시 각각 A, B만큼 통증을 감소시켜 줌. 각 아이템은 원하는대로 획득 가능 N의 통증 수치가 주어졌을 때, 통증 수치를 0으로 만들 수 있는 아이템 A와 B의 최소 사용 갯수를 구해야 함 코드 const readline = require('readline'); let rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = []; rl.on('line', (line) => { input.push(line.trim()) }).on('close', () => { const N ..
문제 N x N 행렬에서 특수한 게임이 진행된다. 각 칸에는 에 해당하는 방향으로 칸 만큼 한칸씩 이동하라는 지시가 적혀있다. 플레이하는 사람은 처음에 보드의 칸 중 하나에 말을 하나 올려놓는다. 각 칸에 적힌 지시대로 말을 이동한다. 만약 이동 중 말이 보드 밖으로 나간다면, 보드의 반대쪽의 첫번째 칸으로 이동한다. 이동거리가 남아있다면 계속 이동한다. 만약 이동하다가, 자신의 말이 한번이라도 방문한 칸을 다시 지나야 할 경우에는 게임이 종료된다. 그 외의 경우에는 게임이 종료될 때까지 위의 단계를 반복한다. 게임의 점수는 시작한 칸을 포함하여, 게임이 종료되기 전까지 말이 방문한 서로 다른 칸의 개수이다. 플레이어는 goorm과 player 두명이고, 각 게임은 별개로 이루어진다. goorm과 pla..
