post-thumbnail

[TIL] 자바스크립트 싱글톤 패턴

디자인패턴이 공부해 보고싶어서 추천받은 patterns 사이트에서 공부하며 정리해보려 한다. 싱글톤 패턴 > __싱글톤은 1회에 한하여 인스턴스화가 가능하며 전역에서 접근 가능한 클래스를 지칭한다. 만들어진 싱글톤 인스턴스는 앱 전역에서 공유되기 때문에 앱의 전역 상태

2023년 6월 7일
·
0개의 댓글
·
post-thumbnail

오버로딩 오버라이딩?

면접에서 객체지향언어에서의 다형성에대해 코드를 짜보라는 질문을 받았다.분명 오버로딩 오버라이딩 관련한 얘기인데 한동안 자바스크립트로 함수형 코딩만 하다보니 객체 작성방법도 잘 기억이 안나고 내 기억엔 오버로딩은 지원하지 않아서 결국엔 오버라이딩만 typeScript i

2023년 6월 6일
·
0개의 댓글
·
post-thumbnail

나 yarn 왜쓰지?

프론트엔드 처음 시작했을 때는 근본부터 해보자 해서 npm을 사용하다 최근에 프로젝트 하면서 yarn을 쓰게 되면서 계속 yarn을 사용하고 있다. 근데 사실 왜 쓰는지는 정확히 몰랐어서 정리해 보려 한다. npm > 노드 패키지 매니저(Node Package Ma

2023년 6월 3일
·
0개의 댓글
·
post-thumbnail

JS Study 6주차 ( 배열 )

배열은 여러개의 값을 순차적으로 나열한 자료구조이다.이걸 배열 리터럴을 통해 생성한 배열이라 부르고 각 값을 요소라고 부른다.또한 요소는 자신의 위치를 나타내는 0이상의 정수인 인덱스를 갖는다.배열이라는 타입은 존재하지 않고 객체타입이다.배열은 배열 리터럴, Array

2023년 5월 22일
·
0개의 댓글
·
post-thumbnail

자바스크립트 객체는 다른가?

자바스크립트의 객체 자바스크립트는 동적 타이핑 언어이다. 또한 자바스크립트는 원시값을 제외하면 모두 객체이다. 이 자바스크립트 객체의 프로퍼티 또한 동적으로 정해진다. 이렇게 되면 안좋은 점은 프로퍼티가 동적으로 계속 바뀌고 추가될 수 있기 때문에 이 프로퍼티의

2023년 5월 21일
·
0개의 댓글
·

자바스크립트 자료구조

자바스크립트 배열로 모든 자료구조를 구현해서 사용할 수 있지만 이건 진정한 자료구조가 아니기 때문에 직접 노드를 만들어서 자료구조들을 구현해 봤다.스택은 LIFO이기 때문에 가장 위에있는 top만 알고있으면 된다.또한 노드는 데이터와 다음 노드의 정보만 알면 되기 때문

2023년 5월 21일
·
0개의 댓글
·

자바스크립트 동작원리

그래도 프론트엔드 공부한다는 사람인데 자바스크립트 동작원리를 제대로 모르고 있다고 생각이 들어서 한번 공부해봤다. 자바스크립트 동작원리 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다 대표적인 엔진으로는 google에서만든 V8엔진이다. 📌 엔진은

2023년 5월 19일
·
0개의 댓글
·
post-thumbnail

JS Study 6주차 ( ES6 함수의 추가기능 )

ES6 이전의 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다.일반적인 함수, new 연산자와 함꼐 호출하여 생성자 함수, 객체에 바인딩 되어 메서드 등으로 다양한 방식이 가능하기 때문에 편리하긴 하지만 실수를 유발시킬 수있고. 성능면으로도 좋지 않

2023년 5월 19일
·
0개의 댓글
·
post-thumbnail

JS Study 5주차 ( 클래스 )

클래스 > 자바스크립트는 프로토타입 기반 객체지향 언어다. 자바스크립트는 클래스 문법 없이도 객체지향 프로그래밍을 할 수 있다. ES6 부터 나머지 객체지향 언어들처럼 객체지향 프로그래밍을 할 수 있도록 class 문법을 지원한다. 자바스크립트에서의 class는 함

2023년 5월 15일
·
0개의 댓글
·
post-thumbnail

JS Study 5주차 ( 클로저 )

클로저 > 클로저는 자바스크립트 고유의 개념이 아닌 함수를 일급 객채로 취급하는 함수형 프로그래밍 언어에서 사용되는 특성이다. "클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다" - MDN 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라

2023년 5월 15일
·
0개의 댓글
·
post-thumbnail

React + TypeScipt + Vite PWA로 만들고 Vercel로 배포하기

프로젝트에서 앱을 만들어야 하는데 RN으로 개발하다가 이건 아니다 싶어서 찾아보다가 PWA를 선정하게 되었다. PWA란? > PWA는 'Progressive Web Apps'의 줄인 말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다. 웹과

2023년 5월 6일
·
0개의 댓글
·
post-thumbnail

JS Study 4주차 ( this )

this > this는 자식이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. ex

2023년 5월 6일
·
0개의 댓글
·
post-thumbnail

JS Study 4주차 ( 빌트인 객체 )

빌트인 객체 > 자바스크립트 객체는 3개의 객체로 분류된다 표준 빌트인 객체: ECMAScript 사양에 정의된 객체 호스트 객체: 실행환경에서 추가로 제공하는 객체 사용자 정의 객체: 사용자가 직접 정의한 객체 표준 빌트인 객체 자바스크립트는 Ojbect, Str

2023년 5월 5일
·
0개의 댓글
·
post-thumbnail

JS Study 3주차 ( strict mode )

strict는 엄격한이라는 뜻이다.strict mode는 자바스크립트 언어의 문법을 엄격하게 적용하여 에러를 발생시키는 것이다.위 코드의 결과는 x가 정의되지 않았기 때문에 오류가 나야하지만 10이 나온다.그 이유는 foo를 호출하면 x를 검색한다.foo 함수내부에는

2023년 5월 1일
·
0개의 댓글
·
post-thumbnail

JS Study 3주차 ( 프로토타입 3 )

프로토타입도 객체이기 떄문에 그냥 객체로 바꿀 수가 있다.위 그림은 이 코드의 결과이고 Person의 프로토타입을 바꾸는 방법은이렇게 코드를 짜서 me에 Person객체를 할당하면 Person.prototype는 constructor는 없고 sayHello만 있는 객체

2023년 5월 1일
·
0개의 댓글
·
post-thumbnail

JS Study 3주차 ( 프로토타입 2 )

그림을 보고 이 코드를 생각 했으면 프로토타입을 더 안봐도 된다.과정을 설명해 보기 전에 알아둬야 할것은📌 우선 프로토타입은 생성자 함수가 생성되는 동시에 생성된다.📌 \_\_proto\_\_는 객체가 프로토타입에 접근할때 사용하는 것이고, prototype은 생

2023년 4월 30일
·
0개의 댓글
·
post-thumbnail

JS Study 3주차 ( 프로토타입 1 )

자바스크립트는 명령형, 함수형, 프로토타입기반, 객체지향 프로그래밍을 지향하는 멀티 패러다임 프로그래밍( 좋아보이는건 다 가져다가 만든 ) 언어이다.자바스크립트를 이루고 있는 거의 모든것이 객체이다 (원시 타입의 값을 제외하고 나머지)속성을 통해 여러개의 값을 하나의

2023년 4월 30일
·
0개의 댓글
·
post-thumbnail

css 디자인 패턴 뭐쓰지?

세상에는 css 디자인패턴들이 너무 많다.BEM, SMACSS, OOCSS 등등... 솔직히 뭐가 뭔지 정확히 모르겠고 css in js를 경험한 이후로는 그냥 css는 쳐다도 본적 없기 때문에 공부헤서 사용할 생각도 없다.우선 내가 사용해 봤던 방식은 css in j

2023년 4월 26일
·
0개의 댓글
·
post-thumbnail

JS Study 2주차 ( 실행 컨텍스트 )

ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다.전역 코드: 전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등의 내부코드는 포함되지 않음.함수 코드: 함수 내부에 존재하는 소스코드, 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않

2023년 4월 1일
·
0개의 댓글
·
post-thumbnail

React Portals

public/index.htmlindex.html을 보면 root라는 id를 가진 div 태그가 있다.이 div태그는 root DOM을 생성하고, src 폴더 내부의 react 코드를 추가해서 DOM Tree를 만든다.src/index.jssrc/index.js 파일에

2023년 3월 22일
·
0개의 댓글
·