프론트엔드 개발

이전 시간에는 Nuxt3 이론을 배웠다면, 이번에는 공식 홈페이지를 보며 직접 Nuxt3를 만들어 보겠습니다. Prerequisites Node.js* (latest LTS version) Visual Studio Code Volar Extension, 공식문서에는 추천하는 링크를 다운받으라고 하였으나, 되지 않아서 두번째꺼를 다운받았어요 Take Over Mode (recommended) TypeScript Vue Plugin (Volar) * Node.js 가 설치되어있다면, node --version으로 v14 or v16인지 확인해주세요~! * Take Over Mode를 활성화했거나 TypeScript Vue 플러그인(Volar)을 설치한 경우 *.vue 파일에 대한 shim 생성을 비활성화할 ..

Nuxt js 공식 홈페이지에서 공부하면서 번역한 것 글을 정리해보겠습니다. Nuxt 3 버전인 점 참고해주세요. What is Nuxt? Nuxt의 목표는 뛰어난 개발자 경험을 염두에 두고 직관적이고 성능이 뛰어난 웹 개발을 만드는 것입니다. Why Nuxt? Nuxt가 무엇인지 이해하려면 최신 애플리케이션을 만드는 데 필요한 사항을 이해해야 합니다. reactivity 및 web components를 사용할 수 있는 JavaScript 프레임워크인 Vue.js를 선택했습니다. 개발 중 핫 모듈 교체를 지원하고 프로덕션용 코드를 번들로 제공하는 번들러인 webpack 5와 Vite를 모두 지원합니다. 레거시 브라우저를 지원하면서 최신 JavaScript 구문을 작성하는 변환기인 esbuild를 사용합니..

props에 class binding시 각자 다른 값이 들어가야 하거나 안들어가도 될때 Before Parent.vue 다음과 같은 Parent.vue에서 button을 하나의 컴포넌트로 만들때 서로 다른 class를 바인딩 시키는 법을 알아보겠습니다. A B C After Parent.vue Child.vue {{title}} addClass가 있던 없던 바인딩된 값이 class에 추가로 들어오는 것을 확인할 수 있습니다. 이외에도 상황에 따른 class binding을 추가하겠습니다~! 댓글에 자유롭게 자기가 사용하고 있는 binding 방법을 적어주시고 같이 소통해요!

이번에 지라 처음 사용하면서 알아본 것 feature 브런치 feature/SCRUM-0000_whatEver 같이 설정 기존 commit 규칙: [SCRUM-0000] commit 내용 [SCRUM-0000]을 자동 반영하고 싶어서 알아본 것 Git hook Git Hook란 Git Hooks 는 Git과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이다. 크게 클라이언트 훅 과 서버 훅 으로 나뉘는데 클라이언트 훅 은 커밋, Merge 가 발생하거나 push 가 발생하기 전 클라이언트에서 실행하는 훅이다. 반면 서버 훅 은 Git repository로 push 가 발생했을 때 서버에서 실행하는 훅이다. 설정 방법 프로젝트 내에 숨겨진 파일. git에 들어가면 hooks..

앞에서 알아본 Cypress를 직접 실행해보면서 접근해보겠습니다. Cypress 설치 공식 홈페이지에 나와있는 설치 요구사항으로는 아래와 같습니다. Operating Systemp macOS 10.9 and above (64-bit only) Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only) Windows 7 and above (64-bit only) Node.js npm 사용시 Node.js v12 혹은 v14, 그 이상을 사용하라고 합니다 저는 macOS에서 다음과 같은 버전을 사용하겠습니다. 설치 아래 두가지중 선택하셔서 터미널에 명령어를 입력하면 됩니다. Node 및 npm을 사용하지 않다면 여기를 참고하세요 npm instal..

Cypress를 공식 홈페이지에서 보며 정리한 내용을 다뤄보겠습니다. Cypress란? Cypress는 자바스크립트 E2E 테스트 프레임워크입니다. 개발자 또는 QA 엔지니어가 Cypress를 이용하여 테스트를 할 수 있습니다. Cypress를 이용하여 다음과 같은 테스트를 할 수 있습니다. End-to-end tests Integration tests Unit tests Cypress 특징 Cypress의 특징은 다음과 같습니다. 완벽한 E2E Tesing을 경험할 수 있습니다. Cypress Test Runner를 설치하고 로컬에서 테스트를 작성합니다. CI 테스트를 구축 및 결과를 기록합니다. Cypress는 테스트가 실행될 때 스냅샷을 만듭니다. 각 단계에서 정확히 어떤 일이 발생했는지 확인할 수..

버즈 프로를 맥북 m1에 연결하면, 이어폰 한쪽에서만 소리가 들리는 문제가 있어 해결방법을 알아보겠습니다. 해결방법 1. 시스템환경설정 들어가기 command + space 2. 사운드 들어가기 3. 출력 클릭 4. 출력에서 해당 기기를 선택하세요. (버즈 프로나 에어팟 등) 선택한 기기에 대한 설정에서 균형에서 한쪽으로 치우쳐져 있는 것을 가운데로 조정합니다. 잘 해결되셨으면 좋겠습니다

Vue.js란? 웹 페이지 화면(UI)을 개발하기 위한 프런트엔드 프레임워크입니다. MVVM 패턴을 따르며, 애플리케이션 로직과 UI를 분리하기 위해 설계되었습니다. MVVM 패턴이란? Vue.js는 MVVM 패턴의 ViewModel 계층에 중점을 둡니다. 양방향 데이터 바인딩을 통해 View와 Model을 연결합니다. MVVM 패턴의 ViewModel 레이어에 해당하는 View 단 라이브러리 View가 특정 모델에 종속되지 않도록 모델(로직)을 분리한 패턴입니다. 간단히 View와 Movel, ViewModel을 분리하여 독립적인 개발을 할 수 있도록 하여, 테스트, 유지 보수, 재사용성을 높인 패턴입니다. 구성요소 뷰(View) : 보여지는 부분, UI를 다루는 역할을 하며, 비즈니스 로직이 아닌 ..