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 심화 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) 패턴을 ..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 심화 2. CSS Framework 🔎 Bootstrap SASS, LESS 를 모두 지원하며 Bootstrap5는 jquery를 완전히 제거하는 방향으로 최적화 되어있다. 빠른 프로토타이핑, 거대한 생태계, 컴포넌트의 다양성, 쉬운 문서와 낮은 러닝 커브 등의 장점이 있다. 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr See the Pen CSS bootstrap Exam by Byeongyeong Kim (@beark93) on Cod..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 심화 2. CSS 전처리기 CSS 전처리기란? CSS를 보다 쉽게 작성하고 CSS로는 구현 불가능한 변수 또는 함수를 사용할 수 있게 만들어진 새로운 형태의 CSS . CSS 전처리기의 장단점 장점 CSS 코드를 여러 파일로 나눠 유지보수성이 향상 중첩 선택자를 작성하기 쉬움 일관된 테마를 위한 변수사용. 여러 프로젝트에 걸쳐 테마 파일 공유 가능 반복되는 CSS를 위한 Mixins 생성 가능 단점 전처리기를 위한 도구가 필요, 다시 컴파일하는 시간이 걸림 Less에서는 변수 이름의 접두어가 @이기 때문에, @media, @import, 규칙과 같은 고유 CSS 키워드와 혼동...
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 심화 1. BEM BEM의 기본 구조 BEM은 Block, Element, Modifier를 뜻한다. 3가지 요소와 __ / -- 구분자를 사용하여 클레스 네임을 만들어서 css를 관리하는 방법론을 BEM 방법론이라고 한다. .block__element--modifier { color: red; } . Block / Element / Modifier Block 재사용 가능한 기능적으로 독립적인 페이지 컴포턴트. 즉, 어딘가에 종속되지 않고 어디서든 재사용할 수 있는 요소를 말한다. Element Block을 구성하는 단위. 자신이 속한 Block 내에서만 의미를 가진다. 재사용..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 2. Browser APIs browser API (or Web API)는 브라우저에게 기본으로 제공되는 API를 말한다. DOM 조작, 네트워크 통신을 요청, 클라이언트 측 저장소를 관리, 장치 미디어 스트림 검색 등을 위한 다양한 API가 있다. . DOM manipulation DOM이란 HTML 및 XML 문서를 위한 프로그래밍 인터페이스로 프로그램이 문서 구조, 스타일, 내용을 변경할 수 있도록 페이지를 나타내며 문서를 노드와 객체로 나타내 프로그래밍 언어가 페이지에 연결할 수 있도록 하는 인터페이스. /*==== Element 생성 ====*/ const..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 1. ES6+ Syntax 2015년 이후 ES6가 등장하며 큰 변화를 겪은 이후, ECMA가 발표하는 매년 새로운 자바스크립트 표준. (ES6 이후 발표된 ES 문법을 ES6+로 표기) . 용어 정리 Prototype 자바스크립트의 모든 객체는 Prototype 객체를 가지고 이 Prototype 으로부터 프로퍼티와 메소드를 상속 받는다. const obj = new Object(); // Object.prototype const arr = new Array(); // Array.prototype const date = new Date();// Date.proto..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 4. Animation 애니메이션 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 Sequence를 나타내는 키프레임(@keyframes)들로 이루어진다. @keyframes 키프레임 rule을 사용하면 애니메이션 Sequence 중의 여러 시점(breakpoint)에서 CSS 프로퍼값을 지정할 수 있다. See the Pen Untitled by Byeongyeong Kim (@beark93) on CodePen. animation-name 사용하고자 하는 keyframe..
