• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Vue 게시판 안녕하세요 선생님 조언좀 구해도 될까요?

안녕하세요 선생님 조언좀 구해도 될까요?

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 글쓴이
  • #22964

    전광수
    참가자

    일요일 밤늦게 죄송합니다...수업 너무 잘들었고, 신입개발자로서 자바와 스프링쪽만 배웠다가, 회사의 요구로 다급하게 뷰와 노드js를 배우려고 수강 시작했습니다.

     

    다름이아니라 지금 난생처음 실무 투입되었고, 뷰로 개발을 시작했습니다.

    뷰3 프로젝트이고, 의뢰 기획서대로 하려고 하는데,

     로그인, 회원가입 페이지는 일단 뒤로 미루고, 로그인 후 페이지가 크게 7장입니다.

    App.vue가 부모파일, 그 안에 요청한 기능 메뉴페이지가 7개 입니다. 그리고 이 7개 메뉴페이지는  view 폴더에 모아뒀구요. 이 view 폴더안에 메뉴페이지 7개를 생성하여 라우트로 연결했습니다. App.vue에서 route-view로 보일거구요. 그리고 각 뷰 폴더 안에 상세 기능을 컴포넌트로 집어넣었습니다.   

    이런 구조입니다.   그래서 App.vue 를 최상위 부모로 보고, 여기서 데이터를 관리하며, 우선은 router-view에

    선생님께 배운대로 프롭스로 데이터를 날리고, 그리고 라우팅된 7개의 vue파일 안에도 자식컴포넌트들이 들어

    갈텐데 프롭스로 전송하듯이 하면 되는걸까요?  일단 데이터베이스 소스나 백앤드 소스를 받은게 없어서 강의

    하신것처럼 js 파일에 오브젝트형식으로 임의의 데이터를 작성후에 혼자 바인딩 해봤는데,

    Main.vue 파일 과 자식컴포넌트 들 밖에 안해봤지만 데이터바인딩은 잘 되네요. 구조상 이렇게 개발해도 괜찮은걸까요?

     

     

    그리고 의뢰받은 기획서상에는.... 모달창에서 기능 및 데이터 처리를 요구받아서, 수업내용을 참고하여 모달창

    을 만들고, 바인딩도 하고, 열고 닫기도 문제잘 작동했는데, 문제는....데이터 처리를 할때, App.vue 안에,

    Main.vue 라우트를 타고 그 안에 3개의 자식 컴포넌트들 중에 특정 버튼을 클릭하면, 모달창을 구현하고, 그 안

    에서 사용자가 원하는 작업을 처리하는 방식입니다.

    근데 이 모달창을 하드코딩을 하든, 컴포넌트화를 하든,  정의되는 위치가 앱.뷰 -> 메인.뷰 -> 자식컴포넌트 안

    에 되는데, 모달창이 이 자식 컴포넌트 안에 갇혀서...화면 전체에 나타나질 않습니다.

    화면전체에 모달을 구현하려니 앱.뷰 안에 모달 컴포넌트를 정의해야만 구현이 되고...이래되버리면 데이터 방

    향이 이상하게 되어버리고....의뢰사 측에 모달 말고 다른 방식으로 구현해야 한다고 해야할까요? 아니면 다른 좋은 방법이 있다면 조언좀 부탁드려도 될까요...?

     

     

    #22970

    codingapple
    키 마스터

    네 구조는 별문제 없어보이는데요 

    모달창은 html css 문제가 아닐까요 모든 페이지 위에 뜨려면

    - App.vue에 모달창 html을 미리 만들어놓고

    - 모달창 조작하는 state도 App.vue에 만들어놓고 

    - 버튼 누르면 App.vue에 있는 state를 조정하면 될듯요 

    #22977

    전광수
    참가자

    아...일요일 늦은밤인데 답변주셔서 너무감사합니다.

     

    선생님 말씀대로 모달을 앱.뷰에 정의하고, 모달창 여는것만, 앱.뷰 -> 메인.뷰 -> 메뉴.뷰 컴포넌트에 커스텀 이벤트 발사하는

    코딩을 했는데,  혹시 커스텀이벤트도 프롭스처럼 각 중간 컴포넌트에 코딩하고 타고올라가야 하나요?

     

    지금 중간에 메인.뷰에는 별다른 코딩을 하지않구, 최하위에서 커스텀이벤트 메시지 발사하고, 앱.뷰에서 모달창에 수신하는 코딩을 했는데 반응을 안하네요...중간에 메인뷰에도 커스텀이벤트를 받아서 다시 앱.뷰로 발사하는 처리를 해야하는건지요? 늦은밤에 죄송합니다...

     

     

    #22987

    codingapple
    키 마스터

    커스텀이벤트는 바로 윗 컴포넌트까지만 데이터 전송이 가능합니다 

    두번 쓰거나

    mitt을 쓰거나 그러면 됩니다 

     

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