덕짱 블로그 덕짱 블로그

튜닝의 끝은 순정이다. 요즘에는 오직 자바스크립트로만 쇼핑몰을 만들어 보고있다. 최신 유행하는 여러가지 라이브러리와 프레임워크가 많지만 그것들도 언젠가는 사라질 것이다. 최신 유행하는 기술들을 따라가다보니 이것저것 익히고 아는것도 많아진것 같지만 사실 실력은 제자리걸음인 것 같다는 생각이 들었다. 그래서 자바스크립트를 깊게 이해하고 실력을 키우는 편이 좋겠다고 생각했다. 리액트, nextJS 등 최신 프레임워크 라이브러리로만 사용해서 개발하다가 자바스크립트로만 만들려고 하니 여러가지로 불편하고 부딪히는 부분이 많았다. 하지만 유튜브, 기타 강의와 책을 보면서 하나하나씩 해결해 나가다보니 정말 많은것들을 배우고 성장할 수 있었다. 특히 가장 크게 배운것은 전체적인 프론트엔드 개발시장의 패러다임이 어떻게 흘..

어떠한 문자열이 주어졌을때 문자열중에서 대문자를 찾는 방법 두가지를 정리하려 한다. 1. toUpperCase() 사용 letter1 = 'S' letter2 = 's' const isUpperCase = (letter) => { if(letter===letter.toUpperCase()) return true else return false } console.log(isUpperCase(letter1)) // true console.log(isUpperCase(letter2)) // false toUpperCase() = 문자를 대문자로 바꿔서 출력하는 함수 대문자인지 알고싶은 문자를 toUpperCase()로 변환 한 뒤에 원래 문자와 비교하면 대문자인지 아닌지 알수있다. 2. CharCodeAt()..

함수를 생성하고 호출할때 (...) 안에 들어가는 매개변수(parameter)와 인자(argument)가 헷갈릴 수 있습니다. 간단하게 말하면 매개변수(parameter)는 함수가 생성할때 (...)안에 들어가는 것을 말하고, 인자(argument)는 함수를 호출할때 (...)안에 들어가는 것을 말합니다. 매개변수 함수의 매개변수(parameter)는 함수에서 정의된 변수입니다. 매개변수는 인수를 함수내부로 가져오는 데 사용됩니다. 함수 인수(argumnet)는 함수에 전달되는 실제 값입니다. 함수가 호출될때 매개 변수는 제공된 인수 값으로 초기화됩니다. 예제) let add = function (num1, num2){ //

함수 선언문은 호이스팅되고, 함수 표현식은 호이스팅 되지 않는 진짜 이유를 알기 위해서는 렉시컬 환경에 대해 먼저 알아야 합니다. 렉시컬환경 자바스크립트에선 실행 중인 함수, 코드 블록 {...}, 스크립트 전체는 렉시컬 환경(Lexical Environment) 이라 불리는 내부 숨김 연관 객체(internal hidden associated object)를 갖습니다. 렉시컬 환경 객체는 두 부분으로 구성됩니다. 환경 레코드(Environment Record) – 모든 지역 변수를 프로퍼티로 저장하고 있는 객체입니다. this 값과 같은 기타 정보도 여기에 저장됩니다. 외부 렉시컬 환경(Outer Lexical Environment) 에 대한 참조 – 외부 코드와 연관됨 ’변수’는 특수 내부 객체인 환..

프로토타입 체인(prototype chain) 자바스크립트는 프로토타입 기반 언어로써 특정 객체의 프로퍼티나 메서드에 접근시 객체 자신의 것뿐 아니라 __proto__가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근할 수 있다. 즉, 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메서드를 차례로 검색하는 것이 바로 프로토타입 체인이다. prototype 프로퍼티 함수 객체만 가지고 있는 프로퍼티이다. 함수 객체가 생성자로 사용될 때, 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(Prototype 객체)를 가리킨다. 즉, P..

프로토타입(prototype) 프로토타입이란 원형 객체를 의미합니다. 부모 생성자 함수에는 자동으로 prototype이라는 공간이 생깁니다. 이를 유전자라고 생각하면 이해하기 쉽습니다. 프로토타입 객체도 또 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있습니다. 그럼 예제를 살펴보겠습니다. class Person { constructor(name,age){ this.name = name; this.age = age; } } let kim = new Person('coding', 30) Person.prototype.height = 173; kim.height // 173 위처럼 Person이라는 클래스를 만들고, kim 이라는 새로운 객체(인스턴스)를 생성했습니다. 그리고 Person의 pr..

객체지향 프로그래밍이란? 객체지향프로그래밍은(Object Oriented Programming) : 프로그램 설계 철학 중 하나입니다. OOP의 모든 것은 “객체"로 그룹화됩니다. OOP의 4가지 주요 개념을 통해 재사용성을 얻을 수 있습니다.(유지보수) 객체지향 프로그래밍의 특징 4가지 캡슐화 캡슐화는 외부에서 데이터(속성), 기능(메서드)를 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것을 말합니다. 느슨한 결합은 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미합니다. 데이터와 기능을 하나의 단위로 묶는 것입니다. 은닉(hiding): 구현은 숨기고, 동작은 노출시킵니다. 느슨한 결합(Loose Coupli..

ES6 class 문법 비슷한 객체를 많이 만들일이 있다면 ES6 class 문법을 사용하면 쉽게 여러 객체(인스턴스)를 만들 수 있습니다. instance : constructor로 만들어진 object (생성자 함수, class문법을 사용해 만들어진 객체) 그 전에 기존 생성자 함수를 살펴보겠습니다. 생성자 함수는 기존의 생성자 함수는 일반 함수와 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 ‘new’ 연산자를 붙혀 실행합니다. 예시 : function User(name) { this.name = name; this.isAdmin = false; } let user = new User("보라"); alert(user.na..