두부의 개발새발 이야기

Template 조건문v-ifv-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용됩니다.블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링됩니다.Vue는 정말 멋지죠!v-elsev-else 디렉티브를 사용하여 v-if에 대한 "else 블록"을 나타낼 수 있습니다.전환Vue는 정말 멋지죠!아닌가요? 😢v-else-ifv-else-if는 이름에서 알 수 있듯이 v-if에 대한 "else if 블록" 역할을 합니다. 여러 번 연결될 수도 있습니다 A B C A/B/C 아님 v-else와 마찬가지로 v-else-if 엘리먼트는 v-if 또는 v-else-if 엘리먼트 바로 다음에 와야 합니다.v-show엘리먼트를 조건부로 표시하는 다른 옵션은 v-show 디렉티브입니다. 사용법은 대..

https://devdubu.tistory.com/72📘기본적으로 NodeJs 설치와 JavaScript의 선수 지식이 있다는 가정 하에 진행하겠습니다.만약 위 선수 지식이 필요하다면, 아래의 링크로 우선적으로 선수 지식을 익히고 봐주세요설치 방법기본적으로 JavaScript는 Script언어이기에, Shell 로 쉽게 프로젝트를 생성할 수 있습니다.yarn global add @vue/cli# 또는 npm install -g @vue/cli# Vue3 기반 설치npm init vue 위와 같은 화면이 나오게 됩니다.그리고 Select feature to include your project 란은 프로젝트에 필요한 npm 패지키를 미리 설치하고,Defualt로 구성해주겠다는 소리 입니다. 특별한 일..

머리말정말 오랜만의 복귀 입니다.울산에서 출장 덕분에 조금 많이 바빳고, 바쁜 와중에도 조금이라도 더 지식을 쌓으려고 노력했던 흔적들을 이제는 다듬을 때가 되어서 돌아왔습니다.이제는 개인적으로 진행하는 프로젝트 및 제가 프로젝트를 진행하면서 나왔던 트러블들에 대한 이슈 해결 등등을 정리해서 하나씩 올려보려고 합니다.많관부입니다!!위 시리즈는 NodeJS 디자인 패턴 책을 읽고 후기 및 정리 글로 올리는 것입니다.개인적인 생각이지만, 하나의 프로그램을 잘 사용하기 위해서는 그 프로그램이 개발자의 의도를 잘 최대한 활용하는 것이 제일 잘 사용하는 방법 인것 같습니다. 이를 토대로 생각했을 때, NodeJS로 주력으로 개발하는 개발자로서, NodeJS를 만든 저자의 철학은 당연히 알아야한다고 생각이 들었습니다..

JavaScript에서의 모듈화Java에서의 객체를 만든다와는 조금은 다른 개념이지만, 복잡했던 부분을 설계적으로 나누며 하나의 로직들을 단순화 시키는데는 동일하다고 생각이 듭니다.JavaScript에서는 모듈화를 시킬 수 있는 요소는 3가지 정도 되어보입니다.기본적으로 export import의 지식이 있다는 가정하에 적어봅니다.Object 형말 그대로 Object형으로 모듈화를 하는 것입니다.export const objectModule = { objectString: 'example', objectFunc : () =>{ },}// 외부에서 사용할 때objectModule.objectFunc()지극히 개인적으로 느끼는 장단점 입니다.부족할 수도 있습니다 ㅎㅎ장점하나의 객체만 Export ..

정규표현식(Regular Expression)이란정규표현식이란?문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴) 입니다.간단한 문자 검색 부터 이메일 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 빠르게 수행 가능하다.단 정규식 패턴이 수행 내용과 매치가 잘 안 되어 가독성이 많이 떨어진다.정규 표현식은 다음과 같은 역할을 한다.문자 검색(Search)문자 대체(replace)문자 추출(extract)JavaScript는 직접 빌드된 정규 표현식을 지원하는 언어 중 하나로, JS에서 사용되는 정규식을 기준으로 살펴보겠습니다.정규 표현식 테스트 사이트아래의 사이트들을 이용하여 정규식 테스트를 할 수 있습니다.사이트 별로 설정된 환경이 다르기에, 일부 작동되지 않거나, J..

