기록저장소

추상 팩토리 : 여러 객체가 묶인 세트의 생성에 대한 패턴, 추가되어도 기존것들을 수정하지 않음//메뉴 세트//기본 메뉴를 override해서 해당 브라우저 메뉴 생성//기존 코드를 수정하지 않음! : OCP 지킴//GrimpanMenu.tsimport Grimpan from "./AbstractGrimpan.js";import IEGrimpan from "./IEGrimpan.js";import ChromeGrimpan from "./ChromeGrimpan.js";export abstract class GrimpanMenu { grimpan: Grimpan; protected constructor(grimpan: Grimpan) { this.grimpan = grimpan; } abstr..

팩토리 메서드 : 클래스와 클라이언트 사이에 팩토리라는 중간자를 두고 독립된 요소로 분리//AbstractGrimpanFactory.tsimport Grimpan from './AbstractGrimpan';abstract class AbstractGrimpanFactory { abstract createGrimpan(): Grimpan; //추상그림판을 가져와야함 (IEGrimpan x, ChromeGrimpan x) //createGrimpan을 무조건 상속해서 override해야함 };}export default AbstractGrimpanFactory;* Abstract : 일반 class가 abstract class를 상속받을 수 있음, abstract가 아닌 요소도 수용해서 abstrac..

싱글턴 (Singleton)단 하나만 존재해야 할 때, 하나의 클래스가 단 하나의 인스턴스만 생성되도록  보장ex) 다크모드 문제 예시//class와 instance가 분리되어 있어서 상태관리가 어려움let instance: Grimpan;class Grimpan { constructor(canvas: HTMLElement | null){ if (!canvas || !(canvas instanceof HTMLElement)){ throw new Error('canvas 엘리먼트를 입력하세요.'); } } initialize(){} initializeMenu(){}}new Grimpan(document.querySelector('#canva..

SOLID 원칙소프트웨어 작업에서 코드를 리팩터링하여 읽기 쉽고 확장하기 쉽게 적용하는 지침 두문자약어개념SSRP단일 책임 원칙 (Single responsibility principle) : 한 클래스는 하나의 책임만 가진다.OOCP개방/폐쇄 원칙 (Open/closed principle): 소프트웨어 요소는 확장에는 열려있으나 변경에는 닫혀있어야 한다.LLSP리스코프 치환 원칙 (Liskov substitution principle): 프로그램의 객체는 프로그램의 정확성을 깨지않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 한다.IISP인터페이스 분리 원칙 (Interface segregation principle): 특정 클라이언트를 위한 인터페이스 여러개가 범용 인스턴스 하나보다 낫다.DDIP의존..

디자인 패턴소프트웨어 개발에서 반복적으로 발생하는 문제해결을 위해 제안된 재사용 가능한 설계 방법이나 해결 방법 사용이유?코드 재사용성: 검증된 해결책을 적용하여 개발 속도 향상코드 가독성 및 유지보수성: 명확한 구조와 의도, 협업과 유지보수 용이일관성: 동일한 패턴 이해로 코드 품질 향상 종류?1. 생성 패턴 (Creational Pattern) : 객체 생성 방법과 과정을 캡슐화하여 유연하고 재사용 가능하게 만드는 패턴- 싱글턴 패턴 (Singleton) : 한 클래스에 하나의 인스턴트만 존재하도록 보장- 심플 팩토리 패턴 (Simple Factory Pattern) : 객체 생성 로직 캡슐화로 특정 클래스 인스턴스 반환- 팩토리 메서드 패턴 (Factory Method) : 객체 생성을 서브클래스에..

요즘 IT,  velog  등등 IT 정보는 넘치는데 흘려보내는 것들이 많아서 정리해두는 기록✅ 읽기/요약 완료 상태⛔ 아직/미처 읽어보지 못한 상태➕ 유용한 사이트📌 다시봐도 좋을 글  ⛔  [10분 테코톡] 웨디의 프론트엔드에서의 에러 처리https://www.youtube.com/watch?v=RvsMwyysUHI  ⛔  Floating Navigation Menuhttps://blog.naver.com/rdh6327/223689396654  ⛔  Caro-Kann으로 간단?하게 알아보는 전역 상태 고급 원리https://cafe.naver.com/winterlood/242  ⛔  5년동안 집에서 서버를 운영한 썰https://docs.google.com/presentation/d/e/2PACX-..

웹 프레임워크프론트엔드 개발자/개발사React.jsUI 라이브러리,컴포넌트 기반의 빠른 렌더링과 강력한 생태계(React Router, React Native 등)로대규모 웹 애플리케이션에 적합 Meta Vue.jsUI 프레임워크,간단하고 직관적인 API 와 반응형 컴포넌트, 학습 곡선이 적어 가벼운 앱부터 대형 프로젝트까지 모두 적용 가능Vue.jsAngular풀스택 웹 애플리케이션 프레임워크,TypeScript 기반, MVC아키텍처, 양방향 데이터 바인딩으로 대규모 애플리케이션 구축에 적합GoogleSvelteUI 프레임워크,컴파일러 기반으로 빌드 시점에서 UI를 최적화 함,적은 런타임 오버헤드와 간결한 코드 작성Rich HarrisNext.js  React 기반 풀스텍 프레임워크,SSR(서버 사이드..

문득 border:0과 border: none은 둘다 border를 없애주는데 어떻게 다르지 궁금해서 검색하고 남기는 기록 border: 0;- border의 두께를 0으로 설정- 다른 속성이 있다면 (width, color 등) 그 속성들은 유지됨- 브라우저가 인식하지만 두께가 0이라 보여지지 않는것이라 렌더링은 됨- 다시 활성화해야 할 경우 초기설정 보존 border: none;- 테두리 스타일을 없음으로 설정- 테두리 자체를 렌더링하지 않으므로 더 효율적 결론!테두리 제거가 목적이라면 border:0보다 border:none이 가독성이 좋고 경제적이므로 border: none을 더 권장함기존스타일을 남겨두려면 border:0

라이프사이클이란 useEffect 사용하기React 컴포넌트의 사이드 이펙트 : 컴포넌트의 동작에 따라 파생되는 여러 효과useEffect(()=>{}, []) useEffect로 라이프 사이클 제어하기//1. 마운트 : 탄생 -> 최초1회 실행useEffect(()=>{}, []);//2. 업데이트 : 변화, 리렌더링useEffect(()=>{});//2-1. 최초 실행 무시 업데이트const isMount = useRef(false);useEffect(()=>{ if(!isMount.current){ isMount.current = true; false; } console.log("update");});//3. 언마운트 : 죽음useEffect(()=>{ //useEffect의 ca..

//App.jsx import { useState } from 'react'; import Viewer from './components/Viewer'; import Controller from './components/Controller'; import './App.css' function App() { //viewer와 controller가 형제관계이므로 부모인 app에서 useState const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); } return ( Simple counter ) } export default App//Viewer.jsx const Viewer = ({..