웹

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..

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..

1. VSCode에서 SSH로 EC2 연결하기1-1. VSCode에 SSH 확장 프로그램 설치- 확장 프로그램(Extensions)에서 Remote - SSH 검색 후 설치합니다. 1-2. EC2 SSH 접속 설정EC2 인스턴스를 생성할 때 받은 .pem 키가 있는지 확인해주세요!만약 없다면, 새로운 키를 생성해야 합니다. SSH 설정 파일 열기 nano ~/.ssh/config- vscode 에서 터미널을 열고 위와 같은 명령어를 입력하여 SSH 설정 파일을 열어줍니다. Host ec2-server HostName your-ec2-ip User ubuntu IdentityFile ~/.ssh/your-key.pem- your-ec2-ip 부분에 ip를 적어줍니다.- User 에 알맞은 ..

https://choi-hee-yeon.tistory.com/242 [Next.js] aws ec2 배포하기(1) (feat. Socket.io, pm2, nginx)0. Next.js로 개발한 웹을 aws ec2 로 배포하게 된 계기Next.js는 Vercel에서 만들어서 보통 Vercel 로 빠르고 편하게 빌드/배포할 수 있습니다.하지만 제가 개발한 'Stellar-Link' 는 실시간 채팅 웹앱으로 Sockechoi-hee-yeon.tistory.com이전 편을 보지 않았다면, 보고 오는 게 좋습니다.1. ec2 인스턴스에 도메인 연결1-1.  도메인 구매도메인이 없다면, 다음과 같은 곳에서 구매할 수 있습니다. • AWS Route 53 (AWS에서 제공하는 DNS 서비스)• Cloudflare ..

width: 30vw; /* 너비는 뷰포트의 30% */ aspect-ratio: 3 / 4; /* 너비 : 높이 = 3 : 4 */를 하면 너비와 높이가 비율에 맞게 줄어들었다가 늘어납니다.

쿠키(Cookie)개념: 쿠키는 클라이언트(사용자의 브라우저)에 저장되는 작은 텍스트 파일입니다.저장 위치: 클라이언트(브라우저) 측에 저장됩니다.생명 주기: 만료 날짜를 설정할 수 있어 일정 기간 동안 유지됩니다. 영구 쿠키(만료 날짜가 설정됨)와 세션 쿠키(브라우저 종료 시 삭제)로 나뉩니다.보안: 클라이언트에 저장되므로 보안에 취약할 수 있으며, 중요한 정보를 저장하기에는 위험합니다. HTTPS로 전송하거나, HttpOnly, Secure 옵션을 설정하여 보안을 강화할 수 있습니다.용도: 자동 로그인, 사용자 설정 저장, 방문자 추적 등 상태 정보를 간단히 저장할 때 사용됩니다.쿠키 예시Set-Cookie: userID=1234; Expires=Wed, 21 Oct 2025 07:28:00 GMT;..

REST (Representational State Transfer)아키텍처 스타일을 따르는 웹 서비스의 설계 방식입니다. REST는 클라이언트와 서버 간 통신에서 HTTP 프로토콜의 표준을 준수하며 리소스를 URL로 표현하고, HTTP 메서드를 통해 자원을 처리하는 구조를 따릅니다. RESTful은 이런 REST 원칙을 잘 구현한 API RESTful 설계의 의미RESTful 설계는 리소스를 URL로 명확하게 표현하고 HTTP 메서드를 활용해 CRUD (Create, Read, Update, Delete) 작업을 수행하는 구조입니다. RESTful API는 자원의 상태를 일정하게 유지하면서 요청과 응답을 처리하기 때문에 상태 비저장성과 클라이언트-서버 분리를 잘 구현할 수 있습니다.RESTful 설계 ..

1. kakao Developers 에서 API KEY 받기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 이렇게 API 키를 발급 받을 수 있습니다. 저는 웹개발에 사용할 예정이므로, javascript 의 키를 사용하겠습니다. 2. kakao Developers 에서 웹 사이트 도메인 등록하기 플랫폼 카테코리를 클릭 후, 원하는 플랫폼에 맞게 등록을 해주면 됩니다. 꼭 사용할 페이지는 모두 등록해야합니다. 3. 코드 작성하기 - 맵을 표시할 HTML 을 작성해줍니다. async mount..