분류 전체보기451 CODESOOM: REACT -3 한 것 : 컴퍼넌트 마다 테스트를 작성했다. fireEvent와 expect를 사용했다. fireEvent.click(getByText('추가')); expect(handleClickAddTask).toBeCalled(); 예를 들어서 이런 코드가 있다고 치면 이 코드는 '추가' 버튼을 누르면 expect에서 결과 값을 불러들어온다는 의미이다. 이런 의미가 아니라면 댓글 달아주세요,, 배운 것 : TDD cycle이라는 것을 배웠다. TDD cycle의 순서로는 RED - GREEN - REFACTORING 이렇게 세 단계가 있다. 우선, RED는 실패하는 테스트들을 확인 할 수 있다. 이때, 에러 메시지를 먼저 확인하는 것이 중요하다. GREEN은 통과, REFACTORING은 코드들을 올바르게 되도록.. 2021. 2. 7. CODESOOM: REACT -2 한 것 : 리액트 컴포넌트 분리 버튼이 클릭 되었을 때 클릭 이벤트가 실행되도록 구현 라이브러리의 임포트와 로컬 파일 임포트 구분 배운 것 : if를 사용해서 리턴하는 법을 배웠다. vscode에도 에러가 없을때 웹에서 에러가 있을때 npm run test:e2e를 이용해서 좀 더 자세하게 에러난 부분을 확인 할 수 있는 것을 알게 되었다. function handleClick(value) { setState({ count: count + value, }); } 이 부분은 원래 value 대신에 increase를 썼었는데 +랑 의도가 중복 된다구 하셔서 수정한 것! 이렇게 사소한 것들도 신경 써줘야되는구나 생각했다. 리액트 훅이라는 것도 첨 배운거고 Input을 할때 change는 이벤트를 돌려준다는 것.. 2021. 1. 31. CODESOOM: REACT -1 한 것 : let 대신 const 사용 배열에서 map 사용 render 함수를 내부의 변수로만 동작하게끔 구현 계산기를 만들면서 누르는 값이 없을 경우 누적 값을 보여주는 기능 구현 npm과 node.js라는 개념을 배움 느낀 것 : 공식 문서들을 대충 훑어보았다가 중요성을 깨닫고 다시 정독하면서 모르는 개념을 정리했다. 이러한 과정에서 많이 부족함을 느꼈고 더 많은 시간을 투자해서 공부해야겠다고 다짐했다. 아무래도 기본 지식이 없어서 그런지 어느것부터 손을 대야 할지 막막했다. 계산기 과제를 하고 난 후에는 render와 배열 함수 사용 시 이해가 더 빨라졌다. 이해를 하면서 기능들을 구현하다 보니까 더 많이 공부해서 코드를 짜야겠다는 생각이 들었다. ESlint의 사용 역시 처음이었는데 간편하게 코.. 2021. 1. 25. 이전 1 ··· 110 111 112 113 다음