Don’t worry about failures

이벤트 캡처링 & 버블링 이벤트 등록 & 해제 이벤트 위임 방식 이번 스터디는 자바스크립트 이벤트 관리이다. 부끄럽게도 이벤트에 대한 관리를 생각해본적이 많이 없다. 이 주제에 대해 고민해본 적도 없었다. 버블링 우선, 버블링에 대해 살펴보겠다. 버블링은 내부 태그에 이벤트가 걸려오면 상위 태그로 전파되는 현상을 버블링이라고 한다. FORM DIV P 를 클릭했을 때 1. p 2. div 3. form 순으로 이벤트가 일어난다. 버블링 중단 이러한 버블링을 중단하는 함수도 제공한다. event.stopPropagation(), event.stopImmediatePropagation() FORM DIV P - event.stopPropagation() 위와 동일한 코드이지만, p 태그 내에 event.st..

처음 리액트를 접하면서, 가장 당황했던 부분이 리렌더링이다. 변수를 새롭게 할당해줄 때마다 해당 컴포넌트가 리렌더링되고, 상태관리를 제대로 못해주게되면 모든 컴포넌트가 리렌더링이 발생되는 상황이 생길 수 있다. angular와 다른 경험이라 매우 당황했다. 상태를 수정할 때 이러한 경험을 하지 못했기 때문에 더욱 크게 다가왔다. 이 생각은 많은 사람들이 다루었고, 불필요한 곳에서 리렌더링이 발생되지 않도록, 최적화를 많이 시킨다고한다. 이를 더해 불변성을 유지해주고, 최적화를 도와주는 라이브러리를 도입하여 개발의 편의를 더해주고 있다. ex) immer, immutable (앵귤러에서도 사실 이런 이슈가 있을 수도 있지만, 내가 모르는 것일수도,,) 그렇담 왜 불변성을 추구하고자할까 우선 이에 앞서 자바..

react 들어가기 전에,, React의 이해 중 기본은 Virtual DOM의 이해다. 1. DOM 2. Virtual DOM DOM Virtual DOM을 이해하기 전에 DOM에 대해 살펴보고 들어가겠다. DOM ( Document Object Model ) : 객체지향모델로써 구조화된 문서를 표현하는 형식. XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법(API)을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현. DOM의 종류 1. Core DOM: 모든 문서 타입을 위한 DOM 모델 2. HTML DOM: HTML 문서를 위한 DOM 모델 3. XML DOM: X..

javascript의 가장 기초인 this, bind, call, apply에 대해,, 1. this this는 ' 나를 호출한 애 ' 혹은 ' 처음 실행시킨 곳' 라고 보면 좋을거같다. global에서 console.log(this)를 확인해보면 window{} 결과가 도출될 것이다. 즉 window에서 console.log가 실행되고 호출한 애는 Window가 된것이다. 다음의 경우는 this가 무엇을 가르칠까 const obj = { a: function() { console.log(this) } }; obj.a(); 실행된 함수는 a라는 함수이다. 이 함수를 호출한 애는 누구? obj이다. 따라서 this는 obj가 될 것이다. 하지만, const a2 = obj.a; a2(); 이와 같이 실행되..

현재 회사에서 주로 사용되는 프레임 워크로는 Angular를 사용중이다. 왜 React에 들어가는가? 프런트 엔드 개발자의 생태계가 리액트로 기울어서? 가장 큰 이유이기도하다. 프런트 엔드 개발자 대다수에게 라이브러리 혹은 프레임워크 어떤거를 사용하세요? 라고 물어보면 대부분이 리액트이고 간혹 뷰 또는 앵귤러라 말한다. 이러한 생태계는 리액트가 아니면 안되겠다는 생각까지도 들게 만들고 있다. 언젠가는 다른 회사로 이직 시도를 할 것이고, 그 시도 사이에 하나의 벽이 될 것이라는 생각도 많이 들었다. 그 벽을 피하고자 하는게 가장 큰 이유라 생각이든다. 리액트 경험해보고 싶어서? 단순히 생태계만으로 판단하기에는 유행만 따르는 개발자로 생각이들었다. 내가 어떤 프레임워크, 라이브러리를 사용하든 그 부분에 있..

쿠키 - 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각. - 쿠키를 통해 상태가 없는 HTTP 프로토콜에서 상태 정보를 기억 => 사용자의 상태 관리 - 모든 요청 마다 쿠키가 함께 전송되기 때문에, 성능이 떨어지는 원인이 될 수 있다.. - Set-Cookie HTTP 응답 헤더는 서버로부터 사용자 에이전트로 전송. 세션 쿠키 && 영속적인 쿠키 세션 쿠키 - 현재 세션이 끝날 때 삭제. 영속적 쿠키 - Expires 속성에 명시된 날짜에 삭제되거나, Max-Age 속성에 명시된 기간 이후에 삭제. 단점 - 4KB의 데이터 저장 제한 - XSS 공격 취약 -> 브라우저에서 악성 스크립트를 실행하는 공격, document.cookie를 통해 쿠키에 접근. => HttpOnly 속성 : 자바스크..

개발자 2년차가 되어가는 시점에서.. 연차는 쌓여가지만, 프런트엔드 개발자로써 전문성은 쌓이지 않는다는 생각이 종종 든다. 일을 하면서 배우는 것도 많지만, 기초 미흡, 변하지 않는 로직, 생각이 문제가 된다고 생각한다. 이 문제를 어떻게 해결해야될가 많은 고민을 하고, 주변에 도움을 구해봤다. 인강도 봐보고, 유튜브도 많이 보면서 공부를 했지만, 면접 질문을 기반으로 공부를 해보는 것 또한, 많은 도움이 된다고 추천을 받았다. 링크도 추천 받아 아래의 블로그 우선적으로 살펴 보면서, 이어나갈까한다. joshua1988.github.io/web-development/interview/frontend-questions/

더 깔끔한 UI와 새롭게 배우기 시작한 react를 정리를 하고자 블로그를 tstory로 변경하게 되었다.