react

CRA: create-react-apptypescript: javascript의 슈퍼셋 언어eslint: 타입스크립트의 문법 에러를 잡아주는 패키지prettire: 에디터 코드 스타일 잡아주는 패키지까먹을까봐 남겨둔다.https://velog.io/@kmlee

최근에는 머티리얼 ui를 이용해서 빨리빨리 만들려고 하고 있다. 컴포넌트도 그냥 갖다 쓰면되고, 약간씩 변경하는건 styles를 이용하면 된다.근데 css 선택자를 사용해야 하는 상황이 발생했다. 도큐먼트에는 해당 항목 설명이 없고(내가 못찾았을지도)...대충 '&'가

아무생각없이 임포트를 하다보면 과 같이 뭘 가져왔는지는 알겠는데, 이게 대체 어디있는걸 가져온건지 모르겠는 난감할 때가 많다.위와같이 설정을 하고, 프로젝트가 위와같이 구성이 되어있다고 한다면, 과 같이 임포트를 할 수 있다. from뒤의 폴더경로를 모두 써줘야하는 귀

onChange=>{} 내부에 이벤트를 각각 구현하고 있었다. 코드 길이도 길어지고, 가독성도 좋지 않은 상태였음.handleChangeForm(...) 이라는 핸들러를 만들고, onChange={} 이벤트 내부에 핸들러 함수 하나만을 이용해서 이벤트를 컨트롤 하게 만

자식 컴포넌트에 from이 있는경우 자식 컴포넌트에서 따로 form data를 관리하려고 해보았다. 그래서 매번 setState로 from data를 관리하고 부모 컴포넌트에서 handler를 내려보내서 콜백을 하는 구조가 되었다. 그렇게 만들고 보니 세상 한심해서 부

전개구문에서 {...props, (props의 프로퍼티)}와 같이 작성해야 한다고 생각했는데 date.startDate가 오류가 있음. 왜 안되는지 한참 고민하다가, 그럼 전개구문을 두 번 빼보자 라고 생각함.props의 date를 전개구문을 이용하여 date 오브젝트

하위 컴포넌트의 상태를 갖고 있는 상위 컴포넌트가 있다. 저번에도 포스팅 했던것 같다. 계속 구현하다보니 뭔가 이상한점이 발견되었다.와 같이 코드를 작성했다. 콜백으로 내려간 someHandler가 SomeComonent에서 상태를 잘 가져오고 있는지 보려고 콘솔을 찍

회사에서 redux를 써야 하는데, redux를 내가 개념도 못잡고 있어서 생존;을 위해서라도 redux를 배워야 했다. 일단 Todo List는 최소한의 기능만 구현하기로 했다. 할일 추가 및 할일 삭제.text input에 글을 작성하고 제출하면 항목이 추가되고,

요구사항 하위 항목이 여러개 있는 datetime range 유효성 검사를 해야한다. 활성화된 항목만 유효성 검사(뒤의 시간이 앞의 시간보다 늦어야 함. 유효성 검사에 실패하면 에러 메시지를 띄운다(submit 불가능))를 한다. main range의 라디오버튼의 a

js cra 프로젝트를 새로 생성하는데 .eslintrc, .jsconfig.js, .prettierrc.json 설정에 애를 먹었다. 프로젝트 셋팅은 언제나 새로워. 할때마다 오래걸려..jsconfig.js 파일 생성 후 아래와 같이 붙여넣는다.아래와 같이 설치해준다

비동기 리퀘스트를 위한 커스텀 훅을 만들어서 사용해봤다.뭐 대충 이렇게 짰던것 같다. 리스트를 렌더링하려고 구현했는데, 리스폰스 받는데 시간이 조금 걸리면 리스트가 제대로 렌더링되지 않는 문제가 발생했다. 그래서 리액트 공식문서를 보다가 커스텀 훅을 이용해 해결할수 있

자바스크립트를 사용한 컴포넌트 합성 예제예제 코드와 다르지만 일단 넘어가자.하지만 타입 스크립트는?props에 타입을 선언해주지 않으면 컴파일이 되지 않는다. 예전에 React.ReactNode라는걸 써본적 있는것 같은데, 그땐 뭔지도 모르고 아무렇게나 썼다. 뭔가 c