vue
-
(국비교육) 83 - Spring boot + vue 게시판 만들기 ( 아이디 유효성 검사 + 세션 + 수정/삭제버튼 비활성화 + index 페이지 만들기)개발/국비교육 2023. 10. 6. 14:34
■ 아이디 유효성 검사 v-if 가 참인 경우 해당 문구가 나오게 설정한다. 문구가 처음에는 안나오도록 false 처리 한다. Vue 인스턴스의 데이터 변경을 관찰 / 반응할 때 watch 기능을 쓴다. 입력 시 idInputCheck true 이기 때문에 문구가 뜬다. 길이가 5보다 작은 경우에는 문구가 뜨게 설정하고, 그렇지 않을 경우 문구가 없어지게 설정한다. exec 를 통해 reg 에 해당하는 값이 있는지를 체크한다. 비어있지 않은 경우 그 값을 나오게 설정해서 동작하는지 확인한다. 해당하는 값이 있는경우 slice 를 통해 더이상 입력하지 않게 설정 가능하다. /\s/ 공백을 찾아서 != -1 으로 공백이 있는 경우 문구가 뜨게 설정한다. https://v2.ko.vuejs.org/v2/gui..
-
(국비교육) 81 - Spring boot + vue 게시판 만들기 + AWS 시험 미리보기 + GITHUB 관리(동영상) + Vuex 설치 + store 이용하기 + 포트 변경하기 + 로그인/로그아웃 만들기개발/국비교육 2023. 10. 4. 16:10
■ AWS 시험 미리보기 https://www.examtopics.com/exams/amazon/aws-certified-cloud-practitioner/view/ AWS Certified Cloud Practitioner Exam – Free Exam Q&As, Page 1 | ExamTopics Which component of the AWS global infrastructure is made up of one or more discrete data centers that have redundant power, networking, and connectivity? A. AWS Region B. Availability Zone C. Edge location D. AWS Outposts Reveal ..
-
(국비교육) 77 - Spring boot + vue 게시판 만들기 3 ( 수정하기 + 삭제하기)개발/국비교육 2023. 9. 21. 12:25
■ 수정 삭제 버튼 만들기 (sep19) 수정 삭제 버튼을 만들어준다. https://www.bottlehs.com/vue/vue-js-axios-%EB%B0%8F-rest-api-%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-crud-%EA%B5%AC%ED%98%84/ Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며,Ajax를 통해서 서버에 요청을 한 www.bottlehs.com 메소드에 deletepost() 메서드를 만들어준다. detail 에 있는 bno 값 제대로 불러지는 ..
-
(국비교육) 76 - Spring boot + vue 게시판 만들기 2 + Quill+ 12회차 시험개발/국비교육 2023. 9. 20. 12:32
■ 글쓰기 버튼 만들기 (sep19) 글쓰기 버튼을 만든다. 다음과 같이 만들어진다. write 메소드를 만들어주고 이동 확인하면 된다. WritePage.vue 생성해준다. index.js 에 Writepage 도 라우터에 넣어준다. 글쓰기 영역도 만들어준다. 글쓰기 부분도 꾸며준다. input : title content: textarea 로 설정한다. v 모델을 사용할 것이다. v 모델을 적으면 하단의 return 값이 들어간다. 우리가 입력한 값을 끌고 갈 것이다. write 글쓰기 메소드를 만들어주고 알람이 뜨게 한다. this.title 을 적어줘야 어떤 값인지 인식하고 가져온다. 제목에 입력한 값이 알람창으로 뜬다. saveData 로 저장한 값을 담는다. * 요청사항 vue 책 다 읽고 n..
-
(국비교육) 75 - Spring boot + vue 게시판 만들기개발/국비교육 2023. 9. 19. 12:50
■ Spring boot + vue 게시판 만들기 (sep19) vue create sep19 로 만들기 4개 선택하고 생성해준다. 보드 컨트롤러 생성해주기 서비스와 DAO 도 생성해준다. DAO 는 인터페이스로 생성 메퍼도 만들어준다. DAO 경로도 설정해준다. 프로퍼티 설정해준다. json 추가해주기 찍어주고 내보내는 것 전체 만들기 위해 @RestController 넣어준다. 여러개의 객체를 동시에 내보내기 위해 배열로 담아서 내보낸다. 메퍼도 설정해준다. 다음과 같이 화면에 출력된다. * 에러해결 뒤에 서버를 내가 사용하는 서버가 아닌 기본 세팅 서버로 넣고 돌려서 에러가 났다. 사용 서버로 변경해주니 에러가 해결되었다. 데이터 가져오는 다리 역할을 하는 것을 설치해준다. 즉 스프링 부트에서 값 ..
-
(국비교육) 72 - vue ( 반복문 + 구구단 + 소리버튼 + 증가버튼 + div)개발/국비교육 2023. 9. 13. 11:46
■ vue * 요청사항 - babel : Babel은 최신 버전의 JavaScript 코드(ES6+ 문법)를 브라우저나 환경에서 지원하는 이전 버전의 JavaScript 코드로 변환해주는 도구 - eslint : ESLint는 코드에서 발견된 잠재적인 문제나 스타일 가이드의 위반을 식별하고 보고해주는 도구 vs 코드에서 새 터미널로 npm new serve 로 열어주기 중요한 파일 3가지 scope 이 스타일은 여기서만 쓰이고 다른 곳에서는 쓰이지 않는다는 뜻이다. 여기서의 #app 의 스타일은 index.html 의 id="app" 의 스타일을 주는 것이다. props 와 emit prop 는 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 방법 emit 은 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달..
-
(국비교육) 71 - 11회차 시험 + vue개발/국비교육 2023. 9. 12. 15:04
■ 11회차 시험 [문항1] 파이썬 언어의 특징에 대해 서술하세요.(10점) 1. 파이썬은 스크립트 언어로 컴파일 없이 바로 실행 결과 확인 가능하다. 2. 동적 타입 언어로 변수의 자료형을 지정하지 않고 단순히 선언하는 것으로 값을 지정할 수 있다. 3. 플랫폼 독립적이다. 따라서 리눅스, 유닉스, 윈도우, 맥 등 대부분의 운영체제 OS 에서 모두 동작한다. [문항2] 설치된 파이썬의 버전을 확인하는 명령을 적으시오.(10) python --version [문항3] 실행결과를 적으시오.(10) REMEMBR AND STR [문항4] 실행결과를 적으시오.(10) False [문항5] 실행결과를 적으시오(10) a= 20 b= 2 [문항6] mariadb와 연결하기 위해 필요한 import 문장을 적으세요..