What are Interfaces?JS에서 Interface?JS로 컴파일 될때는 Interface가 적용되지 않는다.하지만, 컴파일 과정에서 타입 체크 및 검사를 통해서 해당 interface에 대입하여, 검사를 진행합니다.function hello(person: { name: string; age: number; }): void { console.log(`안녕하세요! ${person.name} 입니다.`);}const p: { name: string; age: number; } = { name: 'Mark', age: 35};hello(p); // 안녕하세요! Mark 입니다.////////////////////////////////////////////////////////////..

마크다운 출력물에 대해서 한참을 찾던 도중 아래의 사이트를 찾게 되었다.Nuxt vs VitePress vs Astro생각해보면 이런 오픈 소스들은 다 MD 파일로 이루어져 있는데 라우팅이며, 아니면 다른것이며 어캐한거지 맨날 의문을 가지던 도중에 불현듯, Vitepress라는 사이트를 우연히 찾았고, 다들 이런 식으로 문서 정리를 하는 것 같았다.VitePress하지만, 아쉽게도 우리 환경은 Nuxt이며, 위 사이트의 환경은 Vue인 것을 감안하면, 잘 맞지 않았다.대신 Nuxt 환경은 Nuxt Content 라는 환경으로 대체하는 분위기 이다.조금 더 알아봐야겠지만, VitePress를 공부하면서 Nuxt Content에 대한 생소한 문법도 좀 익힐 수 있을 것 같다이윤 즉,,, 해당 사이트를 보면 ..

정보가 하나도 없는 Vitest와 Nuxt3(Vue3)에서 조금이라도 도움이 되고자 글을 작성해 봅니다.Test를 진행하는 과정 중에서 Mounted에 관련된 부분에서 제대로 작동 되지 않아서 로직이 안도는 등, 항상 문제의 원인인 LifeCycle hook쪽에서 지속적으로 문제가 발생하였습니다.하지만, Vue utils를 뒤져봐도, Nuxt3의 test를 바라봐도 Mounted를 지원하지 않는 다는 말은 없었습니다.이상하다 싶어서 조금 테스트를 해봤고, 결과를 보고 나서는 조금은 ref는 왜 사용하는지 조금 알게 됐습니다.우선 코드로 보자면 아래와 같은 코드가 vue 파일이 될 것입니다. {{ mountTest }} 위는 테스트를 진행할 코드이며 아래는 테스트 코드 입니다.import { it, e..

Vue.js Vue.js?간단한 화면 UI 개발 부터 라우팅, SSR 등의 애플리케이션 레벨의 개발을 지원하는 프레임워크리액트와 더불어 실무에서 가장 많이 사용되고 있는 프론트엔드 개발 라이브러리리엑트에 비해 진입 장벽이 낮고 쉽게 배울 수 있다.개발 생산성이 높고 JS 지식이 크게 요구 되진 않는다.프론트엔드, 백엔드 등 점차 직무적으로 전문화되고 있는 상황에서 처음 개발을 시작하는 프론트엔드 개발자 또는 백엔드 개발자에게 선호되는 경향Vue2와 Vue3의 차이점라이브러리 내부 로직 재작성TypeScript로 작성주요 개발 도구들 변경Vue 개발자 도구, VSCode 플러그인, Vite 기반 프로젝트 생성 등컴포지션 API, Teleport 등 새로운 문법 지원리액티비티 시스템 기반 API 변경공식 문..

이번 저희 회사에서는 대대적인 업그레이드를 진행했습니다.Vue2 -> Vue3로 업그레이드를 진행했다는 점 인데, 이 부분에서 많은 부분들이 변화했으며, 그 중에서 하나가 WebPack에서 Vite 로의 변화 입니다.Vite란?프랑스 어로 빠르다 라는 의미를 가지며, 간결한 개발 경험에 초점을 둔다.기존 Bundler 구조기존 번들러는 애플리케이션의 모든 소스 코드에 대한 빌드 과정을 마친 후 페이지를 제공했습니다.그렇기에, 빌드 후 서버를 구동 또는 재 구동하는 과정에서 꽤나 많은 시간을 소요했습니다.Vite의 구조vite는 현재 페이지에 변경점이 생긴다면 해당 페이지에서 필요로 하는 모듈만을 수정한 뒤 갱신합니다.ESM모듈 시스템으로 사용하고 있기 때문에,브라우저에서 어떤 모듈에 대한 교체를 요청하면..