vue.js 기초- 인스타그램 만들어보기 07_slot (코딩애플 세미나 후기)
에 대해 배워보겠습니다. 저는 강의를 들으면서 slot에 대해 처음알게되었습니다. slots는 하위컴포넌트에게 HTML, Component를 전달 할 수 있다고합니다. 그리고 을 사용하는 이유는 props 정의안하고 parent에서 child로 데이터를 간단히 표현할 때 사용한다고 합니다. 컴포넌트를 사용할때 로 사용하고는 했는데, 가끔 강의를 보면 로 사용하고는 하는 사람들을 봤습니다. 은 여닫는 함수가 모두 존재할 때에만 사용할 수 있다고 합니다. 문법 child parent 여기에 HTML을 넣으면 slot 안에 표현된다 을 vue파일에 추가합니다. App.vue App.vue 파일에서 태그 사이에 타이틀을 삽입해보겠습니다. Editor.vue 을 사용해줍니다. 아래와 같이 확인이 됩니다. 정상적으..
vue.js 기초- 인스타그램 만들어보기 04 (코딩애플 세미나 후기)
*이미지 출처는 https://pixabay.com/ 이고, 무료이미지(19.07 기준)여서 사용했습니다. 문제가 있을 시 삭제하겠습니다. 이제 어느덧 코딩애플에서 진행하는 기초 세미나 3/4가 지났습니다 ㅎㅎㅎㅎ!! 근데,, 사실은 이걸 처음 작성할 때는 다음주가 마지막이었는데 ㅋㅋㅋ 수정하고 있는 지금은, 벌써 4주차가 끝난 뒤입니다.^^; 하핫.... 3회차 수업은 라우터를 사용하지 않았습니다. 어떤 작업을 했는지, 체크해보면 1.메인에 리스트를 보여줄 것입니다. - '사용자이름, 타이틀, 텍스트, 이미지' 2.메인에서 이미지 업로드 버튼(+)을 누르면 사진을 업로드 할 수 있고 두 번째 레이아웃이 보여집니다. 3.두 번째 레이아웃에서는 업로드한 사진을 보여주고, 텍스트나 글쓴이 등 정보를 입력받는..
vue.js 기초- 인스타그램 만들어보기 03 (코딩애플 세미나 후기)
*선생님코드아님 주의, 틀릴 수 있음 주의, 들으면서 적은거 아님주의, 복습하면서 적은거임, 1회차에서 이어서하는 부분입니다. 1회차 안보면 이해안될 수 있음 주의ㅎ 새로운 프로젝트 생성 ROOT폴더에서 새로운 프로젝트를 생성할 것입니다. vscode에디터에서 ROOT 폴더 열어줍니다. (저는 vuu가 ROOT 폴더입니다. vuedongsan은 1차때 만든 프로젝트 폴더입니다.) (모르겠으면 처음부터해도되나 install할 것들이 있습니다) vue, @vue/cli 터미널을 열어줍니다. (단축키 ctrl + `) 또는 메뉴에서 Terminal > New Terminal 터미널이 열린 경로를 확인해줍니다. vue 프로젝트 폴더를 생성할 ROOT 폴더로 경로가 되어있는지 확인합니다. (vuu임을 확인) 프로..
Vue.js single file components 방식으로 개발해보기 02 - Vue Project 시작, 페이지 띄워보기
Vue.js single file components 방식으로 개발해보기 02 Vue Project 시작, 페이지 띄워보기 Vue.js 페이지 브라우저에서 열어보기 실행 할 프로젝트 폴더를 생성하거나 선택하여 에디터에서 열어줍니다. - 이 폴더에 vue.js를 다운로드 받아 사용할 것입니다. 저는 vue 폴더를 만들어서 VScode에서 Open Folder 했습니다. 에디터에서 cmd 창을 열어줍니다. - VScode 에디터의 단축키는 [ctrl + `] 인데, 에디터마다 다르므로 검색은 필수 입니다. (기본으로 cmd를 제공하지 않는 에디터는 플러그인이 있을 듯 합니다.) cmd창을 자세히보면 [ PS C:\Users\사용자명\Desktop\vue > ] 라고 되어있는데, 이것은 자신의 폴더 구조입니다..