React 18 버전에서의 setState 렌더링 최적화 방법

Change Logs 2022/04/02 09:39 : default event 에 관한 잘못된 개념 수정 자바스크립트 이벤트를 사용하면서 Bubbling, Capturing, preventDefault, stopPropagation 의 개념을 기계적으로만 이해하고 로직의 구현만을 위해 구체적인 동작방식을 알고있지 않았다. 구체적인 알고 …

문제 인식 body 의 height 를 100vh 로 놓을 경우, 데스크탑에서는 문제없이 깔끔하게 적용되지만, iOS 모바일 에서는 100vh 가 하단 바까지 확장되어 스크롤이 발생합니다. 이는 사용자 경험이 깔끔하지 못한 문제를 발생시켜서, 하단 바를 제외한 높이를 100vh 로 인식하도록 하는 트릭을 사용하고자 합니다. 급하신 분을 위해 코드로 결론부터 먼저 제시해 드리고 아래에서 설명을 이어나가겠습니다 …

일단은 웹서핑 하시는 비 개발자 여러분을 위한 해결법을 알려 드리겠습니다. 개발자 분께서는 ‘개발자 관점에서의 해결법’ 항목을 읽어주세요. 비 개발자 관점에서의 해결법 Safari 로 웹서핑 하다보면 간혹가다 특정 사이트에서 이상한 명조체 같은 글꼴로 되어있어 어색하고 가독성이 떨어지는 것을 볼 수 있습니다. 이와같이 빨간색 네모로 표시된 …

Jest 왜 쓰지?: 테스팅 라이브러리를 쓰는 본질적인 이유 우리가 보통 이해하고 있는 테스팅 라이브러리를 쓰는 이유는, 단위테스트를 하기 위함입니다. 모듈, 함수에 특정 값을 대입 했을 때 기대한 결과값이 도출되는지, 렌더링된 화면에 내가 원하는 요소, 콘텐츠 등이 들어있는지 등을 확인하기 위해서이죠. expect …

capslock 한영전환 키가 반응속도 느리다고 생각하신 분께 팁을 드리고자 합니다. capslock 키는 반응속도 느린것이 아니고, 언어변환과 대문자입력을 구분하기 위해 capslock 을 누르는 행동을 구분하는것 뿐입니다. keyboard 동작에는 간단히 2가지가 있습니다. 키를 누르는 keydown, 키를 …

줄바꿈 제외 모든 문자를 허용하는 정규식 greedy 방식 .* 라고 하면, 줄바꿈을 제외한 모든 문자에 매칭 된다. 한 줄에만 한정된 것이다. greedy 방식은, 매칭될 수 있는 가장 최대의 길이를 매칭하는 방법이다.(자세한 설명은 생략, non-greedy 와의 차이는 2번째 주제에서 다룸) non-greedy 방식 .*? 라고, ?를 붙이면 non-greedy 방식으로, 매칭될 수 있는 가장 최 …

조인조건에 카운트하고 싶은 값을 명시 OUTER JOIN 할 때 조인조건 ON 다음에 AND 로 다시 꼽사리 껴서 count 조건 주면 된다. OUTER JOIN 에 조인조건 이외의 다른 조건을 줄 시, 그 효과는 일치하는 레코드가 있으면 여과없이 모두 결과레코드에 포함(INNER JOIN과 같음) 일치하는 레코드가 없으면, 빈 값으로라도 나옴(OUTER …

프로그램 항공기 운항 조회 프로그램 실행 화면 항공사와 연결번호를 입력하면, 해당 비행편의 요금, 항공기종, 예약석, 정원을 출력해준다. Selection Screen을 통해 항공사를 검색하면, ALV를 통해 비행편의 정보가 출력된다. 항공사의 디폴트 입력값은 AC로 한다. 구성 컴포넌트 정보