Project.log

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다 Introduction 이번 퀘스트에서는 2021년 현재 웹 프론트엔드의 많은 최신 기술 중 웹 어셈블리에 관해 알아보겠습니다. Checklist 웹 어셈블리란 어떤 기술인가요? 웹 어셈블리(WebAssembly)는 웹 브라우저에서 실행되는 이진 형식의 가상 머신입니다. 웹 어셈블리는 C, C++, Rust, Go 등의 언어로 작성된 코드를 웹 브라우저에서 실행할 수 있도록 하기 위해 개발되었습니다. 이는 기존의 JavaScript 엔진을 대체하는 것이 아니라, 보조적인 역할을 수행하여 더욱 빠르고 안전한 웹 애플리케이션을 만들 수 있도록 지원하는 기술입니다. 웹 어셈블리 모듈을 웹 프론트엔드 ..

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다. Introduction 이번 퀘스트에서는 2021년 현재 웹 프론트엔드의 많은 최신 기술 중 프로그레시브 웹앱에 관해 알아보겠습니다. Checklist 웹 어플리케이션을 프로그레시브 웹앱 형태로 만들면 어떤 이점을 가질까요? 프로그레시브 웹앱(PWA)은 모바일 앱과 웹 사이의 중간 형태로, 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 어플리케이션입니다. PWA로 웹 어플리케이션을 만드는 것은 다음과 같은 이점을 가질 수 있습니다: 오프라인 사용 가능성: PWA는 서비스 워커라는 기술을 사용하여 오프라인에서도 동작할 수 있습니다. 이것은 사용자가 인터넷 연결 없이도 앱을 사용할 수 있다는 것..

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다. Introduction 이번 퀘스트에서는 현대적 웹 클라이언트 개발에 핵심적인 번들러와 빌드 시스템의 구조와 사용 방법에 대해 알아보겠습니다. Checklist 여러 개로 나뉘어진 자바스크립트나 이미지, 컴포넌트 파일 등을 하나로 합치는 작업을 하는 것은 성능상에서 어떤 이점이 있을까요? 여러 개로 나뉘어진 자바스크립트, 이미지, 컴포넌트 파일 등을 하나로 합치는 것은 웹 애플리케이션의 성능 향상에 도움이 될 수 있습니다. 감소된 HTTP 요청 수: 파일을 하나로 합치면 브라우저가 서버에 보내는 HTTP 요청 수가 줄어듭니다. HTTP 요청은 웹 페이지 로딩 시간의 주요 원인 중 하나이므로 이..

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다. Introduction 이번 퀘스트에서는 Vue.js 프레임워크를 통해 컴포넌트 기반의 웹 클라이언트 개발 방법론을 더 자세히 알아보겠습니다. Checklist Vue.js는 어떤 특징을 가지고 있는 웹 프레임워크인가요? Vue.js는 가벼운 웹 프레임워크로, SPA(Single Page Application)를 개발하기 위해 설계되었습니다. Vue.js는 다음과 같은 특징을 가지고 있습니다. 리액트와 앵귤러에 비해 가볍습니다. MVVM(Model-View-ViewModel) 패턴을 기반으로 합니다. 가상 DOM(Virtual DOM) 기반의 빠른 렌더링 속도를 가지고 있습니다. 컴포넌트 기반..

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다. Introduction 이번 퀘스트에서는 자동화된 테스트에 어떤 장점이 있는지, 어떤 식으로 구축할 수 있는지에 대해 알아보겠습니다. Checklist 자동화된 테스트를 만드는 것에는 어떤 장점과 단점이 있을까요? 장점: 시간과 비용 절감: 자동화된 테스트는 사람이 수작업으로 수행하는 테스트보다 더 빠르고 정확하게 실행됩니다. 이는 시간과 비용을 절감할 수 있습니다. 일관성: 자동화된 테스트는 일관적인 방식으로 수행됩니다. 이는 사람이 수작업으로 테스트를 수행할 때 발생할 수 있는 실수와 오류를 최소화합니다. 더 넓은 범위의 테스트: 자동화된 테스트는 더 많은 테스트 케이스를 더 빠르게 실행할..

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다. Introduction 이번 퀘스트에서는 타입스크립트와 린트 시스템을 통해 코드에 대한 정적분석의 장점에 대해 알아보겠습니다. Checklist 코드를 린팅하는 것의 장점은 무엇일까요? 코드 린팅(linting)은 프로그래밍에서 코드의 구문(syntax)과 스타일(style)을 자동으로 검사하는 프로세스입니다. 코드 린팅을 하는 것은 다음과 같은 장점이 있습니다: 코드 품질 향상: 코드 린팅은 일관된 스타일을 유지하도록 도와주며, 잠재적인 오류를 사전에 발견하여 코드 품질을 향상시킵니다. 린팅 도구는 일관성 없는 들여쓰기, 잘못된 변수 사용, 불필요한 코드, 오타 등을 감지하여 수정하도록 유도..

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다. Introduction 이번 퀘스트에서는 차세대 웹 API의 대세로 각광받고 있는 GraphQL에 대해 알아보겠습니다. Checklist GraphQL API는 무엇인가요? REST의 어떤 단점을 보완해 주나요? GraphQL API는 데이터 쿼리 및 조작을 위한 새로운 방식을 제공하는 웹 API입니다. REST API와 마찬가지로 클라이언트와 서버 간의 통신을 위한 인터페이스를 제공하지만, GraphQL은 REST API와는 다른 방식으로 작동합니다. REST API는 URL 경로 및 HTTP 동사를 사용하여 리소스에 대한 요청을 전송하고, 서버는 JSON 또는 XML과 같은 형식으로 응답합..

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다. Introduction 이번 퀘스트에서는 가장 기초적인 웹 서비스 보안에 대해 알아보겠습니다. Checklist 입력 데이터의 Validation을 웹 프론트엔드에서 했더라도 서버에서 또 해야 할까요? 그 이유는 무엇일까요? 웹 프론트엔드에서 데이터의 유효성을 검증하는 것은 사용자 경험을 개선하고 잘못된 데이터를 서버로 보내지 않도록 하는 데 도움이 됩니다. 그러나 서버에서도 입력 데이터의 유효성을 검증해야하는 이유는 다음과 같습니다. 보안: 사용자는 웹 페이지를 조작하여 서버로 잘못된 데이터를 보낼 수 있습니다. 서버 측에서 데이터를 다시 한 번 확인하면 이러한 위협을 방지할 수 있습니다. ..