프론트엔드

0. 카카오 개발자 계정 생성하기https://developers.kakao.com/console/app 카카오계정 accounts.kakao.com - 상단의 내 애플리케이션을 클릭하고, 애플리케이션을 추가해줍니다. (절차 생략) - 저희가 사용할 키는 웹에 맵을 사용하므로, 자바스크립트의 키입니다. ( 다른 키 사용시, 맵 안보임 + 이메일로 경고옴) - 플랫폼에서 웹에 도메인을 등록해줍니다.- 개발 시, 보통 http://localhost:3000 입니다. (자신의 개발 혹은 프로덕션 도메인 작성) - 왼쪽 바의 거의 끝쯤에 카카오맵이 있습니다. 클릭해줍니다.- 카카오 맵의 상태를 활성화해줍니다. 그래야 사용가능해집니다.1. 카카오맵을 위한 웹 프로젝트를 생성하기 (React.js)1.1 새로운 웹..

1. 안드로이드 스튜디오 설치하기https://developer.android.com/studio?hl=ko Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android DevelopersAndroid Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.developer.android.com 설치 후 필수 설정: Android SDK 설치Preferences → Appearance & Behavior → System Settings → Android S..

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

0. Next.js로 개발한 웹을 aws ec2 로 배포하게 된 계기Next.js는 Vercel에서 만들어서 보통 Vercel 로 빠르고 편하게 빌드/배포할 수 있습니다.하지만 제가 개발한 'Stellar-Link' 는 실시간 채팅 웹앱으로 Socket.io 를 사용하여 개발하였습니다. 0-1. 문제점Vercel은 서버리스(Serverless) 아키텍처를 기반으로 동작하기 때문에, 지속적인 WebSocket 연결이 필요한 Socket.io와 같은 기술을 활용하는 데 제약이 있습니다. 주요 문제점을 정리하면 다음과 같습니다. 1. WebSocket 연결 유지 불가Vercel의 서버리스 환경은 요청이 들어올 때마다 새로운 인스턴스를 실행하는 방식으로 동작합니다. 즉, 지속적인 연결을 유지해야 하는 WebSo..

Next.js의 router.push가 클라이언트 사이드 내비게이션을 수행하기 때문입니다. 클라이언트 사이드 내비게이션은 동일한 페이지 컴포넌트가 유지된 상태에서 URL만 업데이트하므로 해당 컴포넌트의 useEffect가 다시 실행되지 않습니다. 해결 방법1. 강제 새로고침 사용window.location.href를 사용하여 강제로 새로고침할 수 있습니다. 이 경우 useEffect는 실행됩니다.const handleGoToBack = () => { window.location.href = '/chat';}; 2. 라우팅 시 상태 관리router.push와 함께 특정 상태를 관리하거나 key를 변경하여 useEffect를 강제로 실행하도록 할 수 있습니다.const handleGoToBack = () ..

0. Intro 프로젝트 계획 변동 원래 계획은 였습니다.  중앙에 Lottie 가 애니메이션으로 동작하고 주변에 3D 모델링된 별들이 고정된 위치에서 줌인 - 줌아웃 정도의 애니메이션만 동작할 예정이었죠.. 하지만 실제 React-Three-Fiber 로 개발하다보니, 별들만 3D모델링을 하는게 쉽지 않았습니다. 같은 Canvas 에 모델들을 넣기 위해서 지구도 3D 모델 즉, Gltf 포맷으로 넣기로 계획을 수정하였습니다. 1. 지구와 별들 리소스 구하기 및 프로젝트에 추가하기별 리소스 구하는 방법은 https://choi-hee-yeon.tistory.com/232 [Next.js] React-Three-fiber 을 사용하여 3D 모델 프로젝트에 추가 및 애니메이션 적용하기1. 3D 모델 구하기 ..

1. 3D 모델 구하기 (gltf)우선 3D 모델을 구하기 위해서 저는 https://lumalabs.ai/genie?view=preview Luma AI - GenieA 3d generative foundation modellumalabs.ai를 사용했습니다!  1-1. 원하는 모델을 입력하기1-2. 원하는 모델을 선택하여 다운로드하기  다운로드할때, gltf 형식으로 합니다. 웹에 제일 적절한 포맷입니다.   GLTF와 기타 포맷 비교포맷크기성능 최적화호환성 주요 특징GLTF작음매우 높음웹 표준 지원경량, 스트리밍 지원, PBR 렌더링 지원OBJ큼낮음제한적오래된 포맷, 텍스처 포함 불가FBX큼중간제한적애니메이션 지원, 폐쇄적 포맷COLLADA큼중간제한적XML 기반, 파일 크기 크고 느림  2. Nex..

이번 'MK-Blog' 를 개발하면서 글 작성 / 수정 하는 페이지에 ReactQuill을 넣었습니다.해당 툴에다가 이미지들을 넣으면 이미지 태그의 src 가 한없이 깁니다. 서버에 전송할 때, 길이 제한때문에 전송 실패할 확률이 큽니다. 그래서 저는 src 를 image_1, image_2 이런식으로 보내기로 했습니다. (저희는 이미지파일만을 또 추출하여 서버에 전송하기 때문에 가능한 방법이었습니다!! 잘 알아보셔야 합니다) /** * content 영역의 img 태그들을 모두 가져와서 src를 image_${index + 1}로 변경하는 작업 */ let newContent = ''; const quillEditor = quillRef.current?.getEditor()..