본문 바로가기

전체 글195

스로틀(Throttle)과 디바운스(Debounce) 단도직입적으로 말하자면 스로틀(Throttle)과 디바운스(Debounce)는 이벤트를 기반으로 실행하는 자바스크립트 특성상 이벤트(event)를 효과적으로 제어(제한)하는 방식(기술)이다. 짧은 시간 내에 반복되는 이벤트로 인한 발생하는 연산들을 제어하여 성능저하를 막고 의도한 만큼만 실행 하기 원할 때 사용한다. 디바운스(Debounce) 순차적으로 반복되는 이벤트를 그룹화하여 끝나는 시점에 실행시켜 제어하는 방식 ※ 예시 : 창 크기 resize 스로틀(Throttle) 일정시간 동안 이벤트가 한번만 실행되도록 제어하는 방식 ※ 예시 : 무한 스크롤링 둘의 차이점 스로틀(Throttle)과 디바운스(Debounce) 의 가장 큰 차이점은 스로틀(Throttle) 은 적어도 X 밀리 초마다 정기적으로.. 2022. 8. 28.
MPA 와 SPA , SSR 와 CSR MPA (multi page application) 여러 페이지로 구성된 웹 어플리케이션으로 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html 을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식 SSR 방식을 사용함 SPA (Single Page Application) 하나의 페이지로 구성된 웹 어플리케이션으로 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식 SSR 과 CSR 그리고 SEO 간의 관계 SEO (search engine optimization) SEO 통칭(검색 엔진 최적화)는 검색엔진으로 부터 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정을 말한다. .. 2022. 8. 28.
[CSS] 이미지 테두리에 그림자 원 형태의 소셜 로그인 이미지 버튼에 그림자를 주려했으나 box-shadow 을 주니 네모난 모양의 그림자가 생겨 방법을 찾으니 기존에 박스형태의 태그에 그림자 주는 방식은 box-shadow 속성을 주었지만 이미지에 그림자를 주려면 CSS filter 속성 중 drop-shadow을 주면된다. ※ CSS filter : 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용하며 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 사용됨 + 최신브라우저만 지원하므로 확인하고 사용해야한다 drop-shadow(x y blur color) styled-component 로 적용한 모습 const ImgBox = styled.div` width: 200px img { width: 100%; filter: .. 2022. 8. 28.
사수라는 신기루 그저 유희를 위한 픽션 2022. 8. 26.
유사 배열 객체와 반복 작업 가끔 반본적인 객체형태의 데이터를 반복 작업해야 한다면 골머리가 아프다 배열형태라면 쉽게 처리하기 쉽지만 객체형태라면 쉽게 처리가 힘들기에 되도록 배열형태로 값을 주고받곤 했다. 그러던 와중 유사 배열 객체와 이 객체를 반복작업을 할 수 있는 메서드를 알게되었고 유사 배열 객체 (array-like object) 라는 한정적인 객체의 형태(?) 만 가능한 작업으로 보이나 알아두면 좋을 듯 하여 정리하게 됨 쓰게될지는 모르겠음 가장 큰 특징으로 lengh 속성이 따로 가지고 있다는 것과 키값이 순서가 눈에 띈다 그것을 제외하면 객체와 다름 없어 보인다. 실제로 [[Prototype]]: Object 특별하게 다른놈은 아닌듯 하다. // 유사 배열 객체 모양 const arr_like = {0: 'I.. 2022. 8. 26.
리덕스 관련 알아두면 좋은 내용 redux-action 액션 생성함수와 리듀서를 작성할때 간단하게 활용하는 라이브러리 시작하자마자 모르는 문법이 보여서 체크하고 감 객체 리터럴 표현을 반환하기 위해서는 함수 본문을 괄호 속에 넣음 params => ({foo: bar}) createAction() : 액션 생성 함수를 만들어주는 함수이다. handleActions() : 기존 switch 를 활용한 방법보다 효율적이고 가독성있게 리듀서를 작성할 수 있다. createAction() 을 활용하여 만든 액션 생성 함수는 액션 객체를 던져주는게 아니기 때문에 바로 dispatch 해서 사용이 불가능하고 redux-thunk 같은 액션 생성 함수를 dispatch 할 수 있게 만들어 주어야 편하게 바로 사용이 가능하다. 기존 쓰던방식 cons.. 2022. 5. 31.
개발 중 이슈 보고서 [4월 01일 ~ 5월 13일] 원래는 주마다 이슈를 정리하여 올리려 했으나 프로젝트 개발에 힘쓰느라 몰아 올리게됨 노력할예정 삽질 리스트 1. 웹팩 오류 상황 설명 : 어쩌다 그랬는지 심신미약 상태로 개발하던 중이라 정확히 기억나지는 않지만 이런 오류를 만났다. ERROR in ./node_modules/jws/lib/verify-stream.js 8:13-30 Module not found: Error: Can&#39;t resolve &#39;stream&#39; in &#39;D:\react_file\Project\temp_porject\node_modules\jws\lib&#39; > BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules .. 2022. 5. 13.
웹팩과 번들러 웹팩의 이해 웹팩(webpack)이란? 웹팩 공식 Github 에서는 웹팩을 모듈(module)을 위한 번들러(bundler) 라고 소개한다. 모듈(module) : 재사용 가능한 코드조각 번들러(bundler): JS, CSS, 이미지 등의 파일을 묶어주는 작업을 번들링(Bundling)이라고 하고, 작업의 결과물은 번들(Bundle)이라고 한다. 마찬가지로 묶어주는 역할을 하는 웹팩(webpack) 같은 친구들을 번들러(bundler) 라고 한다, 웹팩을 사용하는 이유 웹팩을 사용하는이유 근본적으로 번들러(bundler)사용하게 된 이유는 번들러(bundler) 존재하기 전에 웹에서 는 두 가지 방법으로 브라우저에서 JavaScript를 실행했다. 각 기능에 대한 스크립트를 포함해서 사용 모든 프로젝.. 2022. 4. 12.
promise 와 async & await callback 함수를 정리 할 때 비동기 처리에 관한 내용도 알아보았고 더 나아가 비동기 작업을 조금 더 깔끔하게 처리하는 promise 대해 알아보려한다. promise 는 자바스크립트 비동기 처리에 사용되는 객체로 주로 서버에서 받아온 데이터를 표시하려고 할 때 사용한다. promise 는 3가지 상태 중 하나를 가지고 있다. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. promise 를 생성하고 연산이 성공적으로 완료하면(fulfilled) then 안에 있는 callback 함수 실행되고 연산이 실패하면(rejected) catch 안에 있는 callback 함수가 실행된다. 또한 .. 2022. 3. 2.
callback 함수 어떤 개념을 배울 때 이 개념이 무엇인지 왜 필요한지 어떻게 사용하는지 정리되지 않는다면 제대로 이해하기는 힘들다. 나에게는 callback 함수가 그러했다. callback 함수가 무엇인지는 대충은 알았고 어떻게 사용하는지 또한 알고 있었지만 정확히 무엇인지 왜 필요한지는 알지 못 했다. 이번 기회에 pormise 를 공부하기 이전에 callback 함수도 확실히 정리하고 가려한다. 콜백함수 다른 함수에 인자로 전달되는 함수를 콜백 (callback) 함수 라고 한다. 좀 더 자세히 보면 다른 코드 (함수 또는 메서드) 에게 인자로 넘겨주면서 제어권도 함께 위임하고, callback 함수를 위임받은 코드는 내부 로직에 의해 callback 함수를 적절한 시점에 실행한다. JS 에서 함수는 1급 객체 이.. 2022. 2. 24.
Hooks Hook 을 제대로 알지 못하고 리액트 개발을 시작하는 것은 니퍼를 들고 나사못을 빼는 헛짓거리 일거 같아 확실히 정리하기 위해 적어두려함 Hook 이 무엇이냐? 기존 React 의 class 바탕의 복잡한 코드를 작성할 필요 없이 여러 React 기능을 functional component 에서 쉽게 사용 할 수 있게 해주는 것이 Hook 인 것이다. 중요한 부분은 functional component 에서 state 를 가질 수 있게 된 것과 기존의 React 에서는 class component, render(복잡한 라이프 사이클과 그에 대응하는 메서드들 ..) 이런 귀찮은 짓을 안하고 하나의 function 에서 모든 것을 할 수 있게 된 점 정도로 정리할 수 있을 것 같다. 중요 Hook 비구조화.. 2022. 2. 22.
ref 를 알아보자 (ref DOM) ref 란? HTML id 를 사용하는것처럼 DOM 에 이름을 다는것처럼 프로젝트 내부에서 DOM 에 이름을 다는 방법이 ref (reference) 개념이다 DOM 을 꼭 직접적을 건드려야 하는 특수한 경우에 사용하는 것을 권장 특정 input d에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 개인적으로 jQuery 한창 쓸 때도 기본 js 방식으로 코드를 많이 짜서 id 를 쓰는 것이 익숙했는데 React 와서는 코드를 짜는 방법이 조금 달라 감이 잘 잡히지 않았던 경험이 있다. + DOM 에 관련있기도하고 React 를 이해하는데 클래스형 컴포넌트가 도움 될 것 같아 일단 클래스형 컴포넌트에서도 사용하는 방법을 적어둠 콜백 함수 를 통한 ref 설정방법 클래스 형 impor.. 2022. 2. 21.

티스토리툴바