목록frontend roadmap study (7)

프론트엔드 개발자의 기록 공간

[FE_Roadmap] Web Components

Web Components웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다.웹 표준 기술로 모든 브라우저에서 동작하고 플랫폼 간 호환성을 높여줍니다. (미지원 브라우저 제외 및 구버전 브라우저에서는 polyfill을 사용하여 지원 가능)다양한 프레임워크나 라이브러리에서 Web Components를 사용할 수 있기 때문에, 기술 스택에 구애받지 않고 사용할 수 있습니다.특징Custom elementshtml tag 자체를 커스텀하게 만들고 browser 사용할 수 있도록 만들어 줍니다.customElements.define 메소드를 이용Shadow DOM다른 DOM과의 분리를 통해 DOM을 캡슐화합니..
개발지식 2024. 6. 2. 18:47
[FE_Roadmap] writing css & testing your apps

writing css Tailwind CSS란 무엇인가? Utility-First를 지향하는 CSS 프레임워크입니다. Utility-First: 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링 CSS의 각 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 사용할 수 있게 됩니다. 스타일링에 필요한 대부분의 속성들이 클래스 형태로 사전에 정의되어 있고 사용자는 클래스들을 조합해서 사용하면 됩니다. SSR에 대해 추가 설정이 필요하지 않습니다. Tailwind CSS의 장점 1. Utility-First의 편리함과 빠른 개발 Click me 스타일 코드도 HTML 코드 안에 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없습니다. 태그의 클래스명을 고민할 필요가 없습니다...
개발지식 2024. 3. 2. 00:52
[FE_Roadmap] Pick a Framework

웹 개발 프레임워크를 선택하기 위한 15가지 중요한 고려 사항 목적 및 사용 맥락 개발하는 웹 사이트 or 웹 애플리케이션의 목적에 따라 선택해야 합니다. 프로젝트의 목적과 선택한 프레임워크에 대한 이유에 대해서 스스로 묻고 대답해야 합니다. 라이선스 소프트웨어를 사용, 배포 및 수정할 수 있는 법적 계약이므로 중요합니다. 상용 목적으로 사용할 수 있는지, 등에 대한 조건이 있는지 확인해야 합니다. 다른 소프트웨어와 배포와 호환되는지 확인해야 합니다. 문서화 개발자가 프레임워크 기능을 이해하고, 문제를 해결하기 위해서는 공식 문서는 필수적입니다. 예제, 치침, 자습서, 샘플 코드 등을 제공하는 설명서를 찾아야합니다. 문서가 불분명하거나 오랜된 정보라면 프레임워크를 효율적으로 배우고 학습히기 어려울 뿐만 ..
개발지식 2024. 2. 18. 17:28
[FE_Roadmap] Module Bundlers

In this article Webpack ESBuild Vite webpack vs vite Module Bundlers JavaScript 모듈을 브라우저에서 실행할 수 있는 파일로 번들링 하는 데 사용되는 프론트엔드 개발 도구로 즉, 여러 개의 모듈 파일들을 하나의 파일로 번들링하는 도구입니다. 특징 모듈화된 코드를 하나의 파일로 번들링할 수 있습니다. 여러 개의 모듈 파일들을 하나의 파일로 번들링함으로써, 웹 페이지의 로딩 속도를 개선할 수 있습니다. 이는 HTTP 요청의 수를 줄이고, 브라우저가 파일을 다운로드하는 시간을 단축시킵니다. 다양한 모듈 시스템을 지원합니다. CommonJS, AMD, ES6 모듈 시스템 등 다양한 모듈 시스템을 지원합니다. 이는 다양한 프로젝트에 적용할 수 있으며, ..
개발지식 2024. 2. 13. 20:52
[FE_Roadmap] CSS Architecture&CSS Preprocessors

CSS Architecture CSS는 자유도가 높은만큼 까다롭고 어렵습니다. 이러한 특성 때문에 종종 기대했던 결과가 나오지 않는 경우가 많습니다. CSS를 계획적으로 구축되지 않았다면 프로젝트가 확장될 때 깨지거나 무너질 가능성이 매우 높습니다. 따라서 견고한 CSS 아키텍처의 기반은 프로젝트가 확장될 때 가장 중요한 요소가 됩니다. 대표적인 예 협업 시 사람마다 다른 코드 구조 및 정의 서로 다른 네이밍 규칙 CSS 우선순위 문제 복잡해지는 선택자 등 CSS Architecture 종류 OOCSS(객체 지향 CSS) BEM(블록 요소 수정자) SMACSS(Scalable and Modular Architecture for CSS) OOCSS (Object Oriented CSS) 객체 지향에 따라서..
개발지식 2023. 12. 17. 22:25
[FE_Roadmap] Package Managers

Package Managers 컴퓨터의 운영 체제를 위해 일정한 방식으로 컴퓨터 프로그램의 설치, 업그레이드, 구성, 제거 과정을 자동화하는 소프트웨어 도구들의 모임이다. npm npm(node package manager)은 자바스크립트 패키지 매니저입니다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공합니다. Node.js 생태계의 앱스토어나 플레이스토어 같은 역할을 합니다. npm 레지스트리에는 640,000개가 넘는 패키지가 포함되어 있으며, 패키지는 의존성(dependencies) 및 버전을 추적할 수 있도록 구성됩니다. package.json package.json은 프로젝트 정..
개발지식 2023. 12. 9. 23:42
Prev 1 2 Next