Web/Vue.js & Nuxt.js (9) 썸네일형 리스트형 Nuxt.js - npm run build 시 에러 (Node 버전 변경으로 인한 오류) 오랜만에 포트폴리오 사이트 만들어 놓은 것 보다가 여기저기 수정해야 할 것들이 눈에 들어와서 프로젝트를 열었는데, 수정한 내용이 화면에 반영이 안되서 build 명령어를 쳤다가 에러가 났다. node sass could not find a binding for your current environment window 64-bit with node.js 14.x 라는 문구가 뜨고 그 아래 This usually happens because your environment has changed since running 'npm install' Run `npm rebuild node-sass` to download the binding for your current environment. 라고 친절하게 해결 방.. Vue.js 컴포넌트 공통 영역 처리하기 (feat. slot) 아래같은 형태의 컴포넌트를 여러 카테고리 게시판에서 공통으로 사용할 수 있도록 수정한다고 하자. 공통 컴포넌트 (하위 컴포넌트) - slot 적용 전 //게시글 제목과 작성자 이름 리스트를 뿌려주는 컴포넌트 {{ elem.title }} by {{ elem.userName }} | {{ elem.timeago}} 대부분의 형태는 비슷한데 세부적인 것들이 다르다면 예를들어, 익명 게시판이 존재해 딱 그 게시판만 사용자 이름을 표시하지 않도록 작성하고 싶다면 그 컴포넌트만을 위해 새로운 컴포넌트를 만들 필요 없이 을 사용하면 된다. 을 사용하면 변동이 있을 수 있는 부분을 상위에서 처리하도록 할 수 있다. 주의할 점은 상위와 하위 컴포넌트에서 slot의 name 속성 값을 동일하게 설정해 주어야 한다. 공통.. [ Nuxt.js ] 글로벌 css파일, 미디어쿼리 적용하기 1.Vue는 main.js에서 css파일을 require 해주면 된다. 2. Nuxt는 nuxt.config.js 파일에 아래와 같이 추가해 주면된다. 3.scss를 사용할 경우 >$ npm i sass-loader node-sass --save-dev //설치 해준다. style 태그에 scss 사용한다고 명시해준다. 로컬에서 사용하고 싶을 경우, style 태그 마지막에 scoped 키워드를 붙혀주면 된다. 4. 미디어 쿼리 사용해야 할 경우 >$ npm i nuxt-mq // 설치해 준 뒤, nuxt.config.js에 사용할 준비를 마친다. breakpoints는 각 화면 너비 값이다. 미디어 쿼리 적용해야할 요소에 :class="mq"라고 지정해 주면 $mq부분이 화면 사이즈에 따라 알아서 pc.. Nuxt 프로젝트 시작하기 Nuxt 설치 -> 프로젝트 생성 -> 관련 라이브러리 설치 -> 프로젝트 구동 >$ npx //설치 확인 명령어 뜨면 설치된 거임. >$ npx create-nuxt-app //넉스트 프로젝트를 생성하면 그 후 수많은 질문들이 나오는데, 나는 연습해보는 거라 거의 놉으로 설정하고 넘겼다. 이 과정에서 나오는 각 설정에 대한 질문은 공식문서에 잘 설명되어있다. 아래 링크 참고. https://ko.nuxtjs.org/guide/installation/ 설치 Nuxt.js는 시작하기 정말 쉽습니다. 간단한 프로젝트는 딱 `nuxt` 디펜던시만 있으면 됩니다. ko.nuxtjs.org 설치 끝나면 이렇게 앱으로 이동해서 실행하라고 알려준다. 프로젝트 생성이 완료된다. 폴더 구조가 뷰랑은 다르다는게 눈에 들어.. data(), computed, methods // 검색창 // 메모 뿌려주는 부분 코드 일부를 가져왔는데, 너무 길어서 설명에 필요없는 코드는 지웠다. 1. data()는 안에서 사용할 변수를 가지고 있다. data() { return { kWord: "", keyword: "" }; }, 주로 method에서 이 값들을 가지고 연산한다. 2. computed는 화면이 그려지기 전에 미리 계산되어야하는 데이터를 가진다. computed: { posts() { return this.$store.state.post.posts; }, }, 즉, 변화에 따라 재연산이 필요한 데이터를 computed에 지정한다. 위 코드에선 메모를 불러와서 화면에 뿌리는데, posts는 작성된 메모들이 담긴 객체이다. 그리고 메모를 새로 작성할 때마다 이 객체에도 반영이되.. Vue 디렉티브(v-접두사) 간단 정리 디렉티브 종류 및 역할 v-접두사로 시작하는 모든 속성을 디렉티브라고 한다. v-if 참,거짓 여부에 따라 해당 태그를 화면에 표시할 지, 말지를 정함 v-show 참 거짓 여부에 따라 태그를 화면에 표시할지 말지를 정한다. (v-if와 v-show의 차이는 v-if는 false시에 화면에서 아예 해당 태그를 삭제, v-show는 태그는 존재하나 화면에서 숨기는 정도. 주로 if를 많이 씀) v-for 조건식에 맞게 반복해서 어떤 태그를 생성해 내는 역할을 한다. v-bind html속성과 뷰 데이터를 연결해줌 바인딩이 필요한 경우 v-on 이벤트를 감지해서 처리한다. 예를들어 이벤트 발생시 연결된 메소드를 실행 v-model 주로form 에서 많이 쓰고 폼에 입력한 값을 뷰 데이터와 즉시 동기화 inp.. $emit 하위에서 상위로 이벤트 전달하기 emit은 자식 컴포넌트에서 일어난 이벤트에 의해 부모의 데이터에 변화가 생긴 경우 사용한다. 다음 코드는, 모달창을 열고 닫는 코드이다. //상위 컴포넌트 this.$emit('실행할 부모 메소드 이름', 전달할 인자); //모달창 컴포넌트로 하위 컴포넌트이다. //중략 //클릭이벤트 발생시 close메소드 실행 props를 이용해 데이터 통신하기 부모 컴포넌트가 가진 데이터를 자식 컴포넌트에 공유해 줘야할 경우, 자식 컴포넌트 태그에 데이터를 바인딩 해서 전달해주고, 자식 컴포넌트에서는 props를 통해 부모의 데이터를 받는다. //상위 컴포넌트에서 ... export default{ data(){ return{ propsData, selected: { date: null, time: null }, }; } } //자식컴포넌트1 props:{ propsData:데이터타입, } //자식컴포넌트2 props: { 변수명: { type: Object, required: true }//required: true는 꼭 넘겨받아야 하는 데이터인지 설정 }, 이전 1 2 다음
