[Next.js] Cypress 설치 및 설정하기 (feat. TypeScript)
·
웹개발
1. Cypress 설치 및 설정1-1. Cypress 설치npm install cypress --save-dev 1-2. Cypress 실행npx cypress open 1-3. Cypress 실행 코드 package.json 에 등록 1-4. Typescript 설정✅ cypress/tsconfig.json 파일을 생성 및 아래처럼 설정{ "compilerOptions": { "types": ["cypress"], "target": "ES6", "moduleResolution": "node", "lib": ["esnext", "dom"] }, "include": ["**/*.ts"]} ✅ cypress.config.ts 파일을 생성 및 설정 추가import { defineC..
[React Native] kakao map을 webview로 구현하기(Feat. React.js, Vercel 배포)
·
앱개발/React Native
0. 카카오 개발자 계정 생성하기https://developers.kakao.com/console/app 카카오계정 accounts.kakao.com - 상단의 내 애플리케이션을 클릭하고, 애플리케이션을 추가해줍니다. (절차 생략) - 저희가 사용할 키는 웹에 맵을 사용하므로, 자바스크립트의 키입니다. ( 다른 키 사용시, 맵 안보임 + 이메일로 경고옴) - 플랫폼에서 웹에 도메인을 등록해줍니다.- 개발 시, 보통 http://localhost:3000 입니다. (자신의 개발 혹은 프로덕션 도메인 작성) - 왼쪽 바의 거의 끝쯤에 카카오맵이 있습니다. 클릭해줍니다.- 카카오 맵의 상태를 활성화해줍니다. 그래야 사용가능해집니다.1. 카카오맵을 위한 웹 프로젝트를 생성하기 (React.js)1.1 새로운 웹..
[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..