Nellie's Blog

등록.vue 페이지 //🎈 1. 수정용으로 데이터를 받는 변수 선언 const dietDataPut = route.query // 여기서 라우팅하며 보낸 수정용 데이터를 받는다. //🎈 2. 사용자가 input박스에 숫자를 입력할 때, testFlag 에 따라서 수정인지, 등록인지 if 분기문을 탄다. async function changeDietData() { console.log('testFlag🧧', testFlag.value) console.log('dietDataPut :::: ', dietDataPut) // 등록 시 필요한 object 만들기 if (testFlag.value === 'CREATE') { console.log('selectedFoodInfo를 잘 받아오나 보자~~~~~등록시🍀..

아래와 같은 커스텀 달력 구현을 완료하였다. props, emit 을 사용하여 약간 복잡해보이는 로직이어서 조금 어려웠다. 개발은 환자의 일정 리스트의 개수를 달력에 보여주고, 클릭을 하면 해당 일정의 리스트의 상세내역을 보여준다. 주요 컴포넌트는 단 두개이다. list 컴포넌트(부모) / ExmpleFull(달력, 자식) 컴포넌트. 구현 과정 list 컴포넌트 : 리스트의 수를 가져와서 {날짜 : 상세데이터} 오브젝트로 만들어주고, 달력 컴포넌에 props로 해당 오브젝트를 넘겨주고, ExampleFull 컴포넌트 : 달력 컴포넌트에 해당 날짜의 상세데이터.length를 읽어서 표시해준다. 클릭 시에는 부모 컴포넌트에 emit으로 날짜를 넘겨주고, list 컴포넌트 : 부모 컴포넌트는 emit 으로 받..

https://github.com/richardtallent/vue-simple-calendar GitHub - richardtallent/vue-simple-calendar: Simple Vue component to show a month-grid calendar with events Simple Vue component to show a month-grid calendar with events - richardtallent/vue-simple-calendar github.com 1. 클론받고 2. 명령어로 라이브러리 설치 npm i --save vue-simple-calendar npm run dev 여기엔 캘린더 모양이 2가지가 있다. simple / full (컴포넌트 명은 ExampleSimp..

문제 상황 달력 컴포넌트(ExampleFull)에 날짜와 타입을 전달하여, 달력에 보여주고 싶었다. 26일자에 '입원'이라는 문구가 떠야하는데 아래와 같이 보였다. 기존의 일정 list 뷰 코드 {{ data?.patientName }}님 환자 등록번호 : {{ data?.patientId }} 기존의 달력 컴포넌트 뷰

notice.xml 이전/다음글의 idx 와 글 제목을 map으로 받았다. SELECT idx, title FROM tb_notice WHERE idx IN ( (SELECT idx FROM tb_notice WHERE idx #{idx} AND del_yn = 'N' ORDER BY idx DESC LIMIT 1 ), (SELECT idx FROM tb_notice WHERE idx ]]> #{idx} AND del_yn = 'N' ORDER BY idx LIMIT 1 ) ) NoticeDto.java @Data public class NoticeDto extends BaseDto { private Integer idx; private String type; private String title; pr..

vue 를 사용하여 플랫폼을 개발하며 하는 기록.. varlet이라는 프레임워크를 사용하였으며 vue 3버전을 사용하여 개발하였다. 간단히 리스트 / 검색기능 / 상세보기 기능을 구현했다. CSS 가 적용되지 않아 허접해보인다. servicesearch > list.vue {{ item.department }} {{ item.act }} -제목 : {{ item.title }} -안내 내용 : {{ item.contents }} -이미지url(임시) : {{ item.images?.[0]?.url }} servicesearch > [idx].vue -과 : {{ item.department2 }} -행위 : {{ item.act }} -제목 : {{ item.title }} -안내 내용 : {{ item..

1. nodeJS 설치 https://nodejs.org/en/download Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. vue 개발환경 다운로드 npm install -g @vue/cli 를 입력하여 vue 개발환경을 빠르게 다운로드 받는다. 3. 확장자 설치 1. Vetur 2. HTML CSS Support 3. Vue 3 Snippets 4. vue 프로젝트 생성 vue create [프로젝트명] https://haenny.tistory.com/247 [VueJS] VSCode 에서 VueJS 시작하기 - ① 설치 및 세팅 방법 [VueJS] VSCod..

샘플 1 {{name}} 이름 {{job}} 샘플 2 Hello, Vue.js Hi {{main_content2}} {{today_weather}} 오늘의 날씨보기 오늘의 운세 {{today_lucky}} {{book.title}} {{book.author}}