분류 전체보기

이제 만든 라이브러리를 배포해 보자.npm에 업로드를 할 수도 있고, github를 통해 배포도 가능한데, npm을 통해 배포하는 법에 대해 알아보려 한다. 먼저 배포를 위해 package.json 파일을 수정해주자. ... "name": "패키지명, 대충 지으면 스팸이라고 막힐 때 있음", "version": "0.0.1", // 버전 "description": "react button", // 설명 "keywords": [], // 검색 키워드 "author": "제작자명", "license": "ISC", // 라이센스 지정 ... 상기 내용 외 contributors나 repository 등도 작성이 가능하다.  자세한 내용은 홈페이지 참조. 작성이 완료되었으면 npm 홈페이지에 회원..

tsconfig의 설정까지 끝냈다면 이제 컴포넌트를 만들고, 번들링을 해보자. 우선 프로젝트에 리액트를 설치하고, 기본적인 파일들을 생성해 준다.npm i --save-dev react react-dom @types/react  본 글에서는 버튼 라이브러리를 만들 예정이므로 컴포넌트 생성 후, src/components/Button/index.tsx와 src/index.ts에서 각각 default를 export 해주었다.이제 프로젝트 번들링 및 배포를 위한 번들러를 설치해야 한다. 아래와 같이 롤업 플러그인을 설치해주자.npm i --save-dev tslib @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-commonjs rol..

리액트 프로젝트를 만들고 환경 설정을 하는 방법에 대해 알아보자.오늘은 타입스크립트를 설치하며 tsconfig에 대해 알아보려고 한다. 먼저 아래명령어를 통해 프로젝트를 생성한다.npm init 아래와 같은 질문이 나오며 초기설정을 할 수 있게 되어있는데, 해당 과정을 넘기려면 npm init -y 명령어를 사용하면 된다.  package name프로젝트명version버전description프로젝트 (패키지) 설명entry point프로젝트 (패키지) 실행 파일test command프로젝트 생성 후 테스트로 입력할 메세지git repository프로젝트 gitkeywords프로젝트 키워드author프로젝트 작성자license저작권 관련 정보  package.json이렇게 해서 프로젝트를 생성하면 폴더 내..

리액트 프로젝트를 생성하는 방법에는 여러가지가 있다. 특히 CLI (Command Line Interface)를 많이 사용하는데, 복잡한 밑작업 필요없이 커맨드 한 줄로 프로젝트를 간편하게 생성할 수 있는 마법의 명령어이다. 대표적인 CLI로는 CRA (create-react-app)와 Vite가 있는데, 대략 아래와 같은 차이가 있다.  요약하자면 CRA는 커뮤니티가 활성화되어있고 많은 기능을 제공하는 대신 속도가 느리고 커스터마이징이 어려운 반면, Vite는 사전 제공 기능은 덜 풍부하지만 커스터마이징이 비교적 자유롭고 빌드 속도가 빠르다는 장점이 있다. 실제로 사용해 보았을 때, CRA는 빌드 속도가 느린 대신 Vite보다 모바일 환경에서 지원되는 기능이 많다는 느낌을 받았었다. 그렇다면 이 차이는..

