vuejs 4

VueJS 하다가 NextJS 하다가 VueJS 했더니 생긴 일

이슈 회사의 front end 프로젝트는 VueJS 로 돼 있고 점진적으로 NextJS 로 이관하고자 새로 NextJS 레포지토리를 만들어 작업하고 있었다. 그 와중에 VueJS 프로젝트를 수정할 일이 생겼는데, VueJS 프로젝트 dev server 를 실행했더니 무슨... hash 값을 생성하는 데에서 버그가 발생하며 app이 종료됐다. 원인 무슨 이유인가 싶어 구글링 해 보니,NodeJS 버전 이슈란다. VueJS 는 16.x.x 버전을, NextJS 는 18.x.x 버전을 사용하고 있는데, NextJS 를 개발할 때 nvm 으로 버전을 변경해서 발생했던 것이다. 해결(찜찜한 해결) 단순히 NodeJS 버전을 변경해 주기만 하면 되는데, IntelliJ (얼티밋) 에서 edit configurati..

VueJS vs ReactJS 가독성

1. ReactJS 는 JS와 html 코드를 하나의 js 파일에서 사용하기 위해 JSX(javascript + XML) 를 사용한다. VueJS 는 .vue 라는 고유 확장자를 사용한다. (sfc 의 강점을 확실히 살리는 듯 하다.) 2. 코드를 보자. JSX 의 경우, export default function 안에서 html, js 영역이 섞여 있는 듯 보인다.(css는 아쉽게도 없네요 ㅠ) VueJS 의 경우, 으로 html 영역을, 로 js 영역을, 로 css 영역을 딱딱 나눠주고 있다. ReactJS (c.f. nextJS + typescript 라 ReactJS + js 와 조금 다름) VueJS 3. WHY? React 16.7 에서 SFC 를 deprecated 시킨 것 같던데, 꼭 그래..

클린코드 IN 프론트엔드

팀 내 FE 소스코드는 대체로 잘 짜여진 코드, 모던한 VueJS, JS 의 장점을 잘 살린 코드였고 많은 구조 개선을 거친 것으로 보였다. 그럼에도 불구하고 처음 업무를 하는 나로썬 수정할 부분이 어디인 지 파악하기가 어려웠다. (물론 지금도...) 사무실에서 쉬면서 유튜브를 뒤적이고 있는데, TOSS SLASH 21 영상중 하나가 눈길을 끌었다. https://www.youtube.com/watch?v=edWbHp_k_9Y 제목 부터 '실무에서 바로 쓰는 FE 클린코드'..... 핵심 내용은 '추상화, 단일책임원칙' '코드가 짧다고 읽기 쉬운 코드가 아니다.' '코드가 길어져도 짧을 때 보다 읽기 쉬운 코드가 될 수 있다.' 로 보인다. 영상을 접하고 난 후엔 '이렇게 하면 다소 코드가 길어지고 파일..

vue 라이브러리 컴포넌트 배포 경험기 (vue, vite, npm, typescript, css)

최근 시작하는 몇 개의 사이드 프로젝트에서 '게시판' 기능이 필요했기에 아예 해당 컴포넌트를 라이브러리로 npm 에 배포해 사용하고자 npm 라이브러리를 만들었다. 라이브러리 결과물 : https://www.npmjs.com/package/vue-board-component vue-board-component ## This reusable component is bulletin board ('table' based on 'div( display: table )'). Latest version: 0.2.8, last published: 10 hours ago. Start using vue-board-component in your project by running `npm i vue-board-compon..