📕 정리노트

안녕하세요

March 26, 2021

Workbox로 오프라인 페이지 처리방법

Workbox는 Service worker 설정에 도움을 주는 라이브러리 입니다. 이 글 에서는 다음과 같은 내용을 포함하고 있습니다. service worker에 대한 간략한 설명 Workbox 시작하기 인터넷 연결이 없을때 오프라인 페이지 띄우기 Service Worker란❓ 서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트 입니다. 이 글에서…

January 11, 2021

2020년 회고록

회고 전 어수선한 2020년이 가고 2021년이 왔다. 2020년을 돌아 보면서 내가 했던것들, 아쉬웠던 것들을 정리해보며 이번년도의 목적을 정리해 보는 시간을 가질것이다. 1월 한양대ERCIA 로봇융합학과에 합격하여 20학변 신입생이 되었다. 특성화고를 졸업한 나는 미분, 적분에 대한 개념이 없어서 퇴근 후 열심히 수학을 공부하던 기억이 남는다. 2월 …

December 27, 2020

Web과 Arduino를 Bluetooth로 통신하기

Web Bluetooth API? 브라우저에서 Bluetooth 통신으로 주변장치와 상호작용을 할 수 있습니다. 이는 실험적 기술이며 일부 브라우저에서 지원하고 HTTPS 환경에서만 작동됩니다. (Chrome, Edge) 만약 블루투스 통신이 필요한데 안드로이드나 IOS의 지식이 부족하다면 Web을 통하여 통신하는것은 어떨까요? Bluetooth 모듈 …

September 15, 2020

웹 워커(Web worker)로 DOM 업데이트 개선

웹 워커(Web worker)란? 웹 워커(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드가 멈추거나 느려지지 않고 동작할 수 있습니다. 웹 워커를 사용하는 이유 싱글 스레드 방식으로만 작동 할 수…

December 23, 2019

react - custom hook 사용하기

컴포먼트의 로직을 재사용하기 위해서 고차 컴포넌트(Higher-Order Components)를 사용해왔습니다. 하지만 custom hook으로 더 간편하게 상태관리 로직을 공유할 수 있습니다. 예1) React 공식문서 예제 위 코드는 외부로부터 데이터를 구독하여 댓글목록을 렌더링하는 CommentList 컴포먼트 입니다. 그리고 밑에는 블로그 포스트…

December 22, 2019

javascript - 동기/비동기

Javascript 동기/비동기 자바스크립트는 하나의 callStack으로 요청을 순차적으로 진행합니다. 하지만 아래와 같은 상황이 있습니다. setTimeout은 Web API의 한 종류로 코드를 일정시간 만큼 기다렸다가 로직을 실행시킵니다. 만약 순차적으로만 진행이 된다면 a -> b -> c 순으로 실행되야만 합니다. 하지만 결과는 a -> c ->…

December 19, 2019

React - exhaustive-deps warning 해결법

Exhaustive-deps warning React Hook useEffect has a missing dependency: ‘xxx’. Either include it or remove the dependency array react로 개발을 하다보면 한번쯤은 봤을법한 warning이다. useEffect에 누락된 종속성이 있어 배열안에 종속성을 추가…

December 16, 2019

react - useCallback, memo re-render 최적화

React의 Hook 중에 useCallback과 useMemo를 활용하여 최적화 하는 방법을 알아보았다. React가 렌더링을 실행하는 행동 Props가 변경되었을 때 State가 변경되었을 때 부모 컴포넌트가 렌더링 되었을 때 focueUpdate() 를 실행하였을 때 주목해야 될 점은 부모 컴포넌트가 렌더링 되었을때 자식 컴포넌트까지 다시 렌더링이 …

December 13, 2019

자바스크립트 switch 구문

switch useReducer 예제를 보던 도중 switch case절 후에 문장 주위에 중괄호를 넣는 것을 알게되었습니다. 그다지 다르지 않고 넘어 지지 않도록 진술의 끝 break이나 return끝에서 여전히 필요 하지만 중괄호만에 좋은 장점이 있습니다. 장점 중괄호는 블록 scope를 만들게 됩니다. 그 뜻은 각 case 마다 다른 블록 scope…

December 09, 2019

선형대수학 - 벡터의 기본

Vector 백터는 크기와 방향을 동시해 나타낸다. 예를들어 자동차가 시속 5mps로 움직인다 하면 이 정보는 벡터가 아니다 왜냐하면 자동차가 어떠한 방향으로 움직였는지 알 수 없기 때문이다 때문에 이 정보는 스칼라가 된다. 이 값이 벡터가 되기 위해선 방향을 알아야된다 예를들어 자동차가 시속 5mps로 동쪽으로 움직인다. 이 정보는 벡터가 된다. 그래프…