본문 바로가기
반응형

개발이야기37

[VanilaJs] 게시판 만들기 (4) - 글 상세보기와 수정 1. 글 상세보기 글 상세보기는 mode가 Detail 일때, 수정이 불가능한 화면에서 게시글 내용을 확인 할 수있다. 해당 아이콘을 누르면 detailItem 함수에서 글번호 (no)값을 넘긴다. function detailItem(no) { modalOpen('Detail'); let detail = _storageData.filter((data) => { return data.no == no; }); let title = document.getElementById('title'); let content = document.getElementById('content'); title.value = detail[0].title; content.value = detail[0].content; title.r.. 2022. 7. 3.
[VanilaJs] 게시판 만들기 (3) - 글 삭제와 등록 저번에 만들었던 모달창을 활용하여 글을 삭제하고, 등록 하는 기능을 만들려고 한다. 1. 글 삭제 먼저 삭제버튼을 만들기 위해 각 열마다 삭제 버튼을 추가해 주려고 한다. bootstrap 아이콘을 사용하기 위해 cdn 링크를 추가해 주었다. 기존 boardListAction 함수에 action 영역을 만들어주고, 상세 페이지 아이콘에 상세페이지 동작(detailItem)함수와, 삭제 아이콘에 삭제 동작(deleteItem)함수를 추가하고, 해당 고유값(data.no)를 넘겨 주었다. 열마다 아이콘이 추가된 모습. function deleteItem(no){ if (confirm(no +'번 글을 삭제하시겠습니까?') === true) { _storageData = _storageData.filter(f.. 2022. 7. 1.
[VanilaJs] 게시판 만들기 (2) - Modal창 마크업 및 동작 vue.js를 사용했을 때 처럼 모달창을 재사용이 가능한 단독적인 템플릿으로 작성하고 싶었다. html안에서 html을 부르는 방법은 여러가지가 있었는데, 제일 안정적이라 판단한 js의 XMLHttpRequest객체를 사용해보았다. 먼저 modal.html 파일을 생성하고 마크업 부분은 아래와 같다. 글 등록 Save Close index.html에 모달을 활성화 할수있는 버튼과, 모달이 활성화 됐을때 그림자를 담당하는 영역, 모달창 html을 불러오는, 영역을 추가해 주었다. w3-include-html 속성을 참고하며 js부분을 확인해 보겠다. w3school에서 퍼온 html파일 로드부분을 추가해주었다. function modalOpen() { document.getElementsByClassNam.. 2022. 6. 28.
[VanilaJs] 게시판 만들기 (1) - 글 목록 조회 및 페이징 처리 1. 글 목록 조회 1-1. json 데이터를 localstorage에 저장 //data.json 내용을 로컬스토리지에 문자형식으로 넣는다. async function dataSet() { const data = await fetch("./data.json") .then(response => { return response.json(); }); window.localStorage.setItem('storageList',JSON.stringify(data)); } 개발자도구 -> Application -> Storage -> Local Storage 에 storageList이름의 키로 데이터가 저장된것을 확인 할 수 있다. //data.json 내용을 로컬스토리지에 문자형식으로 넣는다. async func.. 2022. 6. 28.
"RangeError: Maximum call stack size exceeded" "RangeError: Maximum call stack size exceeded" 스크립트상에서 호출이 많이 발생해서 생기는 오류라고 한다. 보통 재귀를 잘못 태웠을때 발생했는데, 라우터 이동할때 로직상 재귀가 없는데 발생하여 하나씩 지워보다가 발견한 문제는 mixin 이였다. 페이지마다 mixin을 사용해서 데이터를 불러오는 나름 함수를 공통화 시켜줬는데.. mixin 부분을 지우니 해결되었다. 결론은 1. mixin선언부가 잘못되었다. 2. mixin안에서 의도치않게 재귀타고있다. 약간 2번이 더 가까운데 다음에 더 알아보는걸로.. 2021. 6. 14.
[Vuetify] 데이터 테이블 헤더 show/hide 환경 - Vuetify2 데이터 테이블 헤더부분을 활성화, 비활성화해주는 예제입니다. headers: [ { text: 'Dessert (100g serving)', value: 'name', align: '', show: true }, { text: 'Calories', value: 'calories', align: '', show: true }, { text: 'Fat (g)', value: 'fat', align: '', show: true }, { text: 'Carbs (g)', value: 'carbs', align: '', show: true }, { text: 'Protein (g)', value: 'protein', sortable: true, align: '', show: true },.. 2021. 6. 12.
젠킨스 간단 사용기 #3. 자동배포 테스트 Contents 젠킨스 간단 사용기 #1. 설치 젠킨스 간단 사용기 #2. GitHub 연동 젠킨스 간단 사용기 #2. 자동배포 테스트 환경 - Red Hat Enterprise Linux version 8 - JDK 1.8 - Jenkins 2 - Node 10 - Nginx - Git - GitHub 목적 - Vue 소스를 빌드하여 GitHub에 푸쉬 하는 이벤트로 서버에 자동으로 배포 저번 게시물에서 젠킨스 설치까지 완료하였으며, 이번 게시물에서는 GitHub와 연동 및 Vue소스를 빌드하여 자동으로 서버에 배포되는 과정을 진행해 보도록 하겠습니다. 1. 계정 설정 Jenkins 관리 > Manage Credentials > (global) > Add Credentials Kind : Usernam.. 2020. 10. 25.
젠킨스 간단 사용기 #2. GitHub 연동 Contents 젠킨스 간단 사용기 #1. 설치 젠킨스 간단 사용기 #2. GitHub 연동 젠킨스 간단 사용기 #2. 자동배포 테스트 환경 - Red Hat Enterprise Linux version 8 - JDK 1.8 - Jenkins 2 - Node 10 - Nginx - Git - GitHub 목적 - Vue 소스를 빌드하여 GitHub에 푸쉬 하는 이벤트로 서버에 자동으로 배포 저번 게시물에서 젠킨스 설치까지 완료하였으며, 이번 게시물에서는 Jenkins와 GitHub를 연동하는 작업을 진행하겠습니다. 1. 키 생성 터미널에서 ssh-keygen 명령어를 사용하면 /root/.ssh/ 경로 밑에 id_rsa.pub 파일이 생성됩니다. vi 명령어로 id_rsa.pub 키파일을 열어 복사합니다.. 2020. 10. 25.
[Vuetify] 자주 사용하는 색상 네이밍 지정하기 src/plugins/vuetify.ts import Vue from 'vue'; import Vuetify from 'vuetify/lib'; import 'material-design-icons-iconfont/dist/material-design-icons.css'; import colors from 'vuetify/lib/util/colors'; Vue.use(Vuetify); export default new Vuetify({ theme: { themes: { light: { RED: '#fc3d5d', BLUE: '#348ed8', }, }, }, }); vuetify 설정파일에 theme.themes.light 밑에 '사용할 이름': '색상' 으로 선언해주면 색상을 네이밍으로 편하게 사용 할.. 2020. 10. 13.
[Vue] vue-class-component 형식에서 Mixin 사용하기 src/mixins/list.ts import { Vue } from 'vue-property-decorator'; import Component from 'vue-class-component'; import store from '@/store/index'; @Component export default class MixinVue extends Vue { public getList(target: string): void { store.dispatch(target); } } store의 action을 호출하기 위한 mixin 파일 src/App.vue 2020. 10. 13.
반응형

티스토리툴바