📌프론트엔드 예시로 살펴보는 SOLID 원칙 3) Interface Segregation Principle (인터페이스 분리 원칙), Dependency Inversion Principle (의존 역전 원칙)

저번 포스팅에 이어 또다른 미션이 전달되었다.📌프론트엔드 예시로 살펴보는 SOLID 원칙 2)개방-폐쇄 원칙, 리스코프 치환 원칙희박한 확률로 냐옹이도 나왔으면 좋겠어요.냐옹이가 나오면 대화도 나누고, 같이 산책도 갈 수 있어요.고양이 종류가 시즌 별로 바뀌고, 새로

2022년 6월 4일
·
0개의 댓글

📌프론트엔드 예시로 살펴보는 SOLID 원칙 2)개방-폐쇄 원칙, 리스코프 치환 원칙

미션 저번 포스팅 예시로 돌아가보자. 프론트엔드 예시로 살펴보는 SOLID원칙 1)단일 책임 원칙 이번에는 고양이의 종류를 다양하게 해달라는 요구가 들어왔다. > 그냥 고양이 외에도 러시안 블루, 코리안 숏헤어, 벵갈 고양이, 노르웨이 숲 이렇게 4가지 종류의 고양이

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

📌프론트엔드 예시로 살펴보는 SOLID 원칙 1)단일 책임 원칙

디자인패턴은 프로그래밍을 하다보면 누구나 한 번쯤은 그 중요성을 듣게 된다.그런데 React의 함수형 컴포넌트로 작업하는게 익숙하다면 디자인 패턴의 중요성은 들어봤어도, 어떻게 적용해야 하는지, 왜 꼭 배워야 하는지 의문이 들 수 있다.디자인 패턴 중 가장 유명한 G

2022년 5월 19일
·
0개의 댓글

[디자인 패턴 1]iterator 패턴

iterator 패턴은 for문을 추상화 한 패턴으로 무언가를 반복하여 순서대로 처리하는 경우 사용된다.하나씩 꺼내서 처리하는 과정을 구현과 분리할 수 있다.컬렉션 구현 방법을 노출시키지 않으면서 그 집합체 안에 있는 항목에 접근할 수 있게 해준다.간단한 구현을 ite

2022년 5월 8일
·
0개의 댓글

throttle과 debounce

throttle은 func을 반복적으로 호출하는 경우, 임의로 설정한 일정 시간 각격으로 콜백 함수 시행을 보장한다.throttle(func1, 100) => 0.1초 동안 10번을 호출해도 첫번째 함수만 실행되고 나머지는 무시되므로 1번만 시행된다.debounce는

2022년 5월 1일
·
0개의 댓글

[KonvaJS]기본 사용법

knovaJS는 canvas API를 보다 쉽게 쓸 수 있도록 도와주는 라이브러리이다.Stage, Layer, Group, Shape으로 이루어져 있다.화면상에 보이는 캔버스 크기 및 이벤트를 관리shape, group등이 그려지는 공간layer내에서 shape들을 묶

2022년 4월 24일
·
0개의 댓글

[Canvas]Canvas에서 사진을 다루기

사진 업로드사진 비율이 깨지지 않게 Canvas에 그리기사진 위에 그림그리기해당 사진 다운로드 하기demoinput 태그에 파일을 업로드e.target.files0 FileBloB을 FileReader을 이용하여 readAsDataURL로 변환한다.FileReader가

2022년 4월 13일
·
0개의 댓글

[Intersection Observer API]무한 스크롤을 만들어보자

jsIntersection Observer API는 관측하는 Target Element가 viewPort에 교차하는 순간을 감지하는 API입니다.그러니까 Target으로 지정한 Element가 지금 화면에 보이는지 여부를 판단할 수 있습니다.option은 root, r

2022년 4월 9일
·
0개의 댓글
post-thumbnail

비동기 통신 취소하기(feat. AbortController)

예시 홈 화면메뉴 바 ( 홈, 상세보기, Best상품)1) 홈 -> 메인 화면 물품 리스트 가져오기 API 호출2) 상세보기 -> 특정 리스트 정보 가져오기 API 호출3) Best 상품 -> Best 상품 리스트 가져오기 API 호출사용자가 API 호출을 완료해서 화

2022년 3월 30일
·
0개의 댓글

Scroll Bubbling을 해결해보자

자식만 스크롤 될 순 없을까

2022년 3월 23일
·
0개의 댓글

React에서 Canvas를 써보자

https://github.com/maru5mango/magicboard파워포인트 같은 기능 + 약간의 포토샵 기능으로 웹 페이지 데모를 꾸미고, 그 내용을 html, css, js로 export 할 수 있는 웹 서비스를 만들어보려고한다.그래서 프로젝트는 크게

2022년 3월 16일
·
0개의 댓글