코드숨 리액트

TIL - 20220518

코드숨 과제에 대해 다음과 같은 리뷰를 받았다. 사실, 처음에는 리뷰가 무슨 의미인지 이해가 잘 안 됐다. 테스트를 진행하는 거니까 테스트 이름은 ~되어야 한다, ~해야 한다가 맞지 않나?라고 생각했다. 그래서 계속 생각해보다가 BDD를 다시 떠올리니 무슨 말인지 이해가 됐다. BDD는 코드의 행동을 설명하는 테스트 코드를 작성한다. 또한, BDD는 테스트 대상을 주인공으로 설정하여 행동을 설명하는데 적합한 방식이니까 상황으로 설명하면 테스트 대상은 수동적이게 되므로 BDD는 테스트 대상을 주인공으로 능동적이게 작성해야 하는 것이다. 앞으로, BDD를 작성할 때, 어떤 상황이 벌어지는지, 어떤 변화가 일어나는지에 더 주목하여 능동적으로 작성해야겠다. 이러한 리뷰도 받았다. describe는 설명할 테스트..

TIL - 20220517

오늘은 코드숨 리액트 3주차 과정 피드백과 React Testing Library에 대해 공부했다. 3주차 과제를 진행하며, React는 UI 요소들을 나누어 컴포넌트로 다루고 컴포넌트 각각의 요소에 테스트를 진행하면 컴포넌트를 한 곳에 모아 둔 App 컴포넌트는 테스트를 할 필요가 없지 않을까?라고 생각해서 이 질문을 윤석 님께 드렸다. 10초 움짤이 내 질문에 대한 명쾌한 답변을 해줄 수 있었다. 그렇다. 위 움짤과 같이 두 잠금 기능은 정상 작동을 하지만 통합 테스트를 하면 엉망이 될 수 있는 결과가 생길 수 있다. 그러니, 각 기능에 대한 테스트도 진행해야 하지만 통합 테스트도 해야 함을 반드시 명심해야겠다. 다음으로, 과제를 진행하며 testing library에서 getByRole, getBy..

TIL - 20220516 (부제: TDD와 BDD(프로게이머 아님 ㅎ))

오늘은 코드숨 리액트 과정의 3주차로 풍문으로만 들었던 TDD에 처음 접해보게 되었다! TDD를 적기에 앞서 Jest와 react-testing-library에 대해 얘기해보자면 Jest는 자바스크립트 테스팅 프레임워크로, 간단한 설정만으로도 테스트할 수 있고 Coverage와 같은 기능도 제공하며 mocking과 같은 기능을 이용하여 테스트를 쉽게 할 수 있는 프레임워크다. React-testing-library는 DOM을 이용하여 사용자가 실제 이용하는 것처럼 테스트할 수 있는 라이브러리다. TDD는 다음과 같은 단계로 이루어져있다. RED - 테스트를 적는 단계이다. 코드를 구현하지 않고 테스트를 적는 것이기 때문에 실패하는 것이 당연하다. GREEN - 테스트를 통과하는 코드를 적는 단계다. 테스..

TIL - 20220515

글또 7기 프론트엔드 d조분들과 오프라인 만남을 가졌다. E 100%의 외향적인 성격을 가졌지만, 대외활동을 한 적이 없었고 이번에 처음으로 친척이 아닌 윗사람을 오프라인으로 만나는 상당히 기념비적인 날이어서 많이 떨렸다. 결과적으로, 편하게 많은 얘기들을 나눌 수 있어서 너무나 좋았다. 특히, 얘기를 나누며 평상시에 갖고 있었던 졸업장이 과연 중요할까, 4학년이라는 1년 쓰는 것보다 개발자로 경력 1년 더 쌓는 것이 더 낫지 않겠느냐는 고민도 대학생만이 누릴 수 있는 혜택이 찾아보면 무조건 있으니까 그런 혜택을을 누리며 1년 사용하는 것도 나쁘지 않다는 말씀을 해주셨고 업계 선배님들이 해주신 말씀이기에 졸업하는 방향으로 결정을 지을 수 있었기에 후련해서 기분이 좋았다. 군 복무를 마치고 4학년을 하기 ..

코드숨 리액트 2주차 회고

5월 9일부터 5월 15일까지 코드숨 리액트의 2주차가 끝났다. 2주차 회고를 진행하며 시작하기 전에 했던 다짐 점검, 2주차에서 기억에 남는 부분, 2주차의 피드백, 앞으로는 이렇게 나아가자를 정리한다. 시작하기 전에 했던 다짐 점검 완벽보다 완성, 완벽보다 완성은 과제를 진행하며 느끼지만, 내 수준에서 완벽이란 존재하지 않다고 생각한다. 항상, 이 정도면 피드백할 것이 없을 거 같은데?라고 생각해도 보완해야 할 점이 항상 존재했다. 그래서, 완벽을 목표로 하기보다 이전에 했던 실수부터 반복하지 말자는 마인드를 가져야겠다고 생각했다. 이전에 했던 실수를 계속해서 줄여나가면 언젠가 완벽함에 도달할 수 있을 것 같다. 행복한 사람은 거울을 보며 나는 행복해라고 말하지 않는 것처럼, 완벽함에 무심한 채로 살..

TIL - 20220514

매주마다 이번 주 수업의 내용을 잘 이해하고 있는지 확인하기 위해서 과제를 수업에서 작성한 코드를 바탕으로 시작하는 것이 아닌 npm init부터 시작하며 다시 작성해보는 시간을 가진다. 이번 주에는 작성하면서 다음과 같은 eslint 에러를 만났다. 해당 코드: https://github.com/jaeyooniverse/breakable-toy GitHub - jaeyooniverse/breakable-toy Contribute to jaeyooniverse/breakable-toy development by creating an account on GitHub. github.com 에러가 나서 기존에 작성한 코드와 비교를 했는데(사실, TIL을 작성하는 시점에서 돌이켜보면 IDE가 알려주는 링크를 먼..

TIL - 20220513 (부제: webpack 설정으로 import React from 'react' 지우기)

오늘 다음과 같은 피드백을 받았다. 이전에는 import React from 'react'를 반드시 써야 했지만 React v17부터 import React from 'react'를 사용하지 않아도 된다. 만약에, npm init부터 시작해서 babel 설정을 직접 했다면 babel.config를 다음과 같이 수정해야 한다. module.exports = { ... presets: [ [ '@babel/preset-react', { runtime: 'automatic', }, ], ], } 다음과 같이 presets을 추가해주면 jsx 파일을 만들 때마다 import React from 'react'를 사용하지 않아도 된다. 앞으로 직접 npm init을 하고 webpack과 babel을 손수 사용할 때..

TIL - 20220512

20220511일자 TIL에 다음과 같은 질문이 올라왔다. 필자는 onKeyPress(알아보다가 이제 onKeyPress를 지원하지 않기 때문에 onKeyDown을 사용한다는 사실도 배웠다)를 이용해 Enter 키를 입력할 경우 버튼을 클릭했을 때 호출하는 함수를 호출하도록 진행했었는데, Enter 키를 처리하는 또 다른 방법이 존재한다! 그 방법은 다음과 같다. props로 물려 받은 onSubmit 함수는 어제자 onClick 함수와 똑같은 코드를 넣어도 동작한다! 대신, input과 button을 form 태그로 감싸고, button의 type을 submit으로 해야 하며, submit 이벤트는 페이지를 새로고침 하기 때문에 코드의 handleSubmit 함수(지금 보니 함수 뒤 return에 빈 ..