Yeong Jin

부모컴퍼넌트의 created()가 다 끝나고 자식컴퍼넌트의 created()가 실행되는게아니다 이때문에 처음 접속시 부모컴퍼넌트에서 준 값을 못받아오는 경우가 있다. 컴포넌트의 라이프 사이클 훅은 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 순차적으로 호출되지만, 비동기 작업으로 인해 라이프 사이클 훅 내부의 실행 순서가 변경될 수 있습니다. 그러므로, 부모 컴포넌트의 created 훅이 완료되기 전에 자식 컴포넌트의 created 훅이 실행될 수 있습니다. 이 문제를 해결하기 위해, 자식 컴포넌트에서 필요한 데이터가 부모 컴포넌트로부터 전달되었음을 확인하는 watch 속성을 사용하거나, beforeCreate 또는 created 훅에서 $nextTick 함수를 사용하여 DOM 업데이트를 기다리도록 할 ..

public 폴더와 src/assets 폴더를 동시에 사용하는 것이 가능하고 때로는 필요한 경우도 있습니다. 각 폴더는 서로 다른 목적과 처리 방식을 가지고 있기 때문에, 프로젝트의 요구 사항에 따라 두 폴더를 혼합하여 사용할 수 있습니다. public 폴더는 웹팩 빌드 프로세스를 거치지 않고 웹 서버에 그대로 제공되는 정적 파일을 저장하는 곳입니다. 이 폴더에 저장된 파일은 브라우저에서 절대 경로를 사용하여 직접 접근할 수 있습니다. 로그 파일, 파비콘, 큰 이미지 파일 등 변경이 거의 없고 최적화가 필요하지 않은 파일을 저장하는 데 적합합니다. src/assets 폴더는 웹팩 빌드 프로세스를 통해 처리되는 파일을 저장하는 곳입니다. 웹팩을 사용하면 이미지 파일을 최적화하고, 해시를 추가하여 캐싱을 개..

2023-04-25 01:30:43.794 WARN 68132 --- [nio-8888-exec-9] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long'; nested exception is java.lang.NumberFormatException: For input string: "undefined"] vue에선 String으로 보내는데 자바에서는 Long값으로 받는게 문..

저게 누락되면 이런 에러가 뜹니다.

위와같이 슬라이드가 진행되도 예약가능시간정보가 각 카드마다 업데이트가 되지못하고 똑같이 유지되고 있습니다 이 문제를 해결하려면, 각 CafeIntroBoardCardForm 컴포넌트가 고유한 예약 가능 시간 데이터를 가지도록 수정해야 합니다. 먼저, MainCafeInfoForm 컴포넌트에서 visibleCafes()를 계산할 때 각 카페 데이터에 고유한 키를 추가하겠습니다. 이 키를 사용하여 CafeIntroBoardCardForm 컴포넌트가 고유한 예약 가능 시간 데이터를 가져올 수 있습니다. 그런 다음, CafeIntroBoardCardForm 컴포넌트에서 고유한 키를 사용하여 예약 가능 시간 데이터를 가져옵니다. props에 uniqueKey를 추가하고, 예약 가능 시간을 가져오는 메서드를 수정합..

v-if를 사용하여 이벤트 정보가 변경되었을 때에만 Toast UI Viewer를 렌더링하도록 해보겠습니다. EventBoardDetailForm.vue 파일을 다음과 같이 수정해 주세요: 위 코드에서는 loaded라는 data 속성을 추가하였고, event prop이 변경될 때마다 loaded를 잠시 false로 설정한 후 다음 틱에서 다시 true로 변경하도록 했습니다. 이렇게 하면 이벤트 상세 페이지를 이동할 때마다 Toast UI Viewer가 다시 렌더링되어 올바른 정보를 보여주게 됩니다 EventBoardDetailForm.vue 컴포넌트에서 event prop에 대한 감시자(watch)를 설정하는 부분입니다. 이 코드는 다음과 같은 작동 방식을 가집니다: event prop이 변경될 때마다 ..

Vuex에서는 주로 actions와 mutations를 거쳐서 상태를 변경하는 것이 권장됩니다. 이렇게 하는 이유는 아래와 같습니다. 추적 가능성: Vuex의 변이를 사용하면 상태 변경을 추적하기 쉽습니다. 개발 도구를 사용하여 변이를 추적할 수 있고, 시간 여행 디버깅 같은 고급 기능을 이용할 수 있습니다. 일관성: 상태를 변경하는 방법을 일관되게 만들어 애플리케이션 전체에서 코드를 이해하고 디버깅하기 쉽게 합니다. 규칙화: Vuex를 사용하면 상태를 변경하는 로직을 규칙화하여, 다른 개발자들이 코드를 쉽게 이해할 수 있도록 도움을 줍니다. 그러나 간단한 경우나 비동기 작업이 필요하지 않은 경우에는 직접 상태를 변경할 수도 있습니다. 이렇게 하면 코드가 간결해지지만, 위에서 언급한 이점을 놓칠 수 있습..

mutation-types.js 파일을 사용하는 주요 이유는 코드의 가독성과 유지 보수성을 높이기 위해서입니다. mutation-types.js 파일은 상수를 정의하는 데 사용되며, 각 변이에 대한 문자열 식별자를 포함합니다. 이렇게 하면 다음과 같은 이점이 있습니다. 가독성: 코드를 읽을 때, 문자열 대신 상수를 사용하면 의미가 명확해집니다. 상수를 사용하면 각 변이가 어떤 작업을 수행하는지 쉽게 이해할 수 있습니다. 유지 보수: 상수를 사용하면 중복을 줄일 수 있습니다. 변이 타입을 한 곳에서 정의하고 이를 여러 곳에서 사용하면, 나중에 변이 이름을 변경해야 할 때 한 곳에서만 변경하면 됩니다. 오류 방지: 오타나 잘못된 문자열을 사용할 가능성이 줄어듭니다. 문자열 대신 상수를 사용하면, 실수로 잘못..

Vuex를 사용하는 경우의 장점: 중앙 집중식 상태 관리: 애플리케이션의 상태를 한 곳에서 관리하므로 상태를 추적하기 쉽고, 코드의 일관성이 유지됩니다. 쉬운 디버깅: Vuex 스토어를 사용하면 개발 도구를 사용하여 상태를 추적하고 디버깅할 수 있습니다. 상태 변경 로직 추적: Vuex의 mutation과 action을 사용하면 상태 변경 로직을 한 곳에서 관리할 수 있습니다. 로컬 스토리지를 사용하는 경우의 장점: 영속성: 로컬 스토리지에 데이터를 저장하면 페이지 새로 고침이나 브라우저 종료 후에도 데이터가 유지됩니다. 간단한 사용: 로컬 스토리지는 간단한 키-값 저장소이므로, 별도의 라이브러리 설치 없이 사용할 수 있습니다. Vuex를 사용하는 경우의 단점: 영속성 부족: Vuex 스토어의 상태는 새..

while이 무한루프에서 빠져나오지못하면 브라우저가 렉걸리고 반응없고 흰창만 나오게된다...