빵 입니다.

Vue2가 2023년 12월 31일부로 지원이 중단됐다.(EOL) 회사에서 진행하는 프로젝트에서 Vue2를 사용하고 있었기에 Vue3로 업그레이드 시키는 작업을 시작했다. 이전에 실무 작업을 할 땐, 항상 UI 컴포넌트를 직접 작업했었는데, 이번 프로젝트에선 꼭 UI Framework 사용하기로 마음 먹었다. 우선, 기존 프로젝트에서 Vue2, Vuex, Bootstrap-vue 등 Vue2에 최적화 된 패키지들을 걷어내고 Vue3에 최적화 된 패키지들을 검토했다. Vue-router는 그대로 사용하고, 상태 관리 라이브러리는 Pinia로 변경했다. 빌드 도구는 Vite를 선택했다. UI Framework를 선택해야 하는데... UI Framework 상위 3개를 비교했다. 각 버전 1부터 현재 버전까지..

동적 라우팅의 문제점 동일한 레이아웃에 데이터만 달라지는 경우 동일한 component를 재사용하게 된다. (하나의 component의 parmas를 구분해서 데이터 값을 변경해 주고 있다.) 그러나! 한번 렌더링 된 component는 route가 변경되더라도 라이프사이클 훅은 한 번 더 호출하지 않기 때문에, component의 데이터 값이 바뀌지 않는다. 문제 게시판 1, 게시판 2 두 개의 게시판을 만드는데 동적 라우팅을 이용하고, 동일한 UI를 사용하기 때문에 공통 component를 사용한다. 메뉴를 이동해도 route만 변경되고 본문 내용은 바뀌지 않는다. 해결 과정 route 변경 시 onUpdated에서 데이터를 재호출 해보았다. const boardType = route.params.b..

template과 slot을 어떻게 쓸 수 있는지 너무 헷갈려서 검색해 보았다. 막연하게 사용했었는데, 위 두 태그가 HTML 태그 기반이라는 것을 알았다. 사용 방법은 Vue에서 사용하던 것과 같다. 다만, 좀 더 구체적으로 두 태그를 알게 되었다. HTML 태그 : 콘텐츠 template 요소 엘리먼트는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공한다. (페이지가 load 될 때, HTML 코드 조각을 담아 놓는 안 보이는 요소이다.) 엘리먼트는 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너 페이지를 불러오는 동안 구문 분석기가 요소의 콘텐츠도 읽기는 하지만, 이는 유효성을 검증하기 위함이며 렌더링..

문제 에 있는 을 ref 로 가져오는데, 자꾸 null 찍힌다. => onMounted() 함수 안에서는 ref 값을 잘 가져온다. => setup() 안에 바로 변수를 만들어 할당한 후, section.value를 할당한다. 이유 setup()은 라이프 싸이클 중 create 시점에 실행되는데, 그 시점엔 을 읽기 전이다. 아직 html이 읽히지 않았기 때문에 항상 null 이 찍힌다. html DOM 가져오는 는 beforeMount 시점에 데이터를 가져온다. ref는 mounted 시점에 html 데이터를 가져올 수 있다. => 데이터 가져오는 시점보다 더 빨리 변수를 선언하니까 항상 null 문제 해결 1. setup에 변수를 선언만 해놓고, mount 될 때 데이터를 push해준다. 2. dom..

a태그 => 화면 전환 => 리소스 처음부터 끝까지 다시 호출. router-link => 기존 리소스 그대로 사용하기 때문에 새로 불러오지 않고, 사용할 컴포넌트만 불러옴 => 태그 생성. => 선언적 방식. 클릭 시 url 로 이동만 한다. 📌 router.push는 router-link 를 클릭 할 때 내부적으로 호출되는 메소드 ===> router-link를 클릭하면 router.push를 호출하는 것과 같다. router.push() => 자바스크립트로 주소창만 변경해주고, 히스토리 쌓고, 컴포넌트만 변경한다. => 주소 추가하기 위해 onClick과 같은 이벤트 핸들러와 같이 사용된다. => , 등 어떤 태그에 이벤트를 발생시켜 주소를 추가해서 => window.history API와 비슷하게..