React-Slick 캐러셀을 간단하게 만들 수 있는 라이브러리 2022년 기준으로 아직도 꾸준히 업데이트 중 공식 사이트 링크, GITHUB 링크 ``로도 함수를 호출 할 수 있다 Styled Component나 emotion에서 사용하는 abc`` 표현은 함수를 호출하는 방법 중 하나 String.prototype.sp...

Reference https://soojin.ro/blog/naming-boolean-variables is ~~이다 / isTrue : boolean ~~하는 중 / isLoading : boolean ~~됐다 / isLoggedIn : boolean is + 동사원형 : x has ~~를 가지고 있다 / ha...

Thymeleaf Java Spring의 View Template Engine html태그를 기반으로 View를 담당. Ant Design의 Card, Button 컴포넌트 Ant Design의 공식 사이트는 설명이 아주 잘 나와 있다. Card 컴포넌트 bodyStyle prop을 사용하면 카드를 커스터마이징할 수 있...

React에서 Event Handler의 이름 짓기 정확한 규칙이 있는 것은 아님 하지만 대부분 개발자들이 많이 사용하는 이름은 있음 https://blog.sonim1.com/220 https://jaketrent.com/post/naming-event-handlers-react 위 블로그에서 정리된 내용을 보면 prop에는 o...

useBreakpoint Hook useBreakpoint Ant Design의 Grid 안에는 useBreakpoint 훅이 들어있다. useBreakpoint Hook 안에 다시 xs, sm, md, lg, xl, xxl로 브레이크 포인트가 지정되어 있어서 Hook을 통해 간단하게 브라우저 사이즈에 따른 레이아웃 옵션을 줄 수 있다. ...

웹 사이트, 프로그램 다중언어 지원하기 들어가기 다중언어를 지원하는 프로젝트를 진행하기 위해서 방법을 생각하고 있었다. 전역 상태로 locale 값을 받고 locale에 따라 서로 다른 상수를 출력하려고 생각을 하고 있었다. 그런데 컴퓨터나 스마트폰의 언어에 따라서 자동으로 locale를 변경하도록 구현하는 부분이 시간이 오래 걸릴 것...

Array.prototype.reduce() 각 배열마다 리듀서 함수르 실행하고 하나의 결과를 반영 값을 생성해서 리턴 const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (previo...

JWT(Json Web Token)란? Json Web Token JSON 포맷을 이용해서 사용자에 대한 속성을 저장하는 Web Token 주로 회원 인증, 정보 전달에 사용됨. JWT 구조 Header, Payload, Signature의 3부분으로 이루어짐 각 부분은 Base64Url로 인코딩 되어 표현됨 Heade...

Compound Component Design Pattern 복합 컴포넌트의 디자인 패턴 Prop의 드릴을 피하고 상태 공유를 암시적으로 표시 복합 컴포넌트 : 상위 구성 요소와 하위 구성 요소가 통신할 수 있는 컴포넌트 React에서 children을 사용하면 컴포넌트를 <> 사이 </> 열고 닫을 때 사이에 ...

들어가기 GNB를 들으면서 분명히 아는 건데 갑자기 생각이 안 났다. 이건 정리하지 않으면 안된다고 생각했다. 그래서 GNB, LNB, SNB, FNB 약자를 풀어서 써 보기로 한다. GNB (Global Navigation Bar) 홈페이지에서 주로 메인 메뉴가 되는 부분의 네비게이션을 이야기한다. LNB (Local N...