React hook 최적화 React.memo useCallback useMemo

기본 input tag, textarea tag width/height 가 파이어폭스에서랑 크롬에서랑 다르구나 다른 태그들도 브라우저 따라 차이 조금씩 있을 수 있겠다. 물론 css 놓치지 않고 잘 짜면 똑같이 보인다 ~

프론트 상태 관리 뭐로 할까하다가 useState 처럼 쓰이는 것 같은 recoil 발견 function App() { return ( ); } 대충 감싸주고 const textState = atom({ key: 'textState', // unique ID (with respect to other atoms/selectors) default: '', // default value (aka initial value) }); state key하고 기본 값 넣어주면 function TextInput() { const [text, setText] = useRecoilState(textState); const onChange = (event) => { setText(event.target.value); }; r..

https://ryuhojin.tistory.com/19 [ReactJS] React + TypeScript + Webpack5 초기 설정 (리액트 18 공식 대응 완료) [2022-10-06 : 2차 업데이트] 보일러 플레이트의 프로젝트 구조변경 및 약간의 설정 변경이 있었습니다. 참고해주세요. 좀 더 나은 스타터킷을 배포하도록 노력하겠습니다. 오늘은 CRA를 사용하지 않 ryuhojin.tistory.com 위 글 작성자분의 webpack5 boilerplate 위에 //webpack.common.js new webpack.ProvidePlugin({ React: "react", process: 'process/browser.js', //추가 }), process 못 찾는 에러 해결하기 위해 추가하고..

Kafka zookeeper kafka cluster brocker topic partition producer consumer group consumer zookeeper 위와 같은 역할을 하는 요소들이 있다. 각각의 역할을 보자. 카프카 = kafka cluster 이고 카프카를 여러개 띄웠을 때 관리하는 역할이 zookeeper이다. Broker kafka cluster는 여러개의 브로커를 가질 수 있고 브로커는 topic 으로 메세지를 구분한다. 한 개의 topic은 한 개 이상의 파티션으로 구성돼있고 파티션은 기본적으로 추가만 가능한 공간이다. 파티션에 저장된 메세지의 저장 위치를 오프셋 이라고 한다. 컨슈머가 파티션을 소비해도 메세지는 삭제되지 않는다. topic의 특정 파티션에 저장하려면 키..

Custom Elements class Test extends HTMLElement { constructor() { // super()를 호출함으로써 시작하여 올바른 프로토타입 체인이 확립되도록 한다. super(); } static get observedAttributes() { // 모니터링 할 속성 이름 // 이 메서드는 관찰하기를 원하는 특성들의 이름을 포함하는 배열을 return 해야 한다. return ['c', 'l']; } connectedCallback() { // 사용자 정의 요소가 문서에 연결된 요소에 추가될 때마다 호출된다. // 이것은 노드가 이동될 때마다 발생할 것이며, 요소의 내용이 완전히 해석되기 전에 발생할 지도 모른다. // DOM에 추가되었다. 렌더링 등의 처리를 하자...

2023.07.31 - [프로젝트/회비관리 메신저 서비스 (07.28~)] - 회비 관리 메신저 서비스 - 와이어프레임, ERD, API, 브런치 회비 관리 메신저 서비스 - 와이어프레임, ERD, API, 브런치 대용량 트래픽을 처리하는 MSA기반 회비관리 메신저 서비스 2023.07.31 - [프로젝트/회비관리 메신저 서비스] - 메신저 서비스 프로젝트 ERD, API 설계 라이브 음성/화상은 성능향상을 위한 포인트를 cornpip.tistory.com ERD, 와이어 프레임, API 링크는 기존 포스팅에서 볼 수 있다. 현재 ERD는 위와 같고 Wallet은 @Inheritance(strategy = InheritanceType.JOINED) 을 사용한 슈퍼타입이고 GroupWallet, Perso..

Object.equals public static void main(String[] args) { Test t = new Test("hi"); Test t2 = new Test("hi"); t.equals(t2); } static class Test { String test; Test(String test) { this.test = test; } } 모든 객체의 조상은 Object고 Object는 equals method를 가지고 있다. 객체를 생성하고 equals에 별도의 @Override 가 없다면 public boolean equals(Object obj) { return (this == obj); } 위와 같이 동작한다. 참조 주소가 같아야 true를 반환하는 equals 이다. String t3..

클래스 레벨 @Builder @Builder public class Test { private String one; private Long two; public Test(Long two){ this.two = two; } } lombok builder는 기본적으로 allArgsConstructor 로 동작한다. 그래서 위 코드에서 @Builder는 one, two를 인자로 받는 생성자를 사용하지만 정의되지 않은 생성자이므로 컴파일 에러가 발생한다. 정의된 건 two를 받는 생성자 뿐이다. public Test build() { return new Test(this.one, this.two); } ( 위 처럼 코드를 만들고 정의되지 않은 생성자로 에러가 발생할 것이다. ) 생성자 레벨 @Builder pu..