본문 바로가기

에이블스쿨

(26)
[KT AIVLE] Spring Boot + Vite React 환경설정 및 통합 (CORS & Gradle) 안녕하세요, 수쿠입니다! 👋웹 개발 환경 설정… 할 때마다 왜 이렇게 낯설고 복잡할까요?🤖 물론 AI에게 물어보면 되긴 하지만, 같은 질문 계속하기도 애매하고 헷갈릴 때가 많죠.그래서! 미래의 저와 여러분을 위해 Spring Boot + React(Vite) 기반의 풀스택 개발 환경 설정 과정을 정리해봤습니다.이번 글에서는CRA(Create React App) 대신 Vite 사용법React ↔ Spring Boot 간 CORS 해결Gradle을 이용한 프론트 통합 빌드 방법까지처음엔 헷갈리기 쉬운 부분들을 콕콕 짚어드립니다. 함께 가볍게 정리해보아요! 🚀1. Spring Boot 프로젝트 생성 및 다운로드2. 프로젝트 폴더 구조 설정3. IDE에서 백엔드 프로젝트 열기 및 초기 실행4. Vite R..
[KT AIVLE] 7기 (AI트랙) - 4차 미니프로젝트 웹 서비스 제작(SpringBoot+React) 후기와 배운 점 프로젝트 목표 이번 미니 프로젝트는 Spring Boot와 React를 활용한 풀스택 웹 애플리케이션 개발을 목표로 진행되었습니다. 주요 학습 목표는 REST API 설계 및 구현, JPA를 이용한 데이터베이스 연동, 외부 API(OpenAI) 연동 경험이었습니다. 그 외에도 백엔드와 프론트엔드의 역할 분담 및 연동 이해, CRUD 기능의 완전한 구현, 기본적인 UI/UX 설계, Git을 활용한 협업 등의 역량을 함께 키우는 데 중점을 두었습니다.프로젝트 진행 1일차 이번 프로젝트는 이전과 달리 8명이 한 팀을 이루어, 비교적 큰 규모로 진행되었습니다. 팀원 간의 협업과 역할 분담, 그리고 빠른 시간 안에 결과물을 만들어내야 한다는 압박감 속에서 프로젝트가 시작되었습니다. 첫날에는 전체적인 UI 스케치,..
[KT AIVLE] 7기 (AI트랙) 10주차 ✅ 63일차 월요일(05/26) ~ 65일차 수요일 (05/28) 처음 만난 프론트엔드와 React, 생각보다 괜찮은데? 처음으로 프론트엔드에 대한 이론 수업과 함께 React 실습을 진행했다.처음엔 막막했지만, 실제 개발 환경을 구성하는 과정은 의외로 단순했다.VS-code IDE 환경에서 폴더와 터미널을 열고 아래의 명령어들을 적어주기만해도.npm install -g yarnyarn add -g create-react-app frontendcd frontendyarn start 이미 npm이 설치된 상태라면,단 몇 분 만에 React 프론트엔드 개발 환경을 구축할 수 있었다. 😗간단한 UI 만들기 실습리액트 화면에 글씨를 출력하고, 텍스트 박스나 테두리를 만드는 실습도 직접 해보았다.기초적인 JS..
[KT AIVLE] 7기 (AI트랙) 9주차 ✅ 56일차 월요일(05/19) 3차 미니 프로젝트로 AWS 클라우드 과제를 진행했다.자세한 내용은 👉 이곳에서 확인✅ 57일차 화요일(05/20) ~ 59일차 목요일 (05/23)Spring이 도대체 뭐지? 🤔웹 백엔드, MSA, HTTP 수업 내용을 핵심만 요약해서 정리해봤어요.백엔드에 관심은 있지만 처음 접하다 보니, 낯선 전문 용어가 많았어요.그래서 중요하다고 생각한 부분만 골라서 다시 정리해봤습니다. (그런데 중요한 용어가 너무 많네요 🤣🤣)🌱 Spring이란?Spring은 자바 기반의 웹 애플리케이션 프레임워크로, 복잡한 설정 없이 쉽게 개발할 수 있게 도와줘요!특히 의존성 주입(DI) 과 제어의 역전(IoC) 을 통해 객체 관리와 코드 구조를 깔끔하게 만들어줍니다.🍳 Spring은..
[KT AIVLE] 7기 (AI트랙) - 3차 미니프로젝트 AWS 클라우드 ✅ 53일차 금요일(05/16)이번 미니 프로젝트에서는 VPC부터 Subnet, Bastion Host, EC2, NAT Gateway, ELB까지 그동안 배운 AWS 구성 요소들을 한데 모아 실제 웹 서버 환경을 구성해봤습니다.이론으로 배울 땐 "이 정도면 해볼 만하겠는데?" 싶었는데, 막상 조합하고 응용해보려니 머릿속이 새하얘지더라고요… 🫠🫠3일 동안 배운 걸 바탕으로 하나하나 연결해보려 했지만, 막상 전체를 엮어보니 여기저기서 꼬이고 막혀서 마음처럼 쉽게 풀리진 않았습니다 😇😇그래도 GPT의 도움을 받아 전체 아키텍처 흐름을 정리하고, 배웠던 작업 방법을 차근차근 따라가며 결국 완성할 수 있었어요!🛠️ 작업 순서- 가이드라인으로 제공해주신 아키텍처 이미지를 GPT한테 업로드한 후 작업내용과..
[KT AIVLE] 7기 (AI트랙) 8주차 ✅ 49일차 월요일(05/12) 2차 미니 프로젝트로 AI-Agent 과제를 진행했다.자세한 내용은 👉 이곳에서 확인✅ 50일차 화요일(05/13) ~ 52일차 목요일 (05/15)☁️ 클라우드를 처음 배워보는 날이다.내가 알고 있는 클라우드라고 하면... 구글 드라이브? 혹은 데이터를 어딘가에 저장하는 공간 정도로만 생각했었다.그런데 오늘부터 배우게 된 클라우드는 그보다 훨씬 더 크고 깊은 세계였다.이론도 낯설고 실습도 빡빡했지만, 다행히 강사님이 유쾌하게 잘 알려주셔서 덜 부담스럽게 배울 수 있었다. 그래도 머릿속은 구름처럼 몽글몽글 복잡해지는 하루들이었다 😶‍🌫️ 😶‍🌫️☁️ 1일차는 클라우드의 기본 개념과 가상화 기술을 배운 날이다.- 클라우드는 단순히 인터넷 어딘가에 있는 컴퓨터가 아니..
[KT AIVLE] 7기 (AI트랙) - 2차 미니프로젝트 (AI-Agent) ✅ 45일차 목요일(05/08)[2차 미니프로젝트 1일차] - AI Agent 구현, 첫 시작이번 2차 미니프로젝트는 LangGraph, RAG, LLM 등 이전에 배운 기술들을 종합해 하나의 AI Agent를 구현하는 프로젝트였다.1일차에는 주어진 주제에 따라 기본적인 프로그램의 틀이 제공되었고, 수업 시간에 배운 내용을 바탕으로 개인 프로젝트 형태로 구현을 시작했다. 각 함수의 입력과 출력 형식이 명확히 정의되어 있어, 이를 참고해 블록 단위로 함수를 구현하고, LLM을 활용해 판단을 수행하도록 구성했다. 마지막에는 LangGraph를 이용해 이전 Q&A를 요약하고, 적절한 응답을 반환하는 흐름까지 만드는 것이 목표였다.😵‍💫 낯선 통합, 높은 난이도LangGraph, RAG, LLM은 각각 따로..
[KT AIVLE] 에이블스쿨 (다니 & 짜니) x 이미지 생성 KT 에이블스쿨에는 에이블러들 사이에서 오래전부터 내려오는 묘~한 도시전설이 있다.밤낮 가리지 않고 학생들의 노트북이나 핸드폰 화면에 불쑥 나타난다는 ‘유령’의 존재! 👻입교한 지 얼마 안 된 에이블러들은 깜짝 놀라 비명을 지르지만…시간이 흐를수록? 오히려 그 귀여운 유령을 일부러 찾아다니는 사람들까지 생긴다는 전설! 😂 이 유령의 정체에 대해서는 여러 추측이 난무하는데…정체불명의 이 유령, 도대체 누구냐고?그 정체는 바로... 딥러닝 코드 속에서 현실 세계로 튀어나온 인공신경망! 너무 고도화된 나머지, 현실 기술 수준과는 맞지 않아서 코드 밖으로 튀어나오고 말았다는 그들.거울을 보며 그들은 말했지. “이건 인간들이 이해하기엔 너무 고차원적이야…”그래서 흰 천과 검은 천을 뒤집어쓰고, 본모습을 감추기..