분류 전체보기

React 글자 4개로 React 컴포넌트 최적화 가능(번역글) 🤔

제목이 클릭을 유발하는 자극적인 글일 수 있지만 부분적으로는 사실이다. 아래 두개의 예제를 살펴보자 // 예제 1 const Counter = () => { const [count, setCount] = useState( Number.parseInt(window.localStorage.getItem(cacheKey)) ) useEffect(() => { window.localStorage.setItem(cacheKey, count) }, [cacheKey, count]) return ( Count: {count} setCount((prevCount) => prevCount - 1)}>- setCount((prevCount) => prevCount + 1)}>+ ) } // 예제 2 const Counte..

디자인 패턴/싱글턴 패턴 🆘

(최근에 이벤트 루프를 디자인 패턴으로 잘못 설명하여 다음엔 그러지 않기 위하여 이 포스트를 포스팅 합니다.) 디자인 패턴이란 객체 지향 프로그래밍 설계를 할 때 사용되는 패턴으로 자주 발생하는 문제를 피하기 위해 사용됩니다. 제가 이해한 흐름은 객체 지향 프로그래밍 설계를 할때 반복하여 발생하는 문제들에 직면하는 상황이 생겼습니다. 이러한 문제를 해결하는 방식들은 고착화 되었을 것입니다. 예를 들면 '메모리를 save하기 위해 전역 범위에 객체 인스턴스를 생성해두고 의존성이 주입되면 그때 이미 생성된 인스턴스를 참조할 수 있도록 하는 방법'이 있을 것입니다. 자주 발생하는 문제를 해결하기 위해 위와 같이 매번 말하는 방법도 있을 수 있고 이러한 패턴에 이름을 붙여 좀 더 간단하게 소통할 수 도 있을 것..

Javascript intersection observer api 👀

1번 상황 서비스하고 있는 사이트에 이미지가 2200개가 있다고 가정하겠습니다. 웹의 로드와 동시에 2200개의 이미지를 전부다 받아와야 한다면 사용자는 기다리는 동안 커피를 사올수 있고 세차도 가능할 지도 모릅니다. 2번 상황 3500개의 DOM 객체가 있고 이들이 화면에 나타나면 색깔이 변해야 한다는 기획이 있다고 가정해 보겠습니다. css의 animation 속성을 이용해 색깔을 계속 바꿔지도록 할 수도 있어서 화면에 나타나고 딱 한번만 색깔이 바뀌어야 한다고 조건을 추가하겠습니다. scroll 이벤트를 걸고 모든 DOM 객체들의 getBoundingClientRect를 이용하여 뷰포트 내의 위치를 가져오고 이를 이용하여 클래스를 변경해주는 방식도 있을 수 있을것 같습니다. getBoundingCl..

Ios webview에서 javascript를 통해 ios 기능 호출하기 ℡

WKWebView와 UiWebView의 차이점 원래 UiWebView가 존재하였지만 ios8에서 WKWebView가 등장하였습니다. 이 과정에서 UiWebView는 deprecated 되었습니다. WKWebView는 UiWebView 보다 성능이 좋고 효율적으로 동작합니다. WKWebView는 javascript를 비동기 적으로 처리합니다. Javascript와 네이티브 코드 간의 통신은 비동기 적으로 처리되고 일반적으로 더 빠르게 실행이 됩니다. 하지만 WKWebView에서는 쿠키를 직접 관리해야 합니다. 쿠키 설정이 필요해서 쿠키를 설정하는 스크립트를 시작시에 실행시켜 주어서 원했던 동작을 구현했던 경험이 있습니다. (이 부분은 좀 더 develop 예정입니다.) Ios의 Webview를 이용할때 w..

Android webview에서 javascript로 함수 호출하기 ℡

Android에서 WebView의 용도는 무엇인가요? WebView는 어플리케이션 내부에 웹 페이지를 보여주는 view 입니다. 안드로이드 에서는 'Acitivity 내부에서 웹 브라우저나 온라인 컨텐츠를 보여주기 위한 기반이 되는 클래스'라고 설명이 되어있습니다. 웹 페이지를 보여주기 위해 웹킷 렌더링 엔진을 사용하고 history를 통한 앞으로 가기 뒤로가기 메소들르 포함하고, zoom in,out, text 찾기외 다양한 것을 포함하고 있습니다. 어플리케이션에 Webview를 추가하기 위해서는 xml Layout file에 요소를 추가하여야 합니다. WebChromeClient를 통해 chrome 핸들러를 추가할 수 있습니다. alert, preload, confirm등의 표시와 액션을 제어할 수 ..

