Chart.js

오랜만에 포스팅한다.. 헤헤 이번에는 차트!! 차트를 사용해보려고 한다. 이번 개발업무에 필수로 들어가야 하는 기능이라 기본 사용법을 적어 두려고 한다기본 코드는 이렇게 시작한다. 실제로 필자는 차트를 정의 하면서 data를 분리하여 작업했다. CHART_COLORS

2022년 11월 28일
·
0개의 댓글
·

비회원 장바구니 만들기

이전 포스팅에 cookies,SessionStorage,LocalStorage 를 봤다 이번에는 LocalStorage 를 활용해서 비회원장바구니 를 만들어보자!기존 데이터를 불러와 map 으로 뿌려주고 장바구니 버튼을 만들어 브라우저에 저장하려고 한다.주의 해야할점은

2022년 9월 22일
·
0개의 댓글
·

LocalStorage,SeesionStorage,Cookies

이번시간은 브라우저 저장소를 이용해서 비회원 장바구니를 만드려 보자!!개발자 도구(F12)로 LocalStorage SessionStorage Cookies 확인할수 있다. LocalStorage SessionStorage 2개는 key value 형식으로 저장된다.L

2022년 9월 21일
·
0개의 댓글
·

TS-HOF

이번에 할내용은 HOF!!!HOF는 Higher Order Function 이라고 한다. 개념은 클로저로부터 확장된 개념이다.HOF는 최종 return 값이 JSX인지 JSX가 아닌지로 구분한다.특정 버튼을 클릭했을때 , id 값을 넘겨주기 위해 event.target

2022년 9월 17일
·
0개의 댓글
·

TS스크립트-Generic

타입스크립트 에서 Generic을 알아보고 이를 이용해서 !HOC - HOF - COOKIE - LocalStroage - SessionStroage까지 공부해보고자 한다! 이번 포스팅은 타입스크립트에서 어마무시한 타입인 Generic을 한번 살펴보자! any unkn

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

이미지 최적화(업로드)-3

이번엔 드디어 파일 업로드를 최적화를 해보려고한다. 필자는 파일3개를 업로드 할거다!! 기존에 예시로 만들었던 코드를 예시로 만들어보자!😎 Promise를 활용해 최적화를 시킨다기 보다 프로미스가 작동하는 원리를 가져와 코드를 작성한다고 생각하면된다. 이전에

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

이미지 최적화( 업로드 )-1

저번 포스팅 까지 이미지 최적화를 통해 미리보기와 업로드 까지 했다.이번 포스팅은 이미지를 여러개 올릴 경우 어떤 방식으로 해야 최적화시킬수 있는지 알아보자!파일 여러개를 업로드 하기위해서는 방법은 여러개가 있다.위에서 처럼 스테이트를 여러개 만드는법, 배열 , 객체

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

이미지 최적화(미리보기)

이미지를 어떻게 하면 가장 효율적으로 불러올까? 아마 나와 같은 초보 개발자들은 한번쯤은 고민해 봤을거라고 생각한다. 분명 이미지를 업로드 하고 불러오는거 까지는 문제가 없는데 성능문제로 시간이 오래 걸리는 현상을 분명 경험 했을?! 거라고 생각한다. 물론 난 이미지

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

Dom

DOM은 요소 노드를 취득할 수 있는 다양한 메서드를 제공한다 document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트 깂을 갖는 하나의 요소 노드를 탐색하여 반환한다. getElementById 메서드는 Document.pr

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

메모이제이션(Memoization)

setState 함수를 사용하게 되면, 화면 전체가 다시 렌더가 되면서State 와 여러개의 함수들을 다시 그려낸다.그런데, 단순하게 이메일 주소를 받아오는 과정이라고 했을 때Input 태그에 onChange 이벤트로 setState 함수를 실행하게 되면문자 하나 하나

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

refetch의 문제점과 개선 방법

