e.target 대신에 e.currentTarget을 사용하자

주니어 개발자로서 원티드 프리온보딩 코스는 많은 의미를 담고 있는 이벤트라고 생각한다.이벤트를 발생시킬 때에는 어떤 목적이야 하는지가 분명해야 하고, 그 목적에 맞게 결과가 도출이 되어야 한다. 뉴스에서는 종종 개발자가 부족한 시대가 찾아왔다고 한다. 일반인이 보았을

위에 코드는 하나의 의존성 배열안에 var와 varB 동시에 들어가 있기 때문에 구현하고자하는 의도와 다르게 훅이 동작할 수 있다.리액트 훅을 사용할 때 복수의 useEffect 함수를 사용할 수 있지만 클린한 코드의 관점에서 함수는 한 가지 목적을 가지고 있어야 한다

상태 값 변경 함수가 2번 쓰였기 때문에 클릭을 할 때 +2가 한 번에 된다고 생각했다. ex) 0 => 2 => 4 => 6 => ....내가 예상했던 거와는 달리 클릭을 할 때 마다 +1이 된다.ex) 1 => 2 => 3 => 4 => ....상태 값 변경 함수

List, Map, Set 의 개념을 어느정도 알고 있지만 말로는 표현 못한 적이 있어 정리를 해보았다!리스트는 배열이 가지고 있는 인덱스라는 장점을 버리는 대신 빈틈없는 데이터의 적재라는 장점을 취한 데이터 스트럭쳐이다.아래와 같은 데이터가 있을 때 4번째 엘리먼트인

얕은 복사는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값을 전달하여 한 데이터를 공유한다. 즉 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사한다느 의미이다.user.name === user2.name false가 나오는 이

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는 고유값을 의미한다.key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별 할 수 있는 문자열을 사용하고 대부분의 경우 데이터의 ID를 key로 사용한다

자바스크립트 객체에는 \[\[Prototype]] 이라는 내부 프로퍼티가 있고, 다른 객체를 참조하는 레퍼런스로 사용한다.객체에서 프로퍼티를 탐색할 때 객체 내에 프로퍼티가 존재하지 않으면 undefined를 출력하고 끝나는게 아니라 \[\[Prototype]] 참조를

1. JWT란? JSON Web Token은 웹표준으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 방식으로 정보를 안전성 있게 전달해주는 것을 의미힌다. 장점 수많은 프로그래밍 언어에서 지원된다. JWT는 필요한 모든 정보(토큰에 대한 기본정보, 전달

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다.함수 outer 내에서 내부함수 inner가 선언되고 호출되었다. 이때 내부함수 inner는 자신을 포함하고 있는 외부함수 outer의 변수 x에 접근할 수 있다. 이는 함수 inner가 함수 outer

요청이 들어온 순서에 맞게 하나씩 처리하는 방식이고 순서에 맞춰 진행되는 장점이 있지만, 여러 가지 요청을 동시에 처리할 수 없다.하나의 요청에 따른 응답을 즉시 처리하지 않아도, 그 대기 시간동안 또 다른 요청에 대해 처리 가능한 방식이고 여러 개의 요청을 동시에 처

서버 측 렌더링페이지가 클라이언트 측에 도달하면 완전히 렌더링서버 측이 페이지를 완전히 렌더링 한 후 서버에서 클라이언트로 보냄페이지 콘텐츠에 데이터베이스의 데이터가 필요한 경우 서버는 이를 수행 한 다음 데이터를 완전히 렌더링 된 페이지로 렌더링 한 다음 클라이언트로

호준이는 아르바이트로 영어 학원에서 단어 시험지를 채점하는 일을 하고 있다. 호준이가 일하는 학원은 매번 1위부터 3위까지의 학생에게 상으로 사탕을 준다. 그런데 오늘은 마침 사탕이 다 떨어져서 호준이가 채점을 하고 점수를 보내면, 당신이 아이들의 숫자만큼 사탕을 사러

자원의 이름으로 구분하여 해당 자원의 정보를 주고 받는 것을 의미한다.DB의 학생 정보가 자원일 때, 'students'를 자원의 표현으로 정한다.데이터가 요청되어지는 시점에서 자원의 정보를 전달JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다.HTTP

1. 비즈니스 로직과 상태값의 유무 재사용성이 좋은 컴포넌트 정의 비즈니스 로직이 없다. 상태값이 없다. 단 마우스 오버와 같은 UI효과를 위한 상태값은 제외

아토믹 디자인은 디자인 시스템을 만드는 하나의 방법론으로서 5개의 구분된 단계가 있다.원자는 물질의 기본 빌딩 블록이다. 웹 인터페이스에 적용되며 원자는 폼의 텍스트 레이블, 인풋필드 혹은 버튼과 같은 HTML의 태그이다.원자들을 서로 결합하여 그룹을 만들면 분자들은

가끔씩 DOM을 직접 선택해야 하는 상황이 발생 할 때도 있다. 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있는데, 그럴 때 리액트에서 사용하는 것이 useR

위 코드는 input에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input값이 reset되도록 구현한 것이다.input의 onChange 이벤트를 사용히고 이벤트에 등록하는 함수에는 이벤트 객체e를 파라미터로 받아와서 사용 할 수 있는데 이 객체의 e

일반적인 React 애플리케이션에서 데이터는 부모로부터 자식에게 props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다. 그래서 context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨

제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.위 함수는 제네릭 기본 문법이 적용된 형태이고 함수를 호출할 때 마다 함수 안에서 사용할 타입을 넘겨줄 수 있다. 위 코드는 인자를 하나 넘겨 받아 반환해주는 함수이다. 이 함수의 인자와 변환 값은 모두