!codesandboxcanvas-laddergame-gph2wq?fontsize=14&hidenavigation=1&theme=dark

Check Box 상태 관리(feat. Set 활용법) 위 글은 Set을 이용한 check상태 관리에 대한 내용이다. 실제로 set과 array의 속도 비교를 해보려고 한다.

이 글의 목적은 리렌더링 최적화이다.예제 코드는 간단하게 여러장의 카드 중에서 한장을 선택하면 배경색이 바뀌는 로직이다.카드 한장을 선택 할때 마다 모든 카드가 리렌더링 되고 있다.예제에선 카드가 6장 밖에 없어 성능상 큰 문제가 없는데개발자로 일하면서 마주치게 될 실

row에서 한가지 옵션을 선택했다면 나머지 row에서는 선택한 옵션을 제외한 리스트가 보이도록 한다.(selected options가 중복된 값을 가질 수 없도록 하기위함)코드에 대한 설명은 주석으로 대체 하겠다.간단한 custom select box를 만들어 보았다.

평소에 테이블을 만들때 <table> 태그 또는 flex를 이용해서 만들었는데 이번엔 grid 기능을 이용해서 테이블을 만들어 보았다.사용해보니 grid-template-columns을 이용해 column의 width를 맞추기가 굉장히 편리했다.요구 기능 명세는

Redux, Mobx같은 전역 상태 관리 라이브러리를 많이 사용하고 있었을 것이다. 해당 라이브러리들은 비동기 작업을 하기 위해선 추가적으로 작성해야하는 코드 양이 늘어난다.배보다 배꼽이 더 큰 상황이 되는 것이다.예로 redux-saga 코드를 작성해 보았다.Reac

https://codesandbox.io/s/fixed-table-dashed-border-crash-zdn66i?file=/src/App.js

위의 string배열, number배열, string+number(string)배열을 sort함수를 이용해 정렬을 해보니결과가 예상한 대로 나오지 않는다. 그 이유는 sort 함수가 문자열 비교이기 때문이다.숫자를 정렬 하기 위해선 위와 같은 방법으로 정렬이 가능하다.

Ref와 DOMRef는 render메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.React로 개발을 하다보면 아래와 같은 ref를 자주 사용할 것이다.그런데 내가 만든 컴포넌트(함수형 컴포넌트)의 ref를 이용하고 싶을 때가 있을 것이

두 개씩 비교 하므로 N-1 의 아이템을 비교 한다.for (let i = 1; i < len; i++) {ex) 배열의 길이가 9이면 최대 8번의 루프가 돈다.(0~len-1, 1~len d이던 N-1을 주의 하도록 하자)버블정렬은 가장 큰 숫자를 뒤로 보낸다.

!codesandboxadmiring-nova-93by2q?fontsize=14&hidenavigation=1&theme=dark

쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부Reference: 모던자바스크립트 쿠키와 document.cookie쿠키는 주로 웹 서버에 의해 만들어 진다.서버가 HTTP 응답 헤더(header)의 Set-

쿠키는 일종의 서버와 클라이언트가 대화하기 위한 수단.브라우저가 서버와 연결이 되었을 때 브라우저에서 자동적으로 쿠키를 생성하고, response 할 때 쿠키를 담아서 보낸다.특정 호스트에서 생성된 쿠키는 이후 모든 요청마다 서버로 전송됨요청 해더의 set-cookie

react-native-svg로 작업을 하는데 `태그에 onPress`를 사용하고 싶었다. 아래의 그림의 동그란 부분을 버튼화 시키고 싶었던 것이다. 이렇게 svg를 다루는 일이 많을 줄 몰랐는데 아이들을 대상으로 하는 앱을 만들고 있어서 하루종일 SVG와 사투를 벌

처음 화면은 파란색 View만 보이는 상황이다. 어떠한 동작이 완료 되어 completed 라는 state가 true가 되면 파란색 View는 fadeOut을 적용해서 사라지게 할것이고, 빨간색 View는 fadeIn을 적용해서 보이게 하려는 시나리오다. ios에