TIL

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를 반환하는 조건문이 있는데 이러한 조건문을 반복적으로 사용할 때, 객체를..

TIL - 20220509

오늘은 코드숨 리액트 과정 2주차로, React, ReactDOM, Component와 Props, 선언형 프로그래밍, React Hooks와 같은 개념에 대해서 공부했다. 강의와 함께 나온 개념들에 대한 질문을 만들었다. 질문에 대한 답을 다음과 같이 적었다. 추가로, 더 정리하면 ReactDOM은 React에서 DOM에 특화된 메서드를 사용할 수 있도록 API를 제공하는 것과 관심사의 분리는 컴퓨터 프로그램을 개개의 관심사를 해결하는 구별된 부분으로 분리하는 디자인 원칙이며, 관심사의 분리를 이용하면 코드를 이해하고 보수하기 쉬워진다. 리액트는 컴포넌트별로 관심사 분리를 통해 재사용성과 확장성을 높여 개발을 쉽게 도와준다는 점이다. 확실히, 개념 공부한 내용을 질문을 만들어보며 대답하는 과정을 거치면..

TIL - 20220508

오늘은 아샬님의 조언을 보고 코드숨 1주차 회고를 작성한 후 코드숨 리액트 강의를 한 번 더 복습하고 강의에서 무슨 일이 있었는지, 무슨 일이 왜 일어났는지 개인적으로 정리를 해보고 제출했던 과제를 폴더 만드는 것부터 시작해서 처음부터 끝까지 작성해보는 시간을 가졌다. 처음부터 작성하는 과정에서 강의에서 배웠던 내용을 안보면서 작성하니 내가 어느 부분을 모르는지 정확하게 알 수 있었던 점이 가장 큰 수확이었다. JSX를 만드는 createElement 함수에서 props와 children을 다루는 부분을 안보고 작성하니 막혔었고 한 번 더 점검하는 시간을 가졌다. 구조 분해 할당과 전달 인수가 빈 객체일 때 {}를 전달해야 하는 점, 전달할 때, ||를 이용하여 truthy하게 표현할 수 있는 점. ch..

TIL - 20220507

오늘은 모던 자바스크립트 튜토리얼에서 5.9 Object.keys, values, entries 와 5.10 구조 분해 할당에 대해 공부했다. 5.9에선 맵과 객체에서 keys, values, entries와 같은 메서드를 사용할 때 주의해야 할 차이점이 존재한다는 것이 이 장에서 가장 기억에 남는다. 맵은 keys(), values(), entries()와 같이 사용해도 괜찮지만, 객체는 Object.keys()와 같이 사용하면 안된다. keys, values, entries와 같은 메서드 모두 keys(obj), values(obj), entries(obj)처럼 객체를 매개 변수로 넣어줘야하며, 이런 메서드를 사용할 때, 맵은 iterable 객체를 반환하고, 객체는 진짜 배열을 반환한다는 것이다. ..