https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Publish 1. Publish Platform 웹 애플리케이션 배포 플랫폼에는 여러 종류가 있다. Microsoft Azure, Gitbub Pages, Vercel, AWS, Netlify, Heroku 등 여러 플랫폼이 존재하며 Google 검색 시 배포 방법을 확인 할 수 있다. 여기서는 Netlify 를 통한 배포 방법에 대해 설명하고 추가로 이전에 AWS를 사용하여 PHP 웹 애플리케이션을 배포했던 예제 링크를 참조하였다. . 🔎 Netlify 1. netlify 회원가입 netlify 홈페이지에서 회원가입을 진행한다. Develop and deploy websites a..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Testing 2. CI / CD 🔎 CI (Continuous Integration) CI란 빌드/테스트 자동화 과정으로 지속적인 통합(Continuous Integration)을 의미한다. CI를 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공유 리포지토리에 통합되어 여러 개발자가 동시에 작업할 경우 발생할 수 있는 충돌 문제를 해결할 수 있다. CI의 실행은 소스/버전 관리 시스템에 대한 변경 사항을 정기적으로 커밋하여 모든 사람에게 동일 작업 기반을 제공하는 것으로 시작한다. 커밋할 때마다 빌드와 일련의 자동 테스트가 이루어져 동작을..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Testing 1. Good Test Principles 🔎 소프트웨어 테스팅 7가지 원칙 1. 테스트는 결함이 존재함을 밝히는 활동이다. 소프트웨어에 대해 테스트 완료 및 발견된 이슈를 모두 해결하여도 결함이 없다는 것을 증명할 수 있는 것은 아니며, 이슈가 발견되지 않았다고 해서 결함이 없다는 것이 증명되지 않는다. 테스트는 프로그램의 결함이 없음을 보장하는 것이 아니라, 결함이 존재함을 밝히기 위한 활동이다. 2. 완벽한 테스팅은 불가능하다. 매우 단순한 소프트웨어가 아닌 이상 내부조건, 입력값, 타이밍에 대한 모든 조합을 확인할 수 없다. 따라서 테스트 대상의 리스크 분석 후에..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Tools 2. Package Manager 🔎 npm & yarn npm과 yarn은 Node.js 의 패키지 관리자로 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리면 npm, yarn 과 같은 패키지 관리자를 통해 설치 및 삭제가 가능하다. 그리고 명령 줄 인터페이스(CLI)를 통해 패키지 설치 및 삭제뿐 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있다. npm npm 은 Node Package Manager의 줄임말로 노드를 설치할 떄 자동으로 설치되는 기본 패키지 관리자. 사람들이 노드 패키지를 만들고, 업로드하고, 공..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Tools 2. Module Bundler 🔎 Module 애플리케이션의 크기가 커지면 개발하는 과정에서 파일을 여러개로 분리하게 되는데 여기서 분리된 각각의 파일을 모듈(module) 이라 한다. 모듈화의 필요성 기능의 분리가 가능하고 인터페이스가 단순해진다. 하나의 파일에 많은 기능들을 작성하면 코드 파악이 힘들고 관리가 어려워진다. 따라서 기능별로 파일을 분리하여 관리할 필요성이 있다. 각 모듈은 자신만의 스코프를 보장해준다. 하나의 파일에서 모든 코드를 관리하면 변수나 함수명이 중복되거나 다른 기능의 코드끼리 서로 영향을 끼칠 수 있다. 이러한 문제를 해결하기 위해 기능별로 여..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Tools 1. Version Control System 🔎 Git Git은 소프트웨어를 개발하는 기업의 핵심 자산인 소스코드를 효과적으로 관리할 수 있게 해주는 무료, 공개 소프트웨어 https://phoenixnap.com/kb/how-git-works 장점 소스코드를 주고 받을 필요 없이, 같은 파일을 여러 명이 동시에 작업하는 병렬 개발이 가능하다. 즉 브랜치를 통해 개발한 뒤, 본 프로그램에 합치는 방식(Merge)으로 개발을 진행할 수 있다. 분산 버전관리이기 때문에 인터넷이 연결되지 않은 곳에서도 개발을 진행할 수 있으며, 중앙 저장소가 날아가버려도 다시 원상복구할 수 있..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 심화 4. Server Side Rendering (SSR) SSR은 서버측에서 렌더링 하는 방식을 말하며 사용자가 웹 어플리케이션에 접근 시 서버에 페이지에 대한 요청을 하고 서버에서는 HTML, JS 와 같은 리소스들을 렌더링하여 반환한다. 장점 SEO(검색엔진 최적화)에 유리하다. 요청한 페이지의 html을 다운로드 하기 때문에 CSR에 배해 초기 로딩이 빠르다. 각각 페이지에 대한 정보를 입력하기 쉽다. 단점 매번 새로운 html을 받아오기 때문에 사용자 경험이 좋지 않다. (화면 깜빡임) Header, Footer 같은 중복된 내용도 매번 렌더링 하여 다운..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 심화 3. Static Site Generators (SSG) 🔎 Single Page Application (SPA) SPA는 단일 웹페이지로 구성된 웹 어플리케이션을 말한다. 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드 하고, 이후 새로운 페이지 요청이 있을 때 갱신에 필요한 데이터만 전달받아 페이지를 재구성한다. 클라이언트 관점에서 최초 페이지를 로딩한 이후 리로딩 없이 필요한 부분만 서버로 받아 화면을 갱신하기 때문에 자연스러운 페이지 이동(새로고침 시 화면 깜빡임 X)과 사용자 경험을 제공할 수 있다. . 🔎 Multi Page App..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 심화 2. JavaScript Framework https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/ Front-end Framework들의 사용률에 대한 순위를 나타낸 그래프를 보면 React, Angular, Vue, Svelte 순으로 인기가 있는것으로 보이는데 어떤 특징들이 있고 어떤 장단점이 있는지 차례로 알아보자. . 🔎 React 페이스북에서 만든 라이브러리. 프레임워크인지 라이브러리인지 갑론을박이 있었지만, 최근에는 라이브러리라는 것으로 의견이 모여지고 있으며 공식문서에서도 라이브러리라고 ..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 심화 1. TypeScript 🔎 What is TypeScript? JavaScript의 단점을 보완하기 위해 MS에 의해 개발/관리 되고 있는 JS 기반으로 만들어진 정적 타입 언어. 런타임에서야 타입이 결정되는 JS는 런타임에서야 예상치 못한 에러를 발견할 수 있고 타입에 대한 안정성이 보장되지 않기 때문에 프로젝트가 커질수록 디버깅이 어려운 단점이 있다. TS는 이러한 JS의 단점을 보완하여 코드 작성단계부터 타입을 체크하고 오류를 확인할 수 있다. 또한 ES6+ 문법을 포함하고 있어 클래스, 인터페이스, 상속 등과 같은 객체지향 프로그래밍(OOP) 패턴을 ..