큐 (Queue) 큐는 선입선출 (FIFO, First-In First-Out) 형식의 자료 구조로, 후입선출 (LIFO, Last-In First-Out) 배열인 스택과는 반대되는 개념이다.BFS 문제를 풀 때 주로 사용하게 되는데, JS에는 dequeue와 동일한 역할을 하는 shift 메소드가 존재하지만, 시간 복잡도가 O(n)인 관계로 배열의 길이가 긴 알고리즘 풀이에 활용하려면 큐를 직접 구현할 필요가 있다...   코드class Node { constructor(data) { this.data = data; this.next = null; }}class Queue { constructor() { this.head = null; this.tail = null; t..

힙 (Heap) 힙은 트리 기반의 자료구조로, 완전 이진 트리 자료구조 (마지막 레벨을 제외하고 모든 레벨이 채워져있으며, 마지막 레벨은 왼쪽부터 채우는 트리 구조)이다. 또한, 힙은 최소 힙(Min Heap)과 최대 힙(Max Heap)으로 구성되는데, 최대 힙은 부모 노드가 항상 자식 노드보다 값이 커야 하며, 최소 힙은 반대로 부모 노드가 항상 자식 노드보다 값이 작아야 한다. # 힙의 인덱스 관계좌측 자식 노드의 인덱스 = 부모 노드의 인덱스 * 2 + 1우측 자식 노드의 인덱스 = 부모 노드의 인덱스 * 2 + 2부모 노드의 인덱스 = (자식 노드의 인덱스 - 1) // 2 우선순위 큐 (Priority Queue)우선순위 큐란 우선순위가 가장 높은 데이터를 가장 먼저 삭제하는 자료구조로, 다익..

import { NextRequest, NextResponse } from "next/server";export async function GET(req: NextRequest) { const page = parseInt(req.nextUrl.searchParams.get("page")!); const array = Array.from({ length: 5 }, (_item, idx) => { return page + idx; }); return NextResponse.json({ items: array }, { status: 200 });} 여러분 안녕하세요? 길고 긴 자율 프로젝트도 드디어 끝을 맞이했는데요다들 보람찬 프로젝트 기간 되셨나요? 저는 Next.js를 사용하여 이번 자율 프로..

안녕하세요! SSAFY의 2학기 첫 번째 프로젝트가 드디어 끝났습니다. 첫 프로젝트 도메인 중 많은 분들이 선택하셨던 주제가 바로 webRTC 기술인 만큼 채팅 기능을 구현한 팀도 많았으리라 생각되는데요! 오늘은 node.js + React + typescript를 이용한 채팅 기본 기능 구현 방법에 대해 알아보도록 하겠습니다. 필요 라이브러리 express (@types/express) socket.io socket.io-client uuid (@types/uuid) 1. index.ts (server) import express from "express"; import http from "http"; import { Server } from "socket.io"; const PORT = 3010; /..

안녕하세요 여러분! 길고도 짧았던 2학기 첫 프로젝트가 마무리되었습니다. 저는 첫 프로젝트로 WebRTC를 활용한 커플 다이어리 서비스를 제작하게 되었는데요 커플 서비스인만큼 채팅 기능을 빼놓을 수 없는 상황! 예상보다 고전했던 '신규 채팅 수신 시 화면 가장 아래로 이동' 기능을 만들기 위한 채팅방 UI/UX 개선기를 공개합니다. ※ 아래 화면 및 소스코드는 실제 프로젝트 작업물이 아닌 기사를 위해 작성한 간이 소스코드입니다. 1. 신규 메세지 수신 시 화면 맨 밑으로 이동 메세지 수신 시 화면 가장 아래로 이동하는 기능은 JavaScript의 scrollTo와 scrollIntoView를 이용하여 간단하게 구현이 가능합니다. // 메세지들을 감싸는 Wrapper ref const scrollRef =..

안녕하신가요? 어느덧 싸피도 2학기에 접어들어 프로젝트를 시작하게 되었습니다. 반 내 조사 결과, 많은 팀들이 React를 이용하여 프론트를 구성하고 있는 것으로 확인되었는데요 오늘은 React에서 자주 사용하는 상태관리 라이브러리인 Zustand의 대락적인 사용법에 대하여 익혀보고자합니다. zustand란 상태 관리 라이브러리중 하나로, 일반적으로 사용되는 contextAPI나 jotai와는 다르게 Provider를 사용하지 않고 저장된 값을 불러올 수 있게 되어 있습니다. 개인적으로는 1학기에 배웠던 Vue의 pinia와 비슷해서 사용하기 편하다는 인상을 받았습니다. 기본적인 사용법은 위와 같은데요, 먼저 create 함수를 통하여 store를 작성 후, 컴포넌트 내에서 import하여 사용하는 방식..