React conatiner/presentational -> hook 📝

React 에서 Presentational/Container Component로 관리를 해야한다는 이야기를 듣게 되었습니다. 두개의 컴포넌트는 어떤 컴포넌트를 의미하는지 알고 싶어 예전의 medium글을 읽게 되었습니다. 그리고 이 글을 읽으며 훅의 도입 이유중 하나인 상태로직의 재사용에 대해 이해하게 되었고 컴포넌트는 바보 컴포넌트로 생성을 해야 한다는 생각을 더 강하게 하게 되었습니다. 바보 컴포넌트란 주어진 props를 보여주기만 하는 컴포넌트를 의미합니다. 바보 컴포넌트는 재사용이 쉬워진다는 장점이 있습니다. 글을 살펴보면서 훅은 왜 등장하게 되었고 훅을 주로 사용하는 현재의 시점에서는 저 당시에 존재했던 개념을 어떻게 활용하면 더 좋은 코드를 작성할 수 있을지 알아보려 합니다. 여기서 말하는 더..

Html <img loading='lazy'> 😴

html의 클래스에서 img 태그에 loading='lazy'를 추가해주면 image의 lazy 로딩이 가능합니다. lazy 로딩이란 이미지 태그가 뷰포트 내에 위치하게 되었을때 load를 하는 것을 의미합니다. loading 속성이 추가되기 전에는 intersection Observer API 객체를 생성하고 observe를 하다가 viewport내에 들어오게 되면 src를 바꿔주는 식으로 lazy loading을 하였었습니다. 또는 scroll, resize 또는 orientationchange 같은 이벤트 핸들러를 사용한다고 하는데 이 방식은 제가 잘 모르겠습니다. loading 속성에 들어가는 값은 아래 세개의 속성이 들어갑니다 auto : 브라우저의 기본 lazy loading 동작입니다. la..

Typescript class 🏛

es6에서는 class가 등장하였습니다. class는 syntatic sugar로서 이를 babel로 변환하면 prototype으로 변환되는 것을 볼 수 있습니다. syntatic sugar란 alias와 같은 개념으로 이해하시면 좋습니다. 복잡한 기능을 간단하게 사용할 수 있도록 도와줍니다. React의 jsx도 대표적인 Syntatic sugar입니다. Typescript에서 class를 사용하는 경우 어떠한 것들을 적용해야 하는지 알아보려 합니다. js class class Person { constructor(name){ this.name = name } sayName() { console.log(this.name) } } ts class typescript에서는 변수를 미리 선언해주어야 합니다...

Javascript async/await, Promise 실수 포인트 🗝

async/await에서 에러 처리 new Promise((resolve, reject) => { throw new Error('this is error') }).catch(e => console.log(e)) // 에러내용 출력 new Promise(async (resolve, reject) => { throw new Error('this is error') }).catch(e => console.log(e)) // pending Promise 안에서 async를 사용하여 Error를 반환한 두번째의 경우에는 에러가 정상적으로 반환되지 않습니다. 이 상태면 Promise는 계속 pending 상태가 되고, 메모리를 차지하고 있게 됩니다. 왜 그럴까요? promise 내부에서는 resolve, rejec..

Javascript 콜백 📞

콜백함수, 콜백함수 지옥, Promise의 등장, generator를 이용한 promise.then 지옥의 탈출, es8에서의 async/await 등장 이와 같은 흐름을 들어보셨고 콜백에 대한 이야기 또한 많이 접했었습니다. 위의 흐름이 등장하게 된 원인인 콜백 함수에 대해서 알아보려고 합니다. 콜백 함수란 다른 함수에 매개변수로 넘겨준 함수를 말합니다. 아래와 같은 두개의 예시가 있을것 같아요 // 1번 // button.addEventListener('click', function() { console.log(this) // button element }) // 2번 // function sayHi(name) { console.log(`hi ${name}`) } function wrongInput(..