프론트엔드 3

[scss/sass] scss 설치 및 컴파일하기(watch)

1. npm으로 설치 및 실행하기 1.1 설치 npm install -g sass 설치가 왼료 되어도 node_moduls 폴더가 생기거나 package.json 파일이 생성되지는 않는다. 따라서 잘 설치 되었는지 확인 하려면 sass --version 명령어를 입력해서 sass 버전이 출력되면 설치 성공!! 1.2 Compile 및 watch 브라우저는 scss, sass를 읽지 못한다. 따라서 브라우저가 읽을 수 있는 css 문서로 변환을 해주어야 하는데, 이것을 컴파일 이라고 한다. 컴파일은 .scss 문서를 변경 할 때마다 되어야 하므로 watch 라는 명령어를 사용해서 파일의 변화를 항상 '감시' 하도록 해줘야 한다. /* 개별파일을 컴파일 하고 싶을 때 */ sass --watch 파일이름.s..

frontend/html, css 2023.06.09

[Vue3] Vuex4 사용하기

vue를 사용하는데 데이터가 너무 많거나, 컴포넌트간에 데이터를 주고받는 것이 props 만으로 해결되지 않을 때 사용하는 라이브러리 이다. store.js 파일 하나에 데이터를 다 때려넣은 뒤에 하나씩 꺼내먹기.. 꺼내쓰기 때문에 간편하기도 하다. 아니 이럴거면 나는 mitt를 왜 배운거야.... 그러나 그것은 그렇지 않다는 것이 코딩애플 스앵님의 말씀. 프로젝트 규모가 크지 않은 이상 vuex를 사용하는 것은 배보다 배꼽이 더 클 수도 있다고 한다. 기술적인 효율성을 중시하도록 하자. 배움의 효율성을 중시하는 것 보다...(이제 학생의 입장에서 벗어날 때도 되었다.) 1. 설치하기 npm install vuex@next 혹은 yarn add vuex@next 2. 셋팅하기 2-1. src 폴더 안에 ..

frontend/Vue.js 2023.05.26

[Vue3] mitt 사용하기

vue 에서 데이터를 활용 할 때, 부모 -> 자식컴포넌트로 데이터를 이동 하고 싶을 때에는 props 기능을 사용 한다. 그런데, 하위 -> 상위 -> 상위 컴포넌트로 이동하고 싶거나 형제간에 데이터를 이동시키고 싶을 때에는 props 기능을 사용 하지 못한다. 이렇게, 데이터를 부모-자식 관계에 종속되지 않고 보낼 수 있게 해주는 라이브러리가 mitt 이다. mitt 는 emitter와 같음 1. mitt 설치하기 npm install mitt 혹은 yarn add mitt 2. 셋팅하기 - main.js 파일에 작성 import mitt from 'mitt'; //mitt라이브러리를 import 함 const emitter = mitt(); const app = createApp(App); app...

frontend/Vue.js 2023.05.26