프론트엔드 첫걸음

1. 단일 인스턴스 패턴 (Singleton Pattern)설명: 애플리케이션에서 특정 객체가 단일 인스턴스만 존재하도록 보장하는 패턴입니다. 예를 들어, 데이터베이스 연결 객체, 웹소켓 연결 객체 등이 여기에 해당합니다.예시class Singleton { constructor() { if (!Singleton.instance) { Singleton.instance = this; } return Singleton.instance; } // Other methods here...}const instance = new Singleton();Object.freeze(instance); // 객체를 수정할 수 없게 만듦export default instance;활용: 데이터베이스 ..

모든 나라의 문자를 포함하는 정규식은 유니코드 문자클래스 L 을 통해 만들수있다. const wordRegex = /^[\p{L}]+$/u; function testRegex(regex, word) { if(regex.test(word)) { return `${regex} test ${word} => pass` } return `${regex} test ${word} => fail` } console.log(testRegex(wordRegex, 'project')) // pas console.log(testRegex(wordRegex, '不客气')) // pass console.log(testRegex(wordRegex, 'ただいま。')) //fail (。 이것이 문자가 아니므로 fail) console..

URLSearchParams 객체와 URL 객체는 JavaScript에서 URL과 관련된 작업을 수행하는 데 사용되는 두 가지 다른 객체입니다. 각각의 주요 목적과 차이점은 다음과 같습니다: URL 객체: URL 객체는 URL을 파싱하고, 생성하며, 조작하는 데 사용됩니다. URL의 다양한 구성 요소(프로토콜, 호스트, 경로 등)에 접근할 수 있습니다. 주로 웹 주소를 다룰 때 사용됩니다 const urlObject = new URL('https://example.com/path?param1=value1&param2=value2'); console.log(urlObject.protocol); // Output: "https:" console.log(urlObject.host); // Output: "ex..

body영역 마지막에 script를 넣을 시 "id"직접 불러와 이벤트를 적용할 수 있다. 나만 몰랐나?? See the Pen getElementById 생략 by JEONG (@cona) on CodePen. js코드를 head에서 부르면 window.onload = function() 를 사용해야한다. [출처] https://codejj.tistory.com/8

함수와 변수 x를 받아서 함수에 변수 x 를 넣은 값을 반환하는 함수 fnc1 가 있다고하자. const fnc1 = (paraFnc, x) => paraFnc(x); 이것을 화살표 함수 2 개를 쓴 함수로 바꿔서 사용할 수 있다. const fnc2 = (paraFnc) => x => paraFnc(x); 왜냐면 이 화살표 2개짜리 함수는 아래의 함수와 같기 때문이다. function fnc3 (paraFnc) { return function(x) { return paraFnc(x) } } //fnc3 함수는 paraFnc함수를 받아서, // x를 받아 paraFn(x)를 반환하는 익명함수를 반환한다. 테스트 결과는 다음과 같다. //파라미터로 들어갈 함수 const double = x => x * 2..

[출처] https://medium.com/free-code-camp/how-do-javascript-rest-parameters-actually-work-227726e16cc8 How JavaScript rest parameters actually work My last article covered spread syntax and Object.assign in detail, but glossed over rest parameters in the interest of time. I do, however… medium.com 내부동작을 살펴보면 이렇다. someFunction = (...args) => args; 위 someFunction 함수는 아래와 같다. (옛날 문법으로 풀어서 보기) someFunc..

https://medium.com/free-code-camp/pipe-and-compose-in-javascript-5b04004ac937 A quick introduction to pipe() and compose() in JavaScript Functional programming’s been quite the eye-opening journey for me. This post, and posts like it, are an attempt to share my insights and… medium.com arrow 함수와 rest parameter, reduce 함수를 이해한 상태이면 아래와 같은 compose 함수를 이해할 수 있다. // 함수들과 x를 받아서 차례로 함수들에 결과를 대입하게 하는 ..

const docFragment = document.createDocumentFragment(); 비어있는 documentFragment 객체를 만드는 함수 const docFragment = document.createDocumentFragment(); for(let i = 0; this.#slideNumber; i++) { const li = document.createElement('li'); li.dataset.index = i; docFragment.appendChild(li); } this.wrapperEl.querySelector('ul').appendChild(docFragment); 비어있는 객체에 li를 넣은뒤에 빈객체에 차례로 넣고, documentFragment객체를 ul안에 넣어서..

css : filter invert - 색상반전 hue-rotate - 색상환 자바스크립트 클래스 private 속성 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields [Private class features - JavaScript | MDN Class fields are public by default, but private class members can be created by using a hash # prefix. The privacy encapsulation of these class features is enforced by JavaScript itself. develop..

[원본 강의] https://youtu.be/337HnOk13zc [참고] https://blogpack.tistory.com/706 clientHeight 는 요소의 내부 높이입니다. 패딩 값은 포함되며, 스크롤바, 테두리, 마진은 제외됩니다. offsetHeight 는 요소의 높이입니다. 패딩, 스크롤 바, 테두리(Border)가 포함됩니다. 마진은 제외됩니다. scrollHeight 는 요소에 들어있는 컨텐츠의 전체 높이입니다. 패딩과 테두리가 포함됩니다. 마진은 제외됩니다. https://deeplify.dev/front-end/markup/position-sticky sitcky 속성은 필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정해주어야 합니다. 클래스가..