본문 바로가기

분류 전체보기84

shadcn/ui 도입하기 클라이언트에서 ui를 만들어볼건데, 이번 프로젝트는 프론트보다는 백 공부의 목적이 크고, ui 라이브러리도 한번 사용해보고 싶었어서 shadn/ui를 이용해 볼 예정이다.shadn/ui란?react에서 사용할 수 있는 ui 라이브러리이다.npm으로 전체를 다운로드하는게 아니라 원하는 컴포넌트만 따로 다운받고, 직접 수정할 수 있기 때문에 디자인 변경이 쉽다.shadcn/ui shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com그리고 디자인이 무척 깔끔하고 예쁘다 ㅎㅎui 컴포넌트 외에 그래프, 채팅 등도 가능하므로... 2024. 12. 6.
채팅방 스키마, API 만들기 (mongoDB, thunderClient) 채팅방 스키마를 먼저 만들어 보자.채팅방 생성->채팅방 접속->웹소켓 연결 및 구현->메세지 데이터 DB 연결 순서로 진행할 것이다. Room SchemanamepaticipantsuserIduserNameuserProfileImagejoinedAtlastRead (안읽은 메세지 확인용. 마지막으로 읽은 시간)createdAtupdatedAtlastMessage1. 스키마 만들기import mongoose from "mongoose";const roomSchema = new mongoose.Schema({ name: { type: String, required: [true, "방 이름은 필수입니다."], trim: true, }, participants: [ { use.. 2024. 12. 5.
채팅 앱 mongoDB 연결하기 채팅 앱을 구현 중인데, DB를 연결하려고 한다.DB는 어떤걸 쓸까 고민하다가... mongoDB를 쓰기로 결정했다. MongoDB란 무엇인가? 채팅 앱에 mognoDB를 사용한 이유닉네임과 메세지, 시간만 있으면 되므로 관계를 맺고있는 데이터가 적고, 변경되지 않음스키마가 없어서 추후 사진, 파일 전송 등 기능 확장이 용이러닝커브가 낮음읽기/쓰기가 빠르다최근 sqld를 공부하면서 sql이랑 조인 연산을 공부했어서 RDBMS를 이용해서 sql를 직접 사용해보고 싶은 마음도 있었지만, 채팅 앱을 구현하기 위해서는 noSQL이 더 나은 선택인 것 같아서 noSQL로 구현하기로 했다. 채팅 메세지는 noSQL, 채팅방 데이터는 SQL로 구현하는 경우가 있다고 하니 우선 개발해보고 확장이 필요하면 그 때 mys.. 2024. 12. 5.
react+socket.io로 채팅 앱 구현하기 프로젝트를 하며 WebSocket을 이용해 채팅 기능을 구현할 일이 생겼는데, 채팅의 기술 원리를 잘 모르고 무작정 개발하니 백엔드와 소통도 잘 안되는 것 같아... node.js로 직접 구현해보며 공부해보기로 했다. 기술 스택client : react, typescriptserver : node.js, express, socket.ioDB: 추후에 mongoDB 연결 예정 완성 화면 미리보기1. react 세팅https://ko.vite.dev/guide/ ViteVite, 프런트엔드 개발의 새로운 기준ko.vite.devvite로 설치해줬다. $ npm create vite@latestNeed to install the following packages:create-vite@5.5.4Ok to pro.. 2024. 12. 4.
Next, tailwind로 캐러셀 구현하기-2 (무한 루프 슬라이더, 최적화) 저번에 구현했던 캐러셀은 마지막 사진에서 맨 앞 사진으로 돌아올 때 애니메이션이 어색하다는 단점이 있었다. 무한 루프 슬라이더를 구현해보자.   어떻게 구현하면 좋을까?이미지 배열의 맨 앞과 끝에 가장 마지막 이미지와 제일 첫 이미지를 붙이고, 끝 이미지 일 경우 속도를 0으로 바꿔서 이동시킨다."use client";import { useState, useEffect } from "react";import Image from "next/image";const images = [ { src: "/image/sample/1.jpg" }, { src: "/image/sample/2.jpg" }, { src: "/image/sample/3.jpg" }, { src: "/image/sample/4.jpg.. 2024. 11. 26.
Next, tailwind로 Carousel 구현하기 - 1 (자동 슬라이드) 메인 페이지에 슬라이드 배너 (캐로셀)을 react-slick이라는 라이브러리를 이용해 구현했었는데,1. 디자인 커스텀이 어렵고2. 라이브러리를 많이 설치하면 성능 상 좋지 않을 것 같아 직접 구현해보기로 했다. 기본 원리구현하는 것은 어렵지 않은데,슬라이더에 넣고 싶은 이미지를 flex를 이용해 가로로 길게 붙이고useEffect로 처음 렌더링 되었을 때 setInterval을 실행시켜, 5초마다 옆으로 이동시켜준다이동 버튼을 누를 경우, 옆으로 이동시켜준다.개인적으로 배너 위에 마우스를 올렸을 때 좌우 이동 버튼이 나타나는게 예쁜 것 같아서 버튼 hover도 같이 구현했다. 영상에는 무한 루프 슬라이더가 구현되어있는데, 이번 게시글 코드에는 구현되지 않고 다음 게시글에서 마저 구현할 예정이다.전체 코.. 2024. 9. 10.
[백준 7569번] 토마토 - 파이썬 https://www.acmicpc.net/problem/7569💡문제 분석 요약철수의 토마토 농장에서는 토마토를 보관하는 큰 창고를 가지고 있다. 토마토는 아래의 그림과 같이 격자모양 상자의 칸에 하나씩 넣은 다음, 상자들을 수직으로 쌓아 올려서 창고에 보관한다.창고에 보관되는 토마토들 중에는 잘 익은 것도 있지만, 아직 익지 않은 토마토들도 있을 수 있다. 보관 후 하루가 지나면, 익은 토마토들의 인접한 곳에 있는 익지 않은 토마토들은 익은 토마토의 영향을 받아 익게 된다. 하나의 토마토에 인접한 곳은 위, 아래, 왼쪽, 오른쪽, 앞, 뒤 여섯 방향에 있는 토마토를 의미한다. 대각선 방향에 있는 토마토들에게는 영향을 주지 못하며, 토마토가 혼자 저절로 익는 경우는 없다고 가정한다. 철수는 창고에 보.. 2024. 7. 2.
[백준 2531번] 회전 초밥 - 파이썬 https://www.acmicpc.net/problem/2531💡문제 분석 요약회전 초밥 음식점에는 회전하는 벨트 위에 여러 가지 종류의 초밥이 접시에 담겨 놓여 있고, 손님은 이 중에서 자기가 좋아하는 초밥을 골라서 먹는다. 초밥의 종류를 번호로 표현할 때, 다음 그림은 회전 초밥 음식점의 벨트 상태의 예를 보여주고 있다. 벨트 위에는 같은 종류의 초밥이 둘 이상 있을 수 있다.새로 문을 연 회전 초밥 음식점이 불경기로 영업이 어려워서, 다음과 같이 두 가지 행사를 통해서 매상을 올리고자 한다.원래 회전 초밥은 손님이 마음대로 초밥을 고르고, 먹은 초밥만큼 식대를 계산하지만, 벨트의 임의의 한 위치부터 k개의 접시를 연속해서 먹을 경우 할인된 정액 가격으로 제공한다.각 고객에게 초밥의 종류 하나가 .. 2024. 6. 29.
[Next.js] Next.js 프로젝트 세팅 + 페이지 라우팅 이번에 들어가게 된 회사에서 Next.js를 사용한다고 하여 미리 공부해보기로 했다. Next.js란 무엇일까? Next.js란 풀스택 웹앱을 더 쉽게 구축하기 위한 React 프레임워크이다.프론트엔드를 하기 위해 React도 겨우 공부했는데 React에 익숙해지기도 전에 Next.js까지 해야한다니... 배움이 끝이 없구나 싶다. 그치만 결국 더 쉽고 편하기 위해 사용하는거겠죠? 직접 사용해보며 React보다 얼마나 더 쉽고 편한지 경험해볼예정이다 (ㅋㅋ)  1. create-next-app으로 Next.js 프로젝트 세팅하기https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.jsCreate a.. 2024. 6. 26.

티스토리툴바