프로젝트 하면서 불필요한 네트워크 요청을 하지 않기 위해 refetch보다 cache.modify를 많이 사용했다.추가적인 네트워크 요청 없이 프론트엔드의 apollo 저장소에 직접 자바스크립트로 CRUD를 하게되면 대규모 환경에서 더 효율적인 서비스를 제공할 수 있

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

[React Error] expected `onclick` listener to be a function, instead got a value of `object` type.

onClick 함수를 자식 컴포넌트로 전달하면서 에러가 생겼다에러 내용은 다음과 같다onclick이 함수일 것으로 예상했지만 대신 object(객체) 유형의 값을 받았다고 한다.{}<= 중괄호 를 추가 하지 않고 자식으로 넘겨주면 오류를 확인할수 있다.React의

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

Object. assign

object.assign 에 대해 알아보려고 한다. 객체를 좀더 쉽게 병합해주는 메서드 라고 보면된다. fireBase 에서 유저프로필을 수정하고 바로 수정되 내용을 보여주기 위해서 사용했던 메서드 인데 잊어버릴거 같아서 남긴다. 좀더 쉽게 기억하기위해 예제를 통해

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

fireBase는 NoSQL?

리엑트로 클론 코딩을 하면서 몰랐고 새로운게 있어서 남긴다!! 헤헤 파이어베이스로 테스트 기반 코딩을 하려면 기억해둬야 하지 않을까 싶어서 남긴다!내머리는.. 똑똑하지 않기 때문...위 내용은 현재 사용자의 프로필을 가져오기 위해 작성한 내용이다.코드 내용부터 간단하게

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

React /component/state/useEffect

여러개의 프로젝트를 하면서 React 개념을 제대로 알지 못하고 사용했다. 이번에 next.js 프레임 워크가 아닌 순수 react로 프로젝트 하면서 제대로 알고 넘어가고 싶어서 남긴다.!일단 리엑트의 컴포넌트를 먼저 알고 넘어가자컴포넌트란 UI 또는 기능을 부품화해서

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

CSSOM ,AST

렌더링 과정을 공부하면서 모르는 단어와 말들이 있어 적는다!! CSSOM , AST는 브라우저의 렌더링 과정에서 가장 많이 나오는 말이다. 렌더링의 뜻과 브라우저의 렌더링 과정을 알아봐야한다. 렌더링 렌더링은 HTML, CSS , 자바스크립트로 작성된 문서를 파싱

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

프로미스-3

비동기 처리를 위한 콜백 패턴은 에러처리가 곤란하다.!!그렇지만 프로미스는 에러를 문제없이 처리 할수 있다.프로미스 후속 처리 메서드은 then, catch, finally 를 사용하여 수행한다. 비동기 처리에서 발생한 에러는 then 메서드의 두 번째 콜백 함수로

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

프로미스-2

프로미스 공부하면서 놓친 부분이 있는거 같다.. 그래서 작지만 보고 간드아\~\~~!!fulfilled 또는 rejected 상태를 settled상태라고 한다. settled 상태는 fulfilled 또는 rejected 상태와 상관없이 pending 이 아닌 상태로

2022년 7월 27일
·
0개의 댓글
·

프로미스 정적메서드-2

Promise.racePromise.race 메서드는 Promise.all 메서드와 동일하게 프로미스 요소를 갖는 배열드의 이터러블을 인수로 전달 받는다.이말은 즉 fulfilled 상태가 되는 것을 기다리는 것이 아니라 가장 먼저 fulfilled 상태가 된 프로미스

2022년 7월 27일
·
0개의 댓글
·

프로미스 정적 메서드

Promise 는 주로 생성자 함수로 사용되지만 함수도 객체이므로 메서드를 가질수 있다.Promise.resolve / Promise.rejectresolve 와 reject 메서드는 이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용한다.resolve와 rej

2022년 7월 25일
·
0개의 댓글
·