코드숨 리액트 8기

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에 빈 ..

TIL - 20220511 (부제: React에서 Enter입력 처리하기)

오늘도 제출한 과제에 대한 피드백을 진행하며 다음과 같은 피드백을 받게 됐다. 피드백을 진행하며 공부한 내용을 정리하고자 한다. 피드백을 본 다음에 바로 든 생각은 button의 type을 submit으로 바꾸면 끝나는 문제아닌가? 라고 생각했다. 물론 아니었다. 구글링을 통해 알아본 결과, input창에서 enter 키를 입력했을 때, 입력 버튼을 눌렀을 때 실행하는 함수를 호출해주면 해결되는 문제였다. 그런데, input창에서 enter 키를 누르면 uncaught typeerror: cannot read properties of undefined (reading 'preventdefault')와 같은 에러를 만나게 되었다. 원인은 handleAddTodoClick의 코드가 다음과 같았기 때문이다. ..

TIL - 20220510

오늘은 제출한 과제에 대한 피드백을 진행했다. 피드백 중에서 기억에 남는 피드백을 반복하지 않기 위해 복습차 적어보려 한다. 나름대로 널리 쓰이는 의미가 있는 단어를 다른 의미로 사용하면 안된다 - 이번 과제에서 할 일들의 목록을 todoList라는 이름의 변수로 만들었는데, 프로그래머에게 List는 자료형 List라는 의미가 있으므로 변수가 실제 List가 아니라면, 변수 이름에 List를 써선 안 된다. 생각지도 못한 부분인데 앞으로 변수를 선언할 때 이 변수의 이름이 널리 쓰이는 의미가 따로 존재하는지 꼭 한 번 더 생각하는 과정을 거쳐야겠다. 유틸함수를 만들어보자 - 예를 들어 설명하면, 객체 안에 아무것도 없으면 false를 반환하는 조건문이 있는데 이러한 조건문을 반복적으로 사용할 때, 객체를..