본문 바로가기

FE54

Domain, DNS, Hosting 도메인(domain)과 디앤에스(DNS), 그리고 호스팅(Hosting). 아마 이 세 가지는 사용자가 웹을 접속해 자료를 받는 짧은 순간을 모두 압축한 조합이라 볼 수 있다. Domain 도메인은 영도 혹은 분야, 영역 등의 의미를 갖고 있는 단어다. 다만 웹에서는 인터넷 주소이란 의미로 확장되었다. 도메인은 일반 사용자가 웹을 접속하는 데 편리함을 가져다 준다. 우리가 www.naver.com 으로 네이버를 접속하고, www.daum.net 으로 다음을 접속할 수 있다. 그러나 이곳에 들어온 분들 중 이 두 사이트의 IP주소를 알고 있는 사람이 있으신가? 아마도 없을게다. 000.000.000.000 같이 이런 복잡하고 어려운 숫자 모음을 굳이 외울 필요가 없으니까. 이렇게 도메인은 표면적으로 도메인.. 2022. 10. 27.
memoization(feat. useMemo, useCallback) 메모이제이션(memoization)은 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리에 저장해 동일한 계산의 반복 수행을 제거함을 뜻한다. 이는 프로그램 실행 속도를 빠르게 하는 기술이며, 복잡한 문제를 간단한 여러 문제로 나누어 푸는 동적 계획법의 핵심이 되는 기술로 알려져 있다. 리액트에서 메모이제이션은 최적화의 동의어다. 처음 렌더링 후 다음에 리렌더링 되었을 때 값이 바뀌지 않았다면 다시 계산해 새로 그리지 않고 기존 값을 그대로 내놓기 때문. 컴퓨터가 다시 계산하지 않고 바로 결과값을 나타내니 사용자 입장에선 굉장히 빠른 피드백을 받는 듯하다. 리액트 훅 useMemo를 통해 간단히 살펴볼 수 있다. const aaa = Math.random(); console.log(aaa); con.. 2022. 10. 26.
Flatten & Unflatten 플래턴(Flatten)과 언플래턴(Unflatten). 먼저, 플래턴은 중첩된 배열이나 객체를 한 단위로 풀어서 사용함을 말하고, 언플래턴은 그 반대로 특정 단위를 묶거나 curring처럼 다 쪼개어 사용함을 말한다. Flatten Flatten은 flat의 동사형이다. 따라서 평평하게 한다는 뜻을 갖고 있다. 위에서 언급했듯 배열이나 객체를 평탄화 시킨다는 의미다. 배열에서는 flat() 메서드를 통해 하위 배열까지 평탄화할 수 있고, 객체에서는 map() 혹은 reduce()와 concat() 이용한다. 코드를 보면 무슨 말을 하는 지 조금 더 이해된다. const arr1 = [1, 2, [3, 4]] arr1.flat() // [1, 2, 3, 4] const arr2 = [1, 2, [3, 4,.. 2022. 10. 26.
Curring 커링(curring). 고차함수 계열 기법의 하나다. 인자가 여러 개인 함수의 일부 인자를 고정시키고 새로운 함수를 만드는 방법이다. 조금 더 설명하자면, 함수 인자가 n개라면 함수도 n개로 분리해 사용하는 것. 말로 들으면 이해하기 어렵다. 수포자였던 필자도 말만 듣고는 한 번에 이해하지 못했다. 코드로 먼저 살펴보자. // 이 코드를 function helloFunc(word, name) { console.log(`${word}, ${name}`); } // 이렇게 바꿨다. function helloFunc(word) { return function (name) { console.log(`${word}, ${name}`); }; } 위 코드를 보자. word, name을 인자로 받은 코드를 word .. 2022. 10. 26.
Optimistic-UI 옵티미스틱 UI(Optimistic-UI)는 멘털 모델 중 하나다. 인터페이스 형태를 말하는 게 아니다. API와 통신 중 UI를 그려내는 과정에서 모든 것을 낙관적으로 보고 UI를 먼저 그리는 모델이다. 다시 정리하자면, 옵티미스틱 UI는 모든 API 통신이 성공할 것이라 여기고 화면에 먼저 결과 값을 그리는 것을 말한다. 5G 시대에도 필요? 우리는 언제부턴가 인터넷 속도가 느려서 힘들어하는 경우가 많이 사라졌다. 서버 통신을 낙관적으로 보고 UI를 먼저 그려야하는 일이 없어 보인다. 결론부터 말하자면 옵티미스틱 UI은 필요하다. 옵티미스틱 UI 장점은 빠른 피드백이다. 우리 주변에서 흔히 볼 수 있는 결과 중 하나로 페이스북 버튼의 좋아요가 옵티미스틱 UI로 이뤄져 있다. 사용자가 좋아요 버튼을 계.. 2022. 10. 25.

티스토리툴바