본문 바로가기

전체 글74

[Softeer] 바이러스 JavaScript(Node.js) 풀이 바이러스 JavaScript(Node.js) 풀이 // 입력받기 const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().split('\n'); // k, p, n 각각 변수로 저장 const arr = input[0].split(' ') const k = BigInt(arr[0]); const p = BigInt(arr[1]); const n = BigInt(arr[2]); // 정답으로 제출할 sum 변수 생성 let sum = k; // 반복문 돌면서 나머지 계산하기 for (let i = 0; i < n; i++) { sum = sum * p % BigInt(1000000007); } // BigInt를 사용한.. 2024. 2. 2.
[Softeer] 8단 변속기 JavaScript(Node.js) 풀이 [Softeer] 8단 변속기 JavaScript(Node.js) 풀이 해결 순서 1. 입력을 받는다. 2. 1~8 숫자의 오름차순, 내림차순 배열을 생성한다. 3. 주어진 입력값이 오름차순 배열과 동일하면 ascending 출력, 내림차순 배열과 동일하면 descending 출력, 둘 다 아니면 mixed를 출력한다. // 입력을 받기 위해 fs 불러오기 const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().split('\n'); // 입력값 arr에 배열 형태로 저장 const arr = input[0].split(' '); // 오름차순 정렬 const sortAscend = [...arr].sort(); /.. 2024. 2. 2.
[Softeer] 금고털이 JavaScript(Node.js) 풀이 [Softeer] 금고털이 JavaScript(Node.js) 풀이 해결 순서 1. 입력을 받는다. 2. 무게당 값이 비싼 순서대로 sort 해준다. 3. sort 한 순서대로 계산 시작. 총 무게에서 계산된 무게를 빼준다. 그리고 총 무게가 0이 되면 계산을 종료한다. 이때 경우의 수를 3가지로 나누었다. // 입력을 받기 위한 fs 선언 -> 입력값은 input에 배열 형태로 저장됨 const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().split('\n'); let totalWeight = Number(input[0].split(' ')[0]); // 입력받은 값에서 총 무게 가져오기 let sum = 0; /.. 2024. 2. 2.
[JavaScript] React에서 Pagination 라이브러리 사용해보기 React에서 Pagination 라이브러리 사용해보기 Pagination 라이브러리: item-pagination 페이지네이션을 간단하게 구현하고 싶어서 라이브러리를 만들었다🤩 item-pagination이라는 라이브러리이고, 객체 배열을 페이지로 나누어주는 함수를 제공한다. 개발 공부를 처음 시작했을 때 페이지네이션 구현을 참 어려워했던 기억이 있다. 그때의 기억을 살려 나처럼 페이지네이션을 어려워하는 누군가에게 조금이라도 도움이 되기 위해 라이브러리를 제작해보았다. NPM: https://www.npmjs.com/package/item-pagination 문서: https://item-pagination.vercel.app/ 사용 방법 1. 설치 npm, yarn, 혹은 pnpm을 이용하여 설치를 .. 2024. 1. 17.
[React] 로딩 컴포넌트를 제공하는 라이브러리 (Spinner, Skeleton 등) 로딩 컴포넌트를 제공하는 라이브러리 basic-loading 로딩 UI 컴포넌트 로딩 컴포넌트를 간단하게 사용할 수 있는 basic-loading이라는 라이브러리가 개발이 완료되어 블로그에도 소개하려 한다🤩 이 라이브러리에서 제공하는 컴포넌트는 총 8가지로, BasicDot, BounceDot, Fade, ProgressBar, Pulse, Skeleton, Spinner, Wave가 있다. React 기반으로 만들어진 라이브러리로, React와 Next.js에서 사용 가능하다. NPM: https://www.npmjs.com/package/basic-loading 문서: https://basic-loading-docs.vercel.app/ 사용법 1. 설치 npm 혹은 yarn을 이용하여 설치를 해준다.. 2024. 1. 11.
[JavaScript] CommonJS와 ESM을 모두 지원하는 React 라이브러리 개발 (Feat. 모듈이란 무엇인가) CommonJS와 ESM을 모두 지원하는 React 라이브러리 개발 모듈이란 무엇인가 프론트엔드 개발을 하다 보면 모듈(module)이라는 개념을 마주하게 된다. script 태그에 type="module"을 입력하기도 하고, React 프로젝트에서 갑자기 발생한 에러를 해결하기 위해 package.json에 module을 설정해주기도 한다. 그렇다면 모듈이 무엇일까? 프론트엔드 개발에서 모듈이란 무엇이고, 이걸 어떻게 이용할 수 있을까? 이번 글에서는 자바스크립트의 모듈 시스템인 CommonJS와 ESModule을 알아보고, 실제로 이 개념이 적용된 라이브러리를 배포해보려고 한다. 그럼 시작! 😎 1. 모듈(module)이란 무엇일까? 우선 기본으로 돌아가서, 모듈(module)이라는 개념을 알아보자... 2023. 12. 9.
[CSS] 마우스를 올리면 움직이는 3D 책 만들기 마우스를 올리면 움직이는 3D 책 만들기 인터랙티브 웹과 어울리는 컴포넌트 3D 컴포넌트 Next.js 공식문서를 읽던 중, 3D 컴포넌트를 발견하였다. 마우스를 올리면 책이 움직인다. 이 컴포넌트를 보자마자 어떻게 구현한 것인지 궁금해져 바로 개발자도구를 켜서 이 페이지의 HTML, CSS를 구경해보았다. CSS 부분을 읽어보니 프레임워크나 라이브러리 없이 순수 CSS만을 이용해서 구현했다는 것을 알 수 있었다. 충분히 간단하게 구현해볼 수 있을 것 같다는 생각이 들었고, 바로 vscode를 켜서 만들어 보았다. 완성된 모습은 이렇게 생겼다. 라이브러리 없이 단순 CSS만으로 만들기 때문에 코드도 간단하고 자바스크립트 환경 어디서든 사용할 수 있다. 구현하는 방법 HTML 제목을 입력하세요 부제목을 입.. 2023. 11. 20.
[Next.js] Next.js에서 Recoil Root 설정하는 법 Next.js에서 Recoil Root 설정하는 법 Next.js에서 Recoil을 사용하려면 React와는 초기 세팅 방법이 약간 다르기 때문에 Recoil Root를 어떻게 세팅하면 되는지 정리해보려 한다. Next.js에서 Recoil 사용하는 법 1. Provider 생성 // app/RecoilRootProvider.tsx // 컴포넌트 이름은 자유롭게 지정 import { ReactNode } from "react"; import { RecoilRoot } from "recoil"; type Props = { children: ReactNode; }; export default function RecoilRootProvider({ children }: Props) { return {childr.. 2023. 10. 20.

티스토리툴바