이 링크를 통해 구매하시면 제가 수익을 받을 수 있어요. 🤗https://inf.run/A1d6F 스프링 핵심 원리 - 기본편| 김영한 - 인프런 강의현재 평점 5점 수강생 47982명인 강의를 만나보세요. 스프링 입문자가 예제를 만들어가면서 스프링의 핵심 원리를 이해하고, 스프링 기본기를 확실히 다질 수 있습니다. 스프링 기본 기능, 스프링www.inflearn.com 안녕하세요!!! 다름이 아니라, 이번에는 강의 추천을 위해 들고 왔는데요!!! 지금까지 프론트엔드 개발만 하다가, 풀스택 전향을 위해 백엔드 개발을 알아보고 있었습니다!!!그러다가 주변사람들에게 제일 많은 추천을 받은 [김영한] 스프링 핵심 원리 - 기본편!!!! 정말 김영한님의 명성 그대로, 잘 짜여진 강의였습니다.백엔드 공부를 원하..

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

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

1. 결과물 2. Date 코드 ( moment 사용)// components/Date.tsximport React from 'react';import { Text, TouchableOpacity,View } from 'react-native';import moment, { Moment } from 'moment';import styles from '../styles/Calendar.style';import 'moment/locale/ko'; // 한글 로케일을 불러옵니다.import { theme } from '../styles/theme';moment.locale('ko'); // 전역 locale을 한글로 설정interface DateProps { date: Moment; onSelectDat..

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. 개발환경 준비1-1. Node.js, npm 설치-Node.js: 공식 홈페이지에서 최신 LTS 버전을 설치합니다. (v22.13.1) node -v-npm: Node.js 설치 시 기본 제공됩니다. 1-2. React Native CLI 설치npm install react-native-cli2. React Native 프로젝트 생성2-1. 프로젝트 생성 명령어 실행npx @react-native-community/cli init 자신이 원하는 프로젝트 이름 2-2. 생성된 디렉토리 구조 개요 3. TypeScript 및 타입 관련 패키지 설치3-1. TypeScript 컴파일러와 React, React Native에 대한 타입 정의 파일 설치npm install --save-dev typescri..

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