본문 바로가기

분류 전체보기65

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.
token, XSS, CSRF 이번 글은 로그인 관련 작업하면서 알게 된 보안 관련 내용 정리다. 토큰으로 이루어진 로그인, 이를 가로채려는 해커의 노련함 등 로그인을 이룰 때 단순하게 생각하지 말 것을 기억하게 하는 문서인 셈이다. token 토큰은 크게 접근 토큰, 보안 토큰, 세션 토큰 등으로 분류한다. 이중 로그인에서 보는 접근 토근이 가장 많이 사용된다. 간략히 어떤 특정 기능이나 데이터에 접근하는 대상에게 권한을 부여하는 데 사용된다. 접근 토큰을 많이 볼 수 있는 것은 JWT(JSON Web Token)다. JWT(https://jwt.io)는 유저 정보를 담은 객체를 문자열로 만들어 암호화한 후 암호화된 키를 브라우저에 주는 형식으로 사용한다. 받아온 암호화된 키는 브라우저 저장소에 저장했다가 유저 정보가 필요한 API.. 2022. 10. 25.
Shallow Routing 리액트와 같은 싱글 페이지 어플리케이션은 전체 페이지를 업로드 후 특정 부분을 돌아다니며 보여주는 개념이다. 이때 새로고침 화면도 바뀌지만, 주소도 바뀌어야 사용자가 덜 헷갈릴 수 있다. 이를 돕는 게 shallow routing이다. 리액트의 프레임워크격인 Next.js에서 useRouter로 해당 기능을 지원한다. import { useRouter } from "next/router"; export default function RouterPage(){ const onClickToPage = () => { router.push(url, as, option) } return( 안녕하세요 )} 안녕하세요 버튼을 누르면 특정 페이지로 이동하게 한 코드다. 여기서 onClickToPage를 router.pu.. 2022. 10. 25.

티스토리툴바