What I studied

vue3 프로젝트를 진행하며, json 데이터를 그 형태 그대로 화면에 예쁘게 보여주고자 방법을 찾다가 가장 먼저 적용해 본 방법은 태그를 사용하는 것이다. pre 태그를 사용하면 json 데이터가 화면에 예쁘게 출력되지만 css가 적용되지 않은 pre 태그는 정말 json 그 자체이다. 그래서 코드블록을 예쁘게 보여줄 수 있는 라이브러리가 있는지 찾아보다가 vue-code-highlight라는 라이브러리를 알게 되었고, 한번 적용해 보았다. 1. vue-code-highlight 설치 npm, yarn 등 내가 사용하고 있는 패키지매니저에 따라 해당 라이브러리를 설치해 주면 된다. npm install vue-code-highlight --save 2. vue에서 사용할 수 있도록 설정 그다음은 vue..

잠시 멈췄던 vue 프로젝트를 다시 진행하기 위해 프로젝트 구성 후, vue router에 대해 공부했다. vue router같은 경우에는 처음 vue 프로젝트를 구성할 때 추가하여 바로 사용할 수도 있지만 나는 기본적인 셋팅만 맞춰놓고, 라우터를 직접 설치했다. 라우터뿐만 아니라 피니아, 타입스크립트 등도 처음에 모두 설정 가능하지만 추후 하나씩 적용해보며 공부해보려고 한다. 1. Vue Router란? SPA, 싱글페이지 어플리케이션의 경우 기본적으로 html이 한개이기 때문에 우리가 기존 바닐라 자바스크립트로 만들었을때와 달리 html을 여러개 생성하는 구조가 아니다. 그래서 쉽게 말해 하나의 html안에서 router를 통해 화면을 바꿔준다고 생각하면 될 것 같다. 즉, route는 URL에 따라..

vue 코드를 보다보면 리액트와는 다르게 computed를 어렵지 않게 찾아볼 수 있는데 이건 언제 어떻게 사용하는지가 궁금했다. computed 속성은 템플릿의 데이터 표현을 좀 더 직관적이고 간결하게 도와주는 속성이라고 하는데 템플릿 내에 너무 많은 조건과 연산식을 넣으면 템플릿이 복잡해지고 유지보수가 어려워지기에 이를 사용한다고 한다. 1. computed 사용 예시 예를들면 아래의 코드처럼 데이터 연산식을 템플릿 코드에 그대로 넣는다고 생각해보자. 연산이 길어지면 길어질수록 복잡해지는 것을 알 수 있다. {{ data }} {{ data.split('').reverse().join('') }} 이렇게 한줄만 있을 경우에는 그나마 낫지만 동일한 계산식이 템플릿에 두번 이상 쓰일 수도 있기 때문에 반..

vue로 개발을 하기 위해 공부하다보니 @, $, : 등 알 수 없는 기호들때문에 머리가 아팠다. 도데체 뭘 의미하는걸까... 리액트와 바닐라자바스크립트로 개발을 하다가 vue를 사용하려니 쉽다고는 하지만 그래도 처음이라 헷갈린다. 그래서 하나씩 찾아서 정리해보려고 한다. 1. $ (dollar) 의미 MOVIE.WEB Search Movie About 가끔 보면 와 같이 this.$emit, this.$router.push() 등의 코드를 볼 수 있는데 이 때까지만해도 $가 어떤걸 의미하는지 모르고 썼던 것 같다. vue에서 router 하는 법을 검색했다가 다들 저렇게 쓰길래 썼던 건데 이제는 정확히 알고 써야 활용할 수 있을 것 같다. $ 는 vue의 전역객체 속성을 의미하는데 private하게 사..

리액트를 공부하다 Vue로 넘어오면서 초기 셋팅부터 기본적인 설정까지 해보게 되었는데, vite + vue3 프로젝트를 먼저 셋팅해준 후, ESLint와 prettier 설정까지 마무리했다. 이 글은 내가 보기 위해 정리하는 것이다. 리액트와 관련된 라이브러리는 많이 사용해서 알고 있었지만 Vue는 처음이다보니 Vue와 관련된 것들은 모두 생소했다. 그래서 어떤 것들이 필요하고 어떤 것들이 사용되는지부터 차근차근 알아보면서 적용해보려고 한다. 1. Vite 란? Vite는 Webpack과 같은 빌드 도구인데 웹팩을 사용할 때보다 빠른 속도로 빌드된다는 장점이 있어 많은 주목을 받고 있다. 기존까지는 없었던 프론트엔드 개발 경험을 향상시켜줄 새로운 프론트엔드 툴인 것이다. 기존에는 원래 Vue 전용이었지만..

vue의 state 흐름이 어떻게 이루어지 알아보기 위해 간단하게 CRUD를 구현할 수 있는 TodoList를 만들어봤다. 리액트는 useState를 통해 상태를 업데이트할 수 있었는데 vue와는 어떤 차이가 있을지도 궁금했다. 공식 문서를 보면 프로젝트를 시작하는 방법부터 자세하게 나와있어서 차근차근 따라해보았는데 생각보다 크게 어렵지는 않았던 것 같다. 1. Vue 프로젝트 시작하기 npm init vue@latest 해당 명령어를 입력하면 아래와 같이 옵션을 선택할 수 있는데, 내가 원하는 상황에 맞게 옵션을 선택해주면 빠르게 만들 수 있다. 나는 router 설정과 Eslint, prettier 옵션을 선택한 후 프로젝트를 생성했다. ✔ Project name: … ✔ Add TypeScript?..

Vue 프로젝트를 처음 만들어 이것저것 실행을 시켜보니 정말 많은 에러를 만날 수 있었다. 처음에 리액트를 사용했을 때도 그랬던 것 같은데 Vue도 처음이니 이럴 수 밖에 없는 것 같다..? 처음에는 App.vue 파일에서 count 함수를 실행시키고 조건문과 반복문을 사용하는 정도로 실행을 시켜봤는데, 두번째 단계인 컴포넌트 생성에서 에러를 만났다. 컴포넌트 폴더 안에 Fruit.vue 라는 파일을 생성했는데... 화면이 안보인다... ESLint가 화면을 막아버렸다. 뭐가 문제인걸까 에러 로그를 쭉 읽어보니 error Component name "Fruit" should always be multi-word 라는 문구가 눈에 띄었다. 컴포넌트의 이름은 항상 multi-word여야한다? 뭔소리지? Us..

매번 리액트만 공부하다가 vue로 만든 프로젝트는 어떻게 동작하는지 궁금해서 vue를 설치해봤다. vue는 공식문서도 잘 되어있어서 보고 따라하기 어렵지 않았는데, cdn을 통해서 설치하거나 npm, CLI 등의 방식으로 프로젝트를 시작할 수 있는 것 같았다. 그래서 위 방법 중 npm 설치를 통한 프로젝트 시작과 CLI 방식을 통한 프로젝트 시작 두가지를 시도해보았는데. CLI 방식을 위해 글로벌로 패키지 설치를 시도했는데 바로 에러가 발생했다. $ npm i -g @vue/cli 에러 로그는 다음과 같다. npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/@vue npm ERR! errno -13 ..