[Next.js] 웹 개발 후 배포, 길게 눌러 팝업창이 뜰 때 기본 동작 방지하기
·
웹개발
1. 채팅목록 컴포넌트를 길게 누르면 모바일에서 팝업창 뜨도록 개발'use client';import { useEffect, useState,useRef,Suspense } from "react";import { useSession } from 'next-auth/react';import { useTranslation } from 'react-i18next';import '../../../i18n';import Image from 'next/image';import Button from '@/app/components/Button';import DynamicText from '../../app/components/DynamicText';import { useRouter } from 'next/naviga..
[Next.js] aws ec2 배포하기(1) (feat. Socket.io, pm2, nginx)
·
웹개발
0. Next.js로 개발한 웹을 aws ec2 로 배포하게 된 계기Next.js는 Vercel에서 만들어서 보통 Vercel 로 빠르고 편하게 빌드/배포할 수 있습니다.하지만 제가 개발한 'Stellar-Link' 는 실시간 채팅 웹앱으로 Socket.io 를 사용하여 개발하였습니다. 0-1. 문제점Vercel은 서버리스(Serverless) 아키텍처를 기반으로 동작하기 때문에, 지속적인 WebSocket 연결이 필요한 Socket.io와 같은 기술을 활용하는 데 제약이 있습니다. 주요 문제점을 정리하면 다음과 같습니다. 1. WebSocket 연결 유지 불가Vercel의 서버리스 환경은 요청이 들어올 때마다 새로운 인스턴스를 실행하는 방식으로 동작합니다. 즉, 지속적인 연결을 유지해야 하는 WebSo..
[react, web] 리액트로 글 작성 페이지 개발 시, 'ReactQuill' 의 유용성
·
웹개발
- 현재 개발 중인 블로그의 글쓰기 페이지입니다.  위의 코드를 통해, 특정부분의 폰트만 크게/작게, 두껍게/얇게 할 수 있습니다.또한, 중간 중간 사진도 첨부할 수 있습니다. 1. 설치npm install react-quillnpm install quill 2. 사용하려는 페이지에 import 문 추가import ReactQuill from 'react-quill';import 'react-quill/dist/quill.snow.css';
[소스트리] sourcetree 에서 로컬 폴더 불러오기
·
깃허브
1. 로컬저장소 페이지에 들어가서 'Add' 버튼을 클릭합니다. 2. 원하는 폴더 경로를 작성 후, 추가 버튼을 클릭합니다. 3. 원하는 폴더의 History가 보여집니다.
[c#] Dictionary 의 value 값이 Dictionary 일 경우 데이터 추가하기
·
c#
Dictionary 의 value 값이 Dictionary 일 경우 선언하기 Dictionary MMSDataDic; Dictionary 에 데이터 추가하기 MMSDataDic.Add(values[i],new Dictionary()); MMSDataDic[values[i]].Add(streamName, dateTime); - value 값에 곧바로 값을 넣지 않고, new Dictionary() 를 넣어준다. - 해당 key에 알맞은 value 값을 Add 로 넣어준다.
[python] 카카오톡 API를 사용하여, 친구에게 메시지 보내기
·
카테고리 없음
https://choi-hee-yeon.tistory.com/163 [python] 카카오톡 API를 사용하여, 나에게 카카오톡 메시지 보내기 1. 카카오 디벨롭스에 상단바의 내 애플리케이션을 클릭하여, 애플리케이션을 추가합니다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카 choi-hee-yeon.tistory.com 위 글을 읽고, 카카오톡 API를 사용하여, 나에게 메시지 보내는 걸 성공해야 이 글을 따라할 수 있습니다. 1. 내 애플리케이션에서 팀관리 페이지의 팀원 초대를 합니다. 2. 팀원의 계정으로도 앞선 포스트에서( https://choi-hee-yeon.tistory.com/163 ) ..
[python] 카카오톡 API를 사용하여, 나에게 카카오톡 메시지 보내기
·
파이썬
1. 카카오 디벨롭스에 상단바의 내 애플리케이션을 클릭하여, 애플리케이션을 추가합니다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 추가한 애플리케이션을 클릭하면, 요약정보에 중요한 REST API 키가 나옵니다. 3. 왼쪽바의 동의항목을 클릭하여 다음과 같이 설정해줍니다. 4. 카카오로그인 활성화 & redirect URL 설정하기 - redirect URL : https://example.com/oauth 5. 카카오 로그인하는 웹사이트에 들어갑니다. - client_id= 뒤에는..
[c#] tiff 파일을 jpg로 변환하는 프로그램
·
c#
- 우선 visual studio 상단 메뉴바에서 '도구' -> 'NuGet 패키지 관리자' -> '패키지 관리자 콘솔' 을 클릭해줍니다. - 콘솔창에 'Install-Package Aspose.Imaging' 해줍니다. - 다음과 같은 코드를 작성합니다. using Aspose.Imaging; using Aspose.Imaging.Exif; using Aspose.Imaging.Exif.Enums; using Aspose.Imaging.FileFormats.Bmp; using Aspose.Imaging.FileFormats.Dicom; using Aspose.Imaging.FileFormats.Djvu; using Aspose.Imaging.FileFormats.Emf; using Aspose.Imag..
[wpf] (인프런) WPF(c#) 강의 WPF의 사용 이유/대표적인 컨트롤러
·
c#/WPF
WPF의 사용 이유 뛰어난 UI를 쉽게 개발 MVVM패턴을 사용한 정해진 구조 사용 대표적인 컨트롤러 RadioButton: Group으로 묶어주면 하나만 선택 가능 propfull +tap+ tap = ListView - user Class 생성 Image 1. 하드 코딩 2. 데이터 바인딩
[c#] 문자열이 숫자인지 확인 & 문자열 자르기
·
c#
Task: Key가 숫자로 구성되어있다면: Key 비교할 때, 뒤에서부터 9자리까지만 비교해서 똑같으면 출력 디바이스의 Key가 숫자로만 구성되어있지 않다면, 키 전체를 비교해서 똑같으면 출력 1. 문자열이 숫자인지 확인 if (logFileNameArr[1].All(char.IsDigit)) //인덱스 [1]인 부분이 숫자로만 구성되어있다면, 뒷 9자리만 불러서 키 값과 일치하는지 검사 { string logFileNameString = logFileNameArr[1]; string tempString = logFileNameString.Substring(logFileNameString.Length-9); if (key.Equals(tempString)) { Console.WriteLine("숫자로만 ..