평소에 테이블을 만들때 <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을 주의 하도록 하자)버블정렬은 가장 큰 숫자를 뒤로 보낸다.

쿠키는 브라우저에 저장되는 작은 크기의 문자열로, 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에

이번에 맡은 일 중에 아래와 같은 carousel을 만들어야 했다.사실 캐러셀은 처음 react를 접했을때나 지금이나 수 많은 라이브러리들이 존재하는데,요즘 따라 react-native를 하면서 라이브러리들을 찾아보면 단지 RN 기본 API에 스타일 조금 입히고함수 몇

react-native 로 개발중에 생년월일을 년도, 월, 일 각각 Picker를 이용해야 하는 경우에 없는 날짜(ex: 2021-02-31)에 대해서 유효성 검사를 해야하는데 어떻게 해야 할까 생각해봤다. 여러 Date-Picker 같은 경우에 애초에 있는 날짜만 가

react native로 커스텀폰트 적용중에안드로이드 TextInput 에서 글자 입력 시 폰트가 적용되지 않는 버그가 발견되었다.해당 버그는 react-native GitHub에서 동일한 오류를 발견해서 해결을 했다.

https://codedaily.io/tutorials/Create-a-Flip-Card-Animation-with-React-Native

무료 카드 덱 이미지