반응형 Vue3 [React] 사진첩 게시판 저번에 작업했던 vue2_photo_board와 컴포넌트 구조, 스타일링, 변수, 함수를 최대한 동을하게 구성하여 해서 진행하였다. 목차 1. 환경 2. 반응형 화면 3. 기능 4. 프로젝트 구조 5. 컴포넌트 구조 6. 통신과 랜더링 7. 전체소스 1. 환경 node v18.12.1 react v18 (useContext, react-query) 2. 반응형 화면 3. 기능 1. 사진 상세보기 (모달창 활성화) 2. 페이징 처리 3. 상세페이지 닫기( 모달창 비활성화) 4. 프로젝트 구조 src ⌞ api ⌞ board.js : context방식의 api 인스턴스 ⌞ boardClient.js : axios로 직접적인 통신 ⌞ components ⌞ layout ⌞ImageLoading.jsx : 이미.. 2023. 1. 4. [Vue] 사진첩 게시판 목차 1. 환경 2. 반응형 화면 3. 기능 4. 프로젝트 구조 5. 컴포넌트 구조 6. 주요 메서드 7. 전체소스 1. 환경 node v16.15.0 or v18.12.0 vue2 vue/cli 5.0.8 2. 반응형 화면 3. 기능 1. 사진 상세보기 (모달창 활성화) 2. 페이징 처리 3. 요청 게시물 개수 설정 (설정값 로컬스토리지에 저장) 4. 상세페이지 닫기( 모달창 비활성화) 4. 프로젝트 구조 src ⌞ api ⌞ ContactsAPI.ts : API 호출 및 데이터 반환. ⌞ components ⌞ Layout ⌞Loading.vue : 로딩 애니메이션 ⌞ Item.vue : 게시물1개에 대한 컴포넌트 ⌞ List.vue : 게시물의 목록 컴포넌트 ⌞ Modal.vue : 모달창 컴포넌트.. 2022. 11. 17. Vuetify 연습장 Vuetify는 bootstrap같은 UI 프레임 워크이다. Vue + Beautify의 합성어로 'Vue를 아름답게 하다.' 라는 뜻을 가지고있다고 한다. Vuetify공식 홈페이지에 나와있는 예제를 간단하게 연습해가며 채워가보도록 하겠다. Vuetify공홈 https://vuetifyjs.com/en/introduction/why-vuetify Why Vuetify? — Vuetify.js Vuetify has an extremely active community, provides easy to use Material Design components and is consistently updated. vuetifyjs.com Vuetify CND으로 시작하기 https://vuetifyjs.com/e.. 2020. 1. 11. 이전 1 다음 반응형
