예비군 승차 공유 서비스 - SpringBoot Project

프로젝트 개요 ↗️ KW HACKATHON  광운대학교 연합 동아리 해커톤팀 구성 : 디자인 및 프론트 1 / 백엔드 2 / 기획 1 / 인프라 2프로젝트 주제 : 예비군 승차 공유 서비스개발 기간 : 2024-11-11~2024-11-16프로젝트 동기예비군들이 조기 퇴소나 승차 공유같은 목적을 가지고 ‘에브리타임’ 서비스의 게시글로 모집하는 경우를 보고 이 기능을 특화한 서비스의 필요성을 갖게 되어 프로젝트를 시작하게 되었다.실제로 설문조사를 실시한 결과 입퇴소 부담요인에 교통비용, 이동 시간, 대중교통 이용 순으로 높았으며, 조기 퇴소 참가자 모집 시 적극적인 참여자에 대한 수요 요구가 많았다. 또한 자차보다는 대중교통 선호가 더 많았다. 부담스러운 교통 비용 ➡️ 승차 공유 희망자를 위한 커뮤니티 ..

• format_list_bulleted 프로젝트
• · 2025. 3. 22.
• textsms

계산된 속성(Computed Property) - Vue.js

템플릿 내에서 코드가 반복되고 있는 등 반응형 데이터를 포함하는 복잡한 논리의 경우 사용data 나 다른 속성이 변경될 때 함수가 실행되어 저장된 캐싱된 값 ↔ data 옵션함수의 실행은 의존하고 있는 속성(프록시) 또는 data가 변경될 때 한 번 호출됨함수명이 계산된 속성명이 됨 1보다 큰 수: 1부터 입력한 값까지의 합: {{sum}} 1부터 입력한 값까지의 합: {{sum}} 1부터 입력한 값까지의 합: {{sum}}  계산된 캐싱 vs 메서드메서드를 호출해서 동일한 결과를 얻을 수 있어 결과적으로 두 가지 접근 방식은 동일계산된 속성 : 의존된 반응형을 기반으로 캐싱됨변경되지 않은 여러 곳에서 접근할 경우 getter 함수를 다시 실행하지 않고 이전에 계산된 결과를 즉시 ..

• format_list_bulleted Vue.js
• · 2025. 3. 22.
• textsms

이벤트 핸들링 - Vue.js

v-on 디렉티브를 사용하여 이벤트 리스닝v-on:[이벤트 이름]="표현식"@[이벤트이름]="표현식" // 단축 표현 핸들러 값은 다음 중 하나인라인 핸들러 : 이벤트가 트리거될 때 실행되는 인라인 JavaScript메서드 핸들러 : 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로 인라인 핸들러간단한 경우 사용 this.name=e.target.value"** /> 이름: {{name}} 인라인 핸들러에서 메서드 호출네이티브 이벤트 객체 대신 사용자 지정 인자를 메서드에 전달할 때 사용methods: { say(message) { alert(message) }}안녕이라고 말하기잘가라고 말하기 인라인 핸들러에서 이벤트 객체 접근$event 특수 키워드 사용 or 인라인 ..

• format_list_bulleted Vue.js
• · 2025. 3. 21.
• textsms

템플릿 문법 - Vue.js

텍스트 보간법메세지: {{ msg }}{{}} 이중 중괄호 사용해당 컴포넌트 인스턴스의 msg 속성의 값으로 대체됨HTML 출력v-html 디렉티브 사용: v-html 디렉티브 사용rawHtml 속성 값을 일반 HTML로 해석한 것으로 대체됨데이터 바인딩은 무시됨⚠️ 임의의 HTML을 동적으로 렌더링하면 XSS 취약점 발생하므로 신뢰할 수 있는 컨텐츠에만 사용속성 바인딩 {{}} 은 HTML 속성(attribute)내에서 사용 불가하므로 대신 v-bind디렉티브 사용element의 id속성을 dynamicId 속성과 동기화된 상태로 유지바인딩된 값이 null, undefined 라면 element 속성이 제거되어 렌더링Boolean 속성버튼element에 표기했는지 여부로 참/거짓 값을 나타내는 속성..

• format_list_bulleted Vue.js
• · 2025. 3. 19.
• textsms

빌트인 디렉티브 - Vue.js

v-text요구 되는 값 stringelement의 텍스트 컨텐츠 업데이트기존 컨텐츠 덮어씀일부를 업데이트 하는 경우 이중 중괄호{{}} 사용{{msg}} v-html요구 되는 값 stringelement의 innerHTML 업데이트Vue 템플릿 문법을 처리하지 않고 일반 HTML 로 삽입됨⚠️ 임의의 HTML 동적으로 렌더링하는 것은 XSS 공격에 취약해 지므로 신뢰할 수 있는 컨텐츠에만 사용 v-show요구 되는 값 any표현식의 truthy 값을 기반으로 element 가시성 전환display CSS 속성을 설정, 조건이 변경될 때 전환을 트리거true면 화면에 보이고(display:auto 또는 display:inherit)false이면 화면에 안 보임(display:none)v-if요구 되는 값..

• format_list_bulleted Vue.js
• · 2025. 3. 19.
• textsms

var, const, let - JavaScript

특성var (default)constlet재선언OXX재할당OXO스코프함수 레벨 스코프블록 레벨 스코프블록 레벨 스코프호이스팅선언 + 초기화 호이스팅선언만 호이스팅(TDZ)선언만 호이스팅(TDZ)window 객체 속성전역 변수는 window 속성이 됨 (window.변수 로 접근가능)window 속성 아님window 속성 아님💡 ES6(ES2015)부터 도입된 const, let은 변수의 스코프와 생명주기를 더 예측가능하게 만들어주므로 특별한 이유가 없다면 var 대신 const, let 사용스코프함수 레벨 스코프(Function scope)함수 내부에서 선언된 변수는 함수 내부에서만 유효var 키워드로 선언된 변수와 function 선언에 적용함수 외부에서는 접근 불가능블록({})은 스코프 생성 X블록..

• format_list_bulleted JavaScript
• · 2025. 3. 10.
• textsms