99duuk

https://99duuk.tistory.com/118 Spring MVC 설정 파일 이해하기 : web.xml & dispatcher-servlet.xmlweb.xml는 서블릿 컨테이너에 대한 전반적인 설정을 담당한다.1. DispatcherServlet 정의2. URL 패턴과 DispatcherServlet 매핑3. Spring 설정 파일 위치 지정4. ContextLoaderListener 등록 (필요한 경우) dispatcher org.sprin99duuk.tistory.com읽다가 문득 View를 사용하지 않는 구조에서는 어떻게 되나 싶어서 비교해봄   | Spring MVC 프로세스1. DispatcherServlet- 모든 요청이 DispatcherServlet으로 들어옴- Front Con..

| 일급 컬렉션(First-Class Collection)일급 컬렉션은 컬렉션을 포함한 클래스를 만들어 사용하는 방식을 말함이 클래스는 해당 컬렉션 하나만 필드로 가지며, 그 컬렉션과 관련된 동작을 함께 정의함  - 단일 책임 원칙: 일급 컬렉션은 하나의 컬렉션에 대한 책임만 가짐- 불변성: 컬렉션의 불변성을 보장할 수 있음- 상태와 행위의 결합: 컬렉션과 관련된 동작을 한 곳에서 관리- 비즈니스 로직 캡슐화: 컬렉션과 관련된 비즈니스 로직을 해당 클래스 내에 캡슐화- 이름이 있는 컬렉션: 컬렉션의 의도를 명확히 표현할 수 있음 일급 컬렉션은 마치 특별한 용도의 상자와 같습니다. 일반 컬렉션이 그냥 물건을 담는 평범한 상자라면, 일급 컬렉션은 특정 종류의 물건만 담을 수 있고, 그 물건들을 어떻게 다뤄야..

| 정적 팩토리 메서드는 객체를 만드는 특별한 방법임일반적인 생성자 대신, 클래스 안에 객체를 만드는 전용 메서드를 만들어 사용함.이 메서드는 이름을 가질 수 있어서 객체가 어떤 목적으로 만들어지는지 더 명확하게 알 수 있음  레고 세트를 생각해보세요. 보통은 설명서를 따라 직접 조립하지만(일반 생성자), 때로는 이미 조립된 부분(예: 우주선 조종석)을 구매할 수 있습니다. 이렇게 미리 조립된 부분을 제공하는 것이 정적 팩토리 메서드와 비슷합니다. 목적에 맞게 미리 구성된 객체를 제공받는 것이죠.   | 정적 팩토리 메서드는 객체 생성을 캡슐화하는 디자인 패턴임- 이름을 가질 수 있어 생성 목적을 명확하게 표현할 수 있음- 호출될 때마다 새 객체를 생성할 필요가 없음 (캐싱, 객체 풀링 등 가능)- 반환..

언젠가 써봐야지..1. vue-query를 사용하지 않은 기존 방식기존 방식으로 데이터를 페칭할 때는 fetch, 상태 변수 관리, 에러 핸들링 등을 직접 작성import { ref, onMounted } from '@vue/composition-api';export default { setup() { // 상태 변수 정의 const data = ref(null); const isLoading = ref(true); const isError = ref(false); // 데이터 패칭 함수 const fetchUsers = async () => { isLoading.value = true; isError.value = false; try { ..

문득 순서가 개판이길래... 스크립트 요소의 순서를 정하는 것은 가독성과 유지보수에 도움이 된다는 지피티의 말..공식적인 규칙은 없지만, 일반적으로 많이 사용되는 컨벤션이 있다고 함... 일관성을 유지하고 가독성을 높혀 협업에 도움이 된다고 함...   name: 컴포넌트 이름components: 컴포넌트 등록directives: 커스텀 디렉티브 등록mixins: 재사용 가능한 로직을 포함extends: 다른 컴포넌트를 상속props: 부모로부터 전달받는 속성 정의emits: 컴포넌트에서 발생하는 이벤트 정의data: 컴포넌트의 상태 정의 (반환된 객체로 작성)computed: 계산된 속성 (종속성을 기반으로 데이터를 자동 업데이트)watch: 데이터 변경 시 특정 로직 실행lifecycle hooks:..

약속!!! ㅁ Promise.all()Promise.all([promiseA, promiseB]) .then(results => { console.log('모든 프로미스 완료:', results); }) .catch(error => { console.error('하나 이상의 프로미스 실패:', error); }); 여러 프로미스를 병렬로 실행하고, 모두 완료될 때까지 기다림사용 사례: 동시에 여러 API 요청을 하고, 모두 성공했을 때 결과를 처리해야 할 때 사용주의점: 하나의 프로미스라도 실패하면 전체가 실패하며, catch()가 호출 ㅁ Promise.race()Promise.race([promiseA, promiseB]) .then(result => { console.log..

{{ data.name }} {{ data.age ? ' | ' + data.age : '' }} age가 있으면 김동우 | 26세age가 없으면  김동우

mounted() { this.preventNavigation(); // 네비게이션 방지 추가 }, methods: { preventNavigation() { history.pushState(null, null, location.href); window.onpopstate = () => { history.go(1); }; },},

사용자는 뒤로 가기 버튼을 통해 이전 화면으로 이동하길 기대합니다.라우터를 사용한 일반적인 경우라면 화면 전환에서 굳이 뒤로 가기 버튼 같은 걸 신경 쓸 필요가 없이브라우저 뒤로가기 누르면 이전 페이지로 이동함니다... 하지만 라우터와 url없이 페이지가 이동하는 컴포넌트라...게다가 모바일 웹을 위한 컴포넌트 였기에...컴포넌트 내 '닫기' 버튼 같이 버튼으로 관리하면 될 듯 싶었으나... 막상 핸드폰으로 열어봤더니 드럽게 불편하다......  지피티가 vuex니 뭐니 무슨무슨 방법이 있다고 했는데 최대한 뭐 덜 붙이고 popstate를 활용해  {{ headerTitle }}  화면 전환 (changeView)change..

데이터베이스에서 테이블 조회할 때, 대부분 컬럼(AAA, BBB, CCC, DDD, EEE)은 값이 같은데, 딱 하나(JJJ)만 여러 값을 가지는 상황이 생겼음AAA~EEE 값이 같아도 JJJ 값이 다르면 별도의 행으로 나옴    우선, SQL에서 JSON_ARRAYAGG 함수를 써서 여러 값 가진 컬럼을 JSON 배열로 바꿨음.SELECT AAA, BBB, CCC, DDD, EEE, JSON_ARRAYAGG(DISTINCT JJJ) AS JJJFROM TABLE...GROUP BY AAA, BBB, CCC, DDD, EEE이렇게 하니까 쿼리 결과는 원했던 대로  [10, 20, 30] 이런 식으로 잘 나왔음      다음으로, 이 데이터 담을 DTO를 만들었음. RestController 사용해서 응..