프레임워크13 [Vue.js] 초기 세팅 가이드 Vite + Vue 프로젝트 생성 커맨드 (JavaScript 기반)npm create vite@latest "프로젝트 이름" --template vueNode.js 16.0 이상 권장실행 후 프로젝트 템플릿을 선택하는 인터랙션이 나옴!참고: Node.js 버전이 낮을 경우 npx로 실행하거나 버전 업 필요 package.json 파일에 명시된 모든 의존성(dependencies)을 한꺼번에 설치npm install npm 빌드npm run build + 기존의 "dev": "vite"를 "dev": "vite --host"로 변경하자!vite --host 의 의미: 로컬 IP 접근 허용 (모바일 디바이스 테스트 시 유용){ "name": "skala-vue", "private": true, .. 2025. 3. 27. [Spring] HTTP 통신 흐름 과정 정리(w/MVC 패턴) ※ 3-way handshake는 TCP 통신에서만 발생한다[공통] 브라우저(클라이언트) HTTP request → 3-way handshake(최초 연결 시) → Nginx case1) 정적 페이지 (HTML, CSS, JS 파일 / 단순 이미지 파일)그냥 바로 다시 브라우저에 정적 페이지 반환 case2) 동적 페이지Nginx에서 로드 밸런싱(필요시) → Tomcat(SpringBoot) → Controller → Service → Repository → DB 그리고 다시 역순으로 쭈욱 돌아가서 HTTP response로 JSON, HTML 등을 반환 https://claremont.tistory.com/entry/%EC%9B%B9-%EC%A7%80%EC%8B%9D-%EC%9B%B9-%EC%84.. 2025. 3. 19. [Spring] 일반적인 스프링 프로젝트 세트 하나의 서비스를 제공하기 위해 여러 스프링 관련 프로젝트를 엮어 사용한다!보통 5가지의 프로젝트를 사용한다 1. 웹 애플리케이션 서버 개발: Spring Boot내장 웹 서버(예: Tomcat, Jetty)를 제공하여 별도의 WAS(Web Application Server) 설정 없이 애플리케이션을 실행할 수 있다!"Spring MVC 기반의 웹 애플리케이션"을 쉽게 개발 가능+ application.properties or application.yml을 활용한 직관적인 설정+ 자동 설정(Auto Configuration) 기능으로 개발 편의성 증가 보통 선택하는 의존성(dependencies)들로는 다음과 같다- Spring Web- Spring Data JPA- Spring Configuration.. 2025. 3. 19. [프레임워크] 부트스트랩(Bootstrap)에 대해서 부트스트랩 공식 홈페이지 문서를 잘 활용하자!그대로 가져와서 활용하면 된다 https://getbootstrap.kr/ Bootstrap강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기getbootstrap.kr (부트스트랩 프레임워크 사용 예시 코드) Email address Example textarea Default checkbox Che.. 2025. 2. 25. [Spring] 롬복(Lombok) 라이브러리 기능 ㅇLombok 라이브러리: Java 개발에서 반복되는 코드를 줄여주는 라이브러리Java는 OOP 언어로 강력한 기능을 제공하지만, 반복적인 코드(보일러플레이트 코드)가 많아 개발 효율성을 저하시킬 수 있다. 이를 해결하기 위해 등장한 라이브러리가 Lombok이다. Lombok은 Java 코드에서 반복적으로 작성해야 하는 Getter, Setter, toString, 생성자 등을 자동으로 생성해 주는 어노테이션 기반 라이브러리이다. [Lombok의 주요 기능]@Getter 및 @Setter클래스 필드에 대한 Getter 및 Setter 메서드를 자동 생성import lombok.Getter;import lombok.Setter;@Getter@Setterpublic class User { private.. 2025. 2. 4. Streamlit 프레임워크: 데이터 애플리케이션의 강력한 도구 ㅁStreamlit 프레임워크: 데이터 과학 및 머신러닝 애플리케이션을 빠르고 간편하게 개발할 수 있도록 설계된 Python 기반의 오픈소스 웹 프레임워크 데이터 중심 애플리케이션 제작 시, 복잡한 웹 개발 기술을 학습하거나 별도의 FE 도구를 사용할 필요 없이 간단한 코드만으로 대화형 사용자 인터페이스(UI)를 구축할 수 있는 점이 큰 장점이다. Streamlit은 데이터 시각화, 사용자 입력 처리, 실시간 대화형 기능 등을 간단한 Python 코드로 구현할 수 있게 해 준다. [Streamlit의 주요 특징]빠른 설치와 간편한 사용: pip install streamlit 명령어 하나로 설치할 수 있으며, Python 개발 환경에서 바로 실행 가능하다코드 중심 개발: Streamlit은 완전히 코드.. 2024. 12. 31. [Node.js] MQTT, MAVLink, JSON 라이브러리 ㅁMQTT 라이브러리: 구독(subscribe) / 발행(publish) 설정 설치 명령어npm install mqttNode.js import문const mqtt = require('mqtt'); ㅁMAVLink 라이브러리: MAVLink 메시지의 각 필드를 추출설치 명령어npm install mavlinkNode.js import문const { MAVLink } = require('mavlink'); ㅁJSON 라이브러리: 추출한 필드를 JSON 형식으로 변환JavaScript 내장 라이브러리이므로 별도의 설치나 import가 불필요하다 2024. 10. 20. Flask 기초 무료강의 추천 https://claremont.tistory.com/entry/Flask-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EC%9D%98-%ED%8A%B9%EC%A7%95 Flask 프레임워크의 특징Flask는 Python 기반의 마이크로 웹 프레임워크이다. "마이크로"라는 용어는 Flask가 웹 애플리케이션 개발에 필요한 핵심 기능만을 제공하고, 필요에 따라 다양한 확장 모듈을 추가하는 방식이라는claremont.tistory.com 인프런같은 경우는 모두 다 유료이고, 패스트캠퍼스에는 관련 강좌가 없어 모두 유튜브 강의들로 추려보았다[Flask를 처음 배울 때 참고하면 좋을 유튜브 무료강의]1. 코준서님 강의: 매우 기초적인 내용의 강의https://www.you.. 2024. 10. 8. Flask 프레임워크의 특징 Flask는 Python 기반의 마이크로 웹 프레임워크이다. "마이크로"라는 용어는 Flask가 웹 애플리케이션 개발에 필요한 핵심 기능만을 제공하고, 필요에 따라 다양한 확장 모듈을 추가하는 방식이라는 의미이다. 이러한 특징 덕분에 Flask는 매우 가볍고 유연한 프레임워크로 평가받고 있다. 따라서 작은 규모의 프로젝트에서 대규모 애플리케이션에 이르기까지 다양한 환경에서 사용된다. [Flask의 주요 특징]1. 간결하고 직관적인 코드Flask는 웹 애플리케이션을 구축할 때 최소한의 코드만으로도 동작한다. 간단한 웹 페이지를 구축하기 위해 복잡한 설정이나 파일 구조가 필요하지 않으며, 개발자는 핵심 로직에 집중할 수 있다. 예를 들어, 기본적인 "Hello, World!" 웹 애플리케이션은 다음과 같이 .. 2024. 10. 8. 이전 1 2 다음
