코드숨 리액트

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

코드숨 리액트 1주차 회고

5월 2일부터 시작해서 5월 8일까지 코드숨 리액트의 1주차가 끝났다. 1주차 회고를 진행하며 시작하기 전에 했던 다짐 점검, 1주차에서 기억에 남는 부분, 앞으로 이렇게 나아가야겠다라는 자세를 기록해본다. 시작하기 전에 했던 다짐 점검 시작하기 전에 했던 다짐으로 완벽보다 완성, 빨대를 꽂자가 있었다. 완벽보다 완성에서 매일 과제를 진행하며 코드 리뷰 받는 것을 이번 과정의 최우선 목표로 삼았다. 이번 1주차는 어렵지않게 매일 코드를 제출하고 리뷰를 받을 수 있었다. 빨대를 꽂자는 매일 TIL을 작성하여 피드백을 받고, 모던 JavaScript 튜토리얼 스터디를 진행하며 리액트 과정 이외에도 JavaScript 공부를 병행하며, 그외에도 커뮤니티에 올라오는 좋은 정보나 영상이 있으면 수시로 보고 있다...

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 객체를 반환하고, 객체는 진짜 배열을 반환한다는 것이다. ..

TIL - 20220506

모던 JavaScript 튜토리얼에서 5.7 맵과 셋 5.8 위크맵과 위크셋에 대해 공부했다. 후술하겠지만, 모던 JavaScript 튜토리얼 스터디가 따로 있어서, 스터디에서 하지 않았던 내용들을 혼자 공부하면서 혼자 공부할 때는 어떻게 공부하면 좋을까에 대한 생각을 했다. 그래서, 스터디를 주도하시는 윤석님께 물어봤는데, 스터디에서 진행하는 것처럼 개념을 읽어보고 개념에 대한 질문을 만들어본 뒤, 개념을 다 읽고 나서 개념을 보지 않은 채로 질문에 대한 답을 혼자 공부할 때도 하신다고 하셨다. 그렇게 질문을 만들고 개념을 읽지 않으면서 답을 적어보니 개념을 나의 언어로 체화하는 느낌이 들어서, 딱딱하게 느껴졌던 개념이 조금씩 부드럽게 느껴지기 때문에 이해, 암기가 확실히 더 잘되는 것 같았다. 앞으로..

TIL - 20220505

5월 2일부터 5월 4일까지 Fact, Feeling, Finding, Future Action, Feedback으로 파트를 나누어 TIL을 작성하는 5Fs 방식을 사용했다. TIL을 작성하기 시작한 첫 날과 그 다음 날은 작성하는데 큰 어려움을 못느꼈었지만, 셋째 날인 5월 4일은 하루동안 있었던 일을 TIL로 작성할 때, 어려움을 겪어 작성하는 데 오랜 시간이 걸렸다. 가령, 이 내용은 Feeling에 들어가야 하나? Finding에 들어가야 하나? 구분짓기 힘든 문제와 Fact, Future Action, Feedback은 다음과 같이 작성하게 맞는가?와 같은 문제가 있었다. 항상 TIL을 작성하면, 현재 듣고 있는 코드숨 커뮤니티에 공유를 하는데, 이러한 조언을 얻었다. 정곡을 찔렀다라는 표현이 ..