본문 바로가기

vue.js

 (17)
7. [vue3-project] VSCode 에서 전체 파일 내 단어 검색하기 안녕하세요 무럭무럭 나무입니다! 프로젝트를 따라가던 중 VSCode에서 전체 파일 내에서 단어를 검색하여 그 단어를 포함하고 있는 파일을 수정해야 했습니다!!! 그래서 VSCode에서 전체 파일 내 단어 검색은 어떻게 하는지 정리하겠습니다 일단 현재 파일 내의 단어 검색은 Ctrl + f 를 눌러주면 이렇게 파일 내에 검색할 수 있는 창이 뜨고 오른쪽 화살표를 눌러주면 그 단어를 포함하는 위치로 이동시켜줍니다!! 그렇다면 전체 파일 내에서 단어를 찾을 때는 어떻게 할까요?? 간단합니다 Crrl + Shift + f 로 Shift 키만 하나 더 눌러주면 됩니다. 그러면 이렇게 전체 폴더 경로 부분에 검색창이 뜨고, 검색 단어를 포함한 파일들을 확인할 수 있습니다 ㅎㅎㅎ 혹은!!! 왼쪽 파일표시 아래에 돋보..
6. [vue3-project] getCurrentInstance사용하기(구:useContext) 안녕하세요!! 무럭무럭 나무입니다 ㅎㅎㅎㅎㅎㅎ getCurrentInstance사용은 이전에 useContext로 사용되었던 것인데 useContext 가 이제 사용되지 않는다고 합니다!! 우리가 emit을 사용할 때 setup( props, { emit } ) 을 통해서 emit을 사용해 왔는데요. 하지만 props는 함수 안에서 사용 안 하는 경우 인자로 받아 올 필요가 없기 때문에 그런 경우에 context ( emit )를 함수 내에서 불러와서 사용할 수 있습니다. 그때 사용하는 것이 getCurrentInstance (구:useContext )라는 것입니다. getCurrentInstance 사용 예시! 따라서 getCurrentInstance를 import 시켜준 후 아래 setup() 함수에..
5. [vue3-project] Vue Router 설치하여 페이지 추가하기 안녕하세요!!!! 오늘은 vue.js3에서 페이지 간 이동을 위해 Vue Router 패키지 설치하는 방법을 정리하도록 하겠습니다!! 저는 인프런-'프로젝트로 배우는 Vue.js3' 코지코더님 강의를 보고 정리하고 있습니다 ㅎㅎ 강의 내용은 대강 vue.js3를 활용하여 to-do List를 만드는 것인데요!! to-do List 홈 페이지, List 페이지, 상세페이지 이렇게 페이지를 나눠보기 위해 파헤쳐 보도록 하겠습니다 ㅎㅎ 1.Vue Router 패키지 설치하기 vue router 관련 문서 Installation | Vue Router Installation Direct Download / CDN https://unpkg.com/vue-router@4 Unpkg.com provides npm-b..
3. [vue3-project] json-server 연결하기(로컬 개발용 DB) 안녕하세용~~ 오늘은 vue3 프로젝트를 위해 로컬 개발용 데이터베이스를 연결하는 방법을 정리하도록 하겠습니다 ㅎㅎㅎ 저는 인프런-'프로젝트로 배우는 Vue.js3' 코지코더님 강의를 보고 이런 게 있구나!!! 하고 정리하고 있습니다 ㅎㅎ 강의 내용은 대강 vue.js3를 활용하여 to-do List를 만드는 것인데요!! 이때 to-do List에 등록, 수정, 삭제될 데이터를 담아둘 곳이 필요했습니다 ㅎㅎ 그럼 로컬 개발용 데이터베이스를 연결하기 위해 알아보도록 하겠습니다!! 1. npm > json-server json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.4, last..
4. [vue3-project]폼 컴포넌트 만들어 사용하기(props/emits) 안녕하세요 무럭무럭 나무입니다! 제가 오랜만에 글을 작성하는 이유는..... 바로바로 코지코더님 무료강의 vue3로 프로젝트 만들기를 시청하던 도중 8강부터는 유로결제페이지로 넘어가더라고요!?!??? 그래서 하나씩 기능을 정리하는 방식보다 강의 들었던 것들은 Git-hub로 정리하고, 듣는 과정에서 정리가 필요하거나, 중간정리 차원에서 블로그 정리를 해보려고 합니다 ^^ 일단 제가 공부하고 있는 곳은 인프런에서 수강할 수 있답니당 ㅎㅎ https://www.inflearn.com/course/vue-%EA%B8%B0%EC%B4%88-%EC%9D%B5%ED%9E%88%EA%B8%B0 프로젝트로 배우는 Vue.js 3 - 인프런 | 강의 Vue.js 3 사용 방법을 배우고 프로젝트에 적용을 하면서 익힐 수 ..
3. [vue3-project] 컴포넌트와 프래그먼트 안녕하세요~!!! 오늘은 vue.js3의 폴더 구조에 대해 알아보려고 합니다!! 저는 코지코더님의 무료강의로 공부하며 정리 중입니다!! https://www.youtube.com/@kossiecoder 오늘은 뷰 컴포넌트와 프래그먼트에 대해 알아보도록 하겠습니다!! 1. 뷰 컴포넌트 뷰 컴포넌트는 (하나의 부품) 여러 곳에 가져다 사용할 수 있습니다. 컴포넌트 파일을 만들때에는 확장자가 vue로 들어갑니다. 그래서!! 컴포넌트 파일 생성 시 컴포넌트명.vue 로 만들어주면 됩니다. 뷰 컴포넌트는 세 부분으로 나눠지는데요! 1) -> html 코드가 들어감 2) -> 자바스크립트가 들어감 3) -> css 코드가 들어감 스크립트와 스타일을 활용하여 코드를 작성해보도록 하겠습니다^^ 를 사용할때에 expor..
2. [vue3-project] 폴더 구조 알아보기 안녕하세요~!!! 오늘은 vue.js3의 폴더 구조에 대해 알아보려고 합니다!! 저는 코지코더님의 무료강의로 공부하며 정리 중입니다!! https://www.youtube.com/@kossiecoder 코지 코더 Kossie Coder 호주에서 웹개발자로 일하고 있는 코지 코더의 채널입니다! 실용적인 개발 영상들로 처음 코딩을 접하시는 분들이 따라하시고 기본을 익힐수 있는 영상들을 만들고 있습니다. 감사합니다 ^^ www.youtube.com 오늘은 웹페이지를 읽어 들이는 흐름과 패키지 파일에 대해 정리하도록 하겠습니다 ㅎㅎ 먼저 vue가 어떻게 설치되어 구동되는지 확인해 보도록 하겠습니다! 1.vue.js 설치되어 있는 곳 package.json 파일> dependencies {}와 devDepende..
1. [vue3-project] 설치 및 기본환경 세팅 안녕하세요~~ 오늘도 무럭무럭중인 1월의 나무(ㅋㅋㅋ)입니다!! 아니 아니.... 코지코더님 유튜브 무료 강의 따라 하며 정리하고 있었는데... vue2서비스는 곧 종료된다고 하더라구요....주륵.... 그래서 vue.js3를 프로젝트로 배우는 영상이 있길래 경로를 틀었습니다..!!! 일단 vue.js2는 Options API를 사용하고, vue.js3는 Composition API를 사용한다고 합니다!!! 아직 이 차이가 정확히 어떤 건지 자세히 파악이 안 되었지만 나중에 정확하게 알게 되면 추가로 정리해보려고 합니다..!!! 설치 및 환경세팅을 하는 데에도 벌써 차이가 나더라고요!!! 아직은 지식의 한계로 나만의 언어로 설명해 보자면... vue.js2에서는 index.html 한 곳에 스크립트 몽땅..

티스토리툴바