JAVASCRIPT this 바인딩 객체지향 프로그래밍 언어들은 this라는 키워드를 사용한다. 이 때 this는 해당 코드를 실행하는 클래스의 인스턴스를 나타낸다. JavaScript에도 this라는 키워드가 있는데 JS에서 사용되는 this 는 기존 객체지향 프로그래밍 언어에서의 this와는 다른점이 있기 때문에 객체지향 프로그래밍 언어에 익숙한 사람들은 이해하지 못하는 경우가 있다. function foo() { const a = 10 console.log(this.a) } foo() // ??? JS를 처음 접할 때 해당 코드에서 출력값은 10일 것이라 기대한다. 하지만 실제로는 10이라는 값이 출력되지는 않는다. JS에서 this가 참조하는 것은 함수가 호출되는 방식에 따라 결정되는데 이것을 t..
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) 패턴을 ..
Object-Oriented-Programming 1. 절차지향 vs 객체지향 🔎 절차지향 프로그래밍 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법. 순차적인 처리가 중요시 되며 컴퓨터의 처리 방식과 유사하기 때문에 시간적으로 유리하다. 하지만 유지보수와 디버깅이 어렵다는 단점이 있다. . 🔎 객체지향 프로그래밍 프로그램을 객체 단위로 나누고 이들의 상호작용으로 구현하는 방식. 실제 세계를 모델링 하여 데이터와 절차를 하나의 덩어리(객체)로 묶어서 관리. . 2. 객체지향 프로그래밍 특성 🔎 캡슐화 비슷한 역할을 하는 속성(필드)와 행위(메소드)들을 하나로 묶고 접근 지정자(public, private, protected)를 통해 제어하는 방식. 외부에서 보여질 필요가 없는 데이터를 숨길 ..
JAVASCRIPT Map 객체 기존 객체와는 다르게 메소드만을 이용하여 값을 넣고 뺄 수 있다. 객체(Object)와 다르게 문자열이 아닌 값도 키로 사용 가능하며 추가된 순서대로 반복이 가능하다. const testMap = new Map([ [1, '숫자'], ['1', '문자'], [true, 'boolean'] ]) console.log(testMap.get(1))// '숫자' console.log(testMap.get('1'))// '문자' console.log(testMap.get(true))// 'boolean' for (const [key, value] of testMap) { console.log(key + " : " + value) } // 1 : 숫자 // 1 : 문자 // true..
JAVASCRIPT 얕은복사와 깊은복사 🔎 기본 데이터 타입 javascript의 데이터형은 기본 데이터 타입과 참조형 데이터 타입으로 구분된다. 기본 데이터 타입은 아래와 같이 데이터를 복사하게 된다. const a = 1 const b = a b = 2 console.log(a) // 1 console.log(b) // 2 const c = 1 const d = c c = 2 console.log(c) // 2 console.log(d) // 1 🔎 얕은 복사 참조형 데이터 타입 (Array, Object)의 경우 기본형과 동일하게 데이터를 복사하게 되면 얕은 복사(참조 주소 공유)가 되어 다음과 같이 동작한다. const arr1 = ['a', 'b', 'c', 'd'] const arr2 = ar..
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 키워드와 혼동...
