오랜만에 포트폴리오 사이트 만들어 놓은 것 보다가 여기저기 수정해야 할 것들이 눈에 들어와서 프로젝트를 열었는데, 수정한 내용이 화면에 반영이 안되서 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. 라고 친절하게 해결 방..

아래같은 형태의 컴포넌트를 여러 카테고리 게시판에서 공통으로 사용할 수 있도록 수정한다고 하자. 공통 컴포넌트 (하위 컴포넌트) - slot 적용 전 //게시글 제목과 작성자 이름 리스트를 뿌려주는 컴포넌트 {{ elem.title }} by {{ elem.userName }} | {{ elem.timeago}} 대부분의 형태는 비슷한데 세부적인 것들이 다르다면 예를들어, 익명 게시판이 존재해 딱 그 게시판만 사용자 이름을 표시하지 않도록 작성하고 싶다면 그 컴포넌트만을 위해 새로운 컴포넌트를 만들 필요 없이 을 사용하면 된다. 을 사용하면 변동이 있을 수 있는 부분을 상위에서 처리하도록 할 수 있다. 주의할 점은 상위와 하위 컴포넌트에서 slot의 name 속성 값을 동일하게 설정해 주어야 한다. 공통..

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 설치 -> 프로젝트 생성 -> 관련 라이브러리 설치 -> 프로젝트 구동 >$ npx //설치 확인 명령어 뜨면 설치된 거임. >$ npx create-nuxt-app //넉스트 프로젝트를 생성하면 그 후 수많은 질문들이 나오는데, 나는 연습해보는 거라 거의 놉으로 설정하고 넘겼다. 이 과정에서 나오는 각 설정에 대한 질문은 공식문서에 잘 설명되어있다. 아래 링크 참고. https://ko.nuxtjs.org/guide/installation/ 설치 Nuxt.js는 시작하기 정말 쉽습니다. 간단한 프로젝트는 딱 `nuxt` 디펜던시만 있으면 됩니다. ko.nuxtjs.org 설치 끝나면 이렇게 앱으로 이동해서 실행하라고 알려준다. 프로젝트 생성이 완료된다. 폴더 구조가 뷰랑은 다르다는게 눈에 들어..

// 검색창 // 메모 뿌려주는 부분 코드 일부를 가져왔는데, 너무 길어서 설명에 필요없는 코드는 지웠다. 1. data()는 안에서 사용할 변수를 가지고 있다. data() { return { kWord: "", keyword: "" }; }, 주로 method에서 이 값들을 가지고 연산한다. 2. computed는 화면이 그려지기 전에 미리 계산되어야하는 데이터를 가진다. computed: { posts() { return this.$store.state.post.posts; }, }, 즉, 변화에 따라 재연산이 필요한 데이터를 computed에 지정한다. 위 코드에선 메모를 불러와서 화면에 뿌리는데, posts는 작성된 메모들이 담긴 객체이다. 그리고 메모를 새로 작성할 때마다 이 객체에도 반영이되..

디렉티브 종류 및 역할 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..