Front-End/자바스크립트 (JavaScript)11 최적화(Optimization)와 Lighthouse 최적화(Optimization)란? 우리는 어떠한 일을 할 때 "효율적"으로 하길 원한다. 같은 노력을 들여도 덜 힘들고 더 좋은 결과를 얻길 바라는 모습은 어찌보면 당연한 것이 아닐까 싶다. 이러한 특징이 유독 눈에 띄는 것이 한국인이지만, 세계 어디에서도 효율적인 일처리 방식을 싫어하는 사람은 없다고 생각한다. 최적화(Optimization)란, 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다. 수익과 관련되는 분야에서는 이익을 최대로 내는 과정을 의미할 수 있고, 수학과 관련되서는 특정의 집합 위에서 정의된 실수값, 함수, 정수에 대해 그 값이 최대나 최소가 되는 상태를 해석하는 방법이 될 수 있다. 이렇듯 "최적화"라는 개념은 다양한 분야와 때에 따라 다르게 .. 2022. 12. 5. [자바스크립트] 프로토타입 (Prototype) 웹 개발의 표준 문서와 다름이 없는 MDN에서 배열이나 객체 등의 내장 메서드를 검색하다 보면 항상 나오는 단어가 있다. 배열 또는 객체의 내장 메서드를 검색했을 때 항상 .prototype이 나온다. 무엇을 의미하는 걸까? 프로토타입(Prototype)이란? 자바스크립트에서 프로토타입은 객체의 원형 객체를 의미한다. 더 자세한 설명을 위해 이전 포스팅을 떠올려보자. 앞서 배웠듯 자바스크립트에서는 클래스라는 틀을 통해 인스턴스 객체를 생성할 수 있고, 또한 생성했던 클래스를 상속해 새로운 자식 클래스를 생성해 부모의 속성과 기능을 활용하고 추가할 수 있다. 그런데 우리가 인스턴스 객체를 생성하기도 전에 자바스크립트에서는 이미 부모 클래스를 상속하고 활용하고 있다. 대표적으로 우리가 사용하고 있던 문자열S.. 2022. 9. 26. [자바스크립트] 객체 지향 프로그래밍(OOP): 클래스와 인스턴스 개발을 하다보니 개인 프로젝트임에도 규모가 점점 커져가는 것이 느껴진다. 자연스럽게 '팀 프로젝트는 함께 작업하는 파일과 폴더가 얼마나 많을까'라는 의문과 함께 한 가지 생각이 들었다. "어떻게 해야 같은 개발자가 봤을 때 이해하기 쉽고 효율적이면서 합리적인 구조를 갖춘 코드를 구성할 수 있을까?" 아마 다양한 프로그래밍 지식을 활용할 줄 알아야 할 것이다. 그리고 질문에 대한 해답을 구하고자 할 때, 흔히 볼 수 있는 단어가 있다. 바로 객체 지향 프로그래밍Object Oriented Programming이다. 객체 지향 프로그래밍(OOP)이란? 객체 지향 프로그래밍이란 컴퓨터 프로그래밍 패러다임의 하나로 소프트웨어 디자인에 있어 컴퓨터 프로그램을 "객체Object"들의 모임으로 파악하고자 하는 것이다.. 2022. 9. 21. [자바스크립트] 스코프 (Scope) 처음 자바스크립트를 공부했을 때 변수의 선언과 할당을 배우면서 한 가지 의문점이 생겼다. 'let, const, var 같은 게 다양하게 나오는데 왜 let만 쓰지? 각각 의미가 다른가?' 해당 의문점을 해결하기 위해 스코프의 개념과 더불어 자료형의 종류에 대해서도 알아보자. 스코프(Scope)란? MDN에선 스코프를 "현재 실행되는 컨텍스트로, 값과 표현식이 "표현"(visible)되거나 참조될 수 있다"라고 정의한다. 언뜻 듣기에는 이해하기 어려울 수 있지만, 실로 적절한 설명이라고 생각한다. 좀 더 추상적으로 다가가 보자면, 스코프는 마치 우리가 확대경scope를 통해 세상의 일정 부분만 "보이는" 것 처럼 제한된 영역을 말한다. 컴퓨터 시스템에서 "제한된 영역"이란 우리가 선언하고 할당하는 변수.. 2022. 9. 14. [자바스크립트] 원시(Primitive) 자료형과 참조(Reference) 자료형 배열과 객체 포스팅에서 객체에 대해 정의할 때 "원시 자료형을 제외한 자바스크립트 대부분의 것들"이라는 언급을 했다. 그렇다면 원시 자료형에는 어떤 것들이 있을까? 또 원시 자료형이 아닌 것들은 무엇이라고 부를까? 한 번 알아보도록 하자. 원시 자료형(Primitive data type)과 참조 자료형(Reference data type) 먼저 자료형은 크게 두 가지 종류로 분류가 된다. 1. 원시 자료형 Primitive Data Type 처음 변수의 선언과 할당에서 배웠던 대부분의 자료형들이 원시 자료형에 포함된다. number, string, undefined, boolean 이외에도 null, symbol(익명의 객체 속성을 만들 수 있는 데이터 형식), bigInt(number로 표현하기에 너무.. 2022. 9. 13. [자바스크립트] 배열(Array)과 객체(Object) 자바스크립트 변수와 자료형에 대해 공부하고, 개발자로서 "효율"을 따지다보면 누구나 드는 생각이 하나 있을 것이다. 그냥 이거 다 변수 하나에 때려 넣으면 안되나? 개발자로서 매우 위험한 발상이지만, 근본적으로 떠오르는 해결책이긴 하다. 매번 비슷한데 내용만 조금씩 다르다고 별개의 변수를 선언하고 재할당하는 일은 꽤 비효율적이라는 느낌을 받는다. 또한 프로젝트의 규모가 커지면 커질수록 변수가 늘어나고 다양해질텐데, 여러 명이서 같이 하는 작업에서 모든 변수의 이름과 값을 기억하기란 쉽지 않아 걱정도 된다. 이럴 땐 어떻게 해야할까? 답은 배열과 객체에 있다. 배열(Array)이란? 배열은 "순서(index)가 있는 값(value)"으로, 기존에 있었던 자료형을 하나의 변수에 저장하고 조회할 수 있도록 만.. 2022. 9. 13. 이전 1 2 다음
