목록전체 글 (87)

subindev 개발 블로그

[Vue] Vue.js 실습(2) : 반응형 햄버거 메뉴와 카드식 테이블 구현

Vue 3 독학 실습: 반응형 네비게이션 및 반응형 데이터 테이블 구축 1. 반응형 모바일 햄버거 토글 메뉴 (src/components/Header.vue)화면 크기가 1024px 이하(모바일/태블릿)로 줄어들었을 때, 기존 PC용 가로 나열 메뉴를 숨기고 햄버거 버튼 클릭 시 전체 화면을 덮는 슬라이드 오버레이 메뉴를 구현함. MYAPP ... PRODUCTS 핵심 제어 로직 및 스타일ref(false) 상태 관리: 모바일 메뉴의 열림/닫힘 상태를 불리언(true/false) 데이터로 선언하고, 버튼 클릭 시 이 값을 반..
카테고리 없음 2026. 5. 28. 14:56
[Vue] Vue.js 실습(1) : VS Code, Node.js 다운로드 및 프로젝트 생성

Vue 3 독학 실습: 와이드 랜딩 페이지 레이아웃 구축 1. 프로젝트 초기화 및 폴더 구조 (JavaScript / Vite)TypeScript 옵션을 제외하고 순수 자바스크립트 기반의 Vue 3 프로젝트를 생성하여 실습을 진행함.npm create vue@latest# 설정: TypeScript(No), Vue Router(Yes) 선택npm installnpm run dev📂 핵심 디렉토리 및 파일 역할src/main.js: 앱의 진입점(Entry point). Vue 인스턴스를 생성하고 전역 플러그인(Router 등)을 연결하여 실행하는 시동 장치.src/views/: 주소창의 URL 경로가 바뀔 때마다 화면 전체가 통째로 교체되는 독립적인 페이지 컴포넌트 저장소 (HomeView.vue).sr..
Frontend/Vue.js 2026. 5. 27. 10:52
[네트워크] 실시간 통신 기술 - ws:// 와 wss:// 차이와 WebSocket 동작 원리

이전에 Polling, Long Polling, WebSocket의 차이를 정리하면서WebSocket은 “연결을 유지하면서 실시간 통신을 하는 방식”이라고 설명했다.그런데 조금 더 깊게 들어가보면 궁금한 점이 생긴다.WebSocket은 어떻게 연결되는 걸까?왜 처음에는 HTTP로 시작할까?연결 이후에는 왜 HTTP가 아닐까?ws:// 와 wss:// 는 무슨 차이일까?이번 글에서는 WebSocket이 실제로 연결되는 과정과 내부 동작 방식을 정리해보려고 한다.1. 처음부터 WebSocket인 것은 아니다많이 헷갈리는 부분인데,WebSocket 연결은 처음부터 WebSocket 프로토콜로 시작하지 않는다.처음에는 일반 HTTP 요청으로 시작한다.즉:클라이언트 → 서버 : HTTP 요청으로 연결을 시작한 뒤..
subiniwiki 2026. 4. 29. 09:40
[네트워크] 실시간 통신 기술 - 폴링(Polling), 롱폴링(Long Polling), 웹소켓(Web Socket)

웹 서비스를 만들다 보면 클라이언트와 서버가 데이터를 어떻게 주고받을지 고민하게 된다.보통은 REST API 방식으로 충분하지만,채팅이나 실시간 알림처럼 “계속 상태를 확인해야 하는 기능”이 들어가면 다른 방식이 필요해진다.대표적으로 많이 사용하는 방식이 Polling, Long Polling, WebSocket이다.이번 글에서는 각각 어떤 방식인지, 왜 사용하는지 정리해보려고 한다.1. 일반적인 요청 방식 (REST API)가장 흔하게 사용하는 방식이다.클라이언트가 서버에 요청을 보내고, 서버가 응답을 주면 통신이 끝난다.예를 들면:로그인게시글 조회검색회원가입같은 기능들이 여기에 해당한다.흐름은 단순하다.클라이언트 → 서버 : 요청서버 → 클라이언트 : 응답연결 종료한 번 요청하고 끝나는 구조라서 단발..
subiniwiki 2026. 4. 13. 11:08
[Java] 코딩테스트 4월(with 프로그래머스)

2026/04/13(월) 알고리즘 고득점 kit > 해시 > 의상https://school.programmers.co.kr/learn/courses/30/lessons/42578 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.krimport java.util.HashMap;class Solution { public int solution(String[][] clothes) { HashMap map = new HashMap(); for(String[] cloth : clothes) { String type = cloth[1];..
코딩테스트 2026. 4. 13. 08:56
[MAUI] 5. MAUI 프로젝트 - 게시판 : SQLite 연결, Comment 기능 추가

5. MAUI 프로젝트 - 게시판: SQLite 연결, Comment 기능 추가1. SQLite연결프로젝트에 NuGet 패키지 'sqlite-net-pcl' 를 추가합니다. 2. Entity 와 Model 분리DB 저장용 Entity와 화면 바인딩용 Model 을 분리한다. 2-1. Entity - Postusing SQLite;namespace MauiBoard.Models{ public class PostEntity { [PrimaryKey] public string Id { get; set; } public string Title { get; set; } public string Content { get; set; } pub..
.NET/MAUI 2026. 4. 7. 11:01
[SQL] 26년 4월 : 1일 1쿼리

프로젝트로 모바일을 하다보니 직접 SQL 작성하는 일이 드물다.그래서 실력 향상 및 복습을 위해 1일 1쿼리를 다시 시작하려한다. 2026.04.01(수) 프로그래머스 > 코딩테스트 연습 > JOIN > 그룹별 조건에 맞는 식당 출력https://school.programmers.co.kr/learn/courses/30/lessons/131124 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 정답SELECT M.MEMBER_NAME, R.REVIEW_TEXT, DATE_FORMAT(R.REVIEW_DATE, '%Y-%m-%d') AS REVIEW_DATEFROM MEMBER_PROFILE MJO..
DB , SQL/SQL - 1일 1쿼리 2026. 4. 2. 14:02
[MAUI] 4. MAUI 프로젝트 - 게시판 : 폴더 구조 생성 및 CRUD

4. MAUI 프로젝트 - 게시판1. 폴더 구조 Models Comment.cs Post.cs ViewModels BoardDetailViewModel.cs BoardListViewModel.cs MyPageViewModel.cs PostEditorViewModel.cs Views BoardDetailPage.xaml BoardListPage.xaml PostEditorPage.xaml 2. MAUI CommunityToolkit프로젝트에 NuGet 패키지 'CommunityToolkit.Mvvm' 를 추가합니다. CommunityToolkit.Mvvm은 MVVM 패턴을 보다 쉽게 구현할 수 있도록 도와주는 라이브러리로,[ObservableProperty], [RelayCommand] 등을 통해 반복..
.NET/MAUI 2026. 4. 1. 10:14
이전 Prev 1 2 3 4 ··· 11 Next 다음