mason_lab

블로그좀 제대로 해보자😫

Tech/Frontend

웹 페이지에서 동일한 마크업 구조를 반복적으로 사용해야 하는 경우, 동일한 구조를 반복해서 코딩하는 것보다 일종의 템플릿을 사용하면 반복 작업을 줄일 수 있습니다. 요즘은 React, Vuejs의 컴포넌트를 사용하여 재사용성을 높이고 기능의 캡슐화까지 이루었습니다. 그에 맞춰 웹의 표준을 관리하는 MDN에서는 웹 컴포넌트라는 아키텍처를 고안하여 여러 가지 기술을 적용했습니다. Template과 Slot 은 그중에 하나입니다. 오래전부터 template 태그가 존재했습니다. template 태그를 어떻게 사용했을까요 ? {title} {body} 내용이 없습니다. footer 기본적으로 Template 태그는 화면에 표시되지 않는 속성을 가지고 있지만 자바스크립트에서 참조할 수 있어 템플릿의 내용을 복제하..

2023. 5. 23.

Tech/Frontend

💡 21년도 Vuejs 2버전을 사내 개발팀에 교육하고자 작성했던 문서입니다. 참고 해주세요! MDN Web docs 를 얼마나 많이 접하시나요 ? 요즘은 모든 프론트엔드 프레임워크나 라이브리에서도 컴포넌트 기반 아키텍쳐를 구현하여 복잡한 화면의 기능을 간단한 부분으로 나누고 조립하는 과정을 통해 화면을 구현하고 있습니다. 대표적으로 Vuejs, React 등이 있는데요. 이런 프레임워크는 새로운 표준을 만들어 낸 것이 아닌 기존의 것은 그대로 놔두고 자바스크립트를 통해 컴포넌트를 구현했습니다. 우리가 프론트엔드 라이브러리나 프레임워크를 많이 접하면서도 웹 컴포넌트등의 표준 기술에 대해서는 잘 모르는것 같습니다. 웹 컴포넌트는 MDN WebDocs 에서 그 설명을 찾아 볼 수 있는데요. MDN Web D..

2023. 5. 22.

Tech/Frontend

Vuejs 는 패키지 자체에 정적 웹사이트를 위한 빌더가 내장되어있습니다. 뷰 프로젝트를 프로덕트용으로 빌드하면 절대경로를 가지는 static 파일을 생성 합니다 (상대경로도 설정 가능합니다) 이 static 파일은 html, css, js 파일로만 이루어져 있기 때문에 서버만 있다면 애플리케이션을 실행시킬 수 있습니다. 그래서 이번에는 AWS의 Simple Storage Service, 줄여서 S3라고도 하는 저장소에 뷰로 만든 결과물을 배포하고 접속 가능한 URL 을 생성해봅시다. Github와 Github Action, AWS S3 를 이용하기 떄문에 Github와 CI/CD 에 대한 개념은 미리 숙지하셔야 합니다. #1 AWS 환경변수 설정 Github 에서 AWS S3로 업로드를 하기 위해서는 ..

2023. 5. 4.