안녕하세요 HP 입니다 :) 오늘은 React ErrorBoundary공식 문서를 활용하여 프론트엔드에서 에러 핸들링을 하는 방식에 대해서 얘기해보겠습니다. 📚 개념 리액트에서는 ErrorBoundary를 아래와 같이 설명하고 있습니다. 자바스크립트 에러가 전체

오늘은 지난 포스팅에 연장선인 이벤트 위임( event delegation )에 대해서 공부해보겠습니다.이벤트 위임이란 사용자의 액션에 의해 이벤트 발생 시 이벤트 버블링에 의해 document 레벨까지 버블링 되어 올라가는데 이 때문에 자식 엘리먼트에서 발생하는 이벤

안녕하세요 hp입니다 :) 오늘은 이벤트 캡처링과 버블링에 대해서 공부해보겠습니다. 📚 개념 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는

안녕하세요 hp입니다 :) 오늘은 브라우저 저장소 역할을 하는 Storage와 Cookie에 대해 알아보겠습니다. 📚 개념 먼저 Cookie에 대해서 알아보겠습니다. Cookie는 브라우저에 저장되는 작은 크기의 문자열 입니다. Cookie는 아래와 같은 특징이

안녕하세요 hp입니다 :) 오늘은 자바스크립트의 중요한 개념중의 하나인 클로저에 대해서 공부해보겠습니다. 📚 개념 클로저를 이해하기에 앞서 먼저 Lexical scoping에 대해서 알아보겠습니다. Lexical scoping 위에 예제는 MDN에 나와있는 Le

오늘은 리액트에서 사용하는 virtual DOM에 대해서 알아보겠습니다. 먼저 DOM에 대해서 알아보겠습니다. DOM은 Document Object Model로써 브라우저가 HTML 문서를 해석하여 화면에 보여줄때 해석하는 과정에서 브라우저가 HTML을 트리 형태로 구

오늘은 리액트 컴포넌트의 생명주기에 대해서 공부해보도록 하겠습니다.먼저 마운트될 때 발생하는 생명주기에 대해서 알아보겠습니다. constructorgetDerivedStateFromProps ( 일반 ❌ )rendercomponentDidMountconstructorc

안녕하세요 hp입니다 :) 오늘은 면접 질문에도 자주 나오는 브라우저 렌더링 과정에 대해서 공부해보도록 하겠습니다. 📚 개념 브라우저의 기본 구조 먼저 브라우저의 기본 구조에 대해서 알아보겠습니다. 사용자 인터페이스 : 주소표시줄 , 이전/다음 버튼 , 홈버튼,

안녕하세요 hp입니다 :) 오늘은 자바스크립트의 호이스팅에 대해서 공부해보겠습니다. 📚 개념 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 개념만 봐서는 이해가 어려울 수 있으니 아래 예시를 통해 살펴보겠습니다.

최근에 진행한 프로젝트에서 axios를 모듈화해서 사용한 적이 있는데요 그때 모두가 통일화하지 않아서 마지막에 배포할 때 모든 요청주소를 바꿔줘야 하는 번거로움이 있었는데요그래서 오늘은 axios를 모듈화하는 방법을 알아보도록 하겠습니다. 만일 axios가 헷갈리신다면

오늘은 저번 프로젝트에서는 JS를 이용하여 ESLint와 Prettier를 설정해봤다면 오늘은 TS를 이용해서 설정하는 방법에 대해서 알아보겠습니다. 지난 포스팅에 자세하게 나와있기 때문에 중복되는 부분은 최대한 줄여서 작성하도록 하겠습니다.지난 포스팅에서 Lint와

📚 개념 Props Drilling이란 props를 통해 하위 컴포넌트로 data를 넘겨줄때 3~5개 정도의 컴포넌트라면 관리하기에 어렵지 않지만 10개 20개 30개 .. 전달해야하는 컴포넌트들의 갯수가 많아질수록 유지보수할때의 문제가 생기는 것을 말한다. 아래

안녕하세요 hp입니다 :) 오늘부터 2주간 프로젝트를 진행하게 됐는데 백엔드 코치님께서 코딩 컨벤션에 대해서 고민해봤으면 좋겠다는 피드백을 받아 코드의 가독성을 높여주고 일관된 코딩 스타일을 위해 ESLint&Prettier에 대해 공부해보겠습니다. 📚 개념 Pre

안녕하세요 hp입니다 :) 오늘은 저번 포스팅에 이어서 단축 평가 논리에 대해서 정리해보겠습니다. 📚 개념 단축 평가 논리 연산은 논리 연산자 ( || , && )를 사용하여 값을 평가하는 방법을 말합니다. 먼저 논리곱(&&)을 통한 단축 평가 방식을 살펴보겠습니

오늘은 자바스크립트에 Truthy와 Falsy에 대해서 간단하게 정리해보겠습니다. 먼저 Falsy 부터 알아보겠습니다. Falsy란 거짓으로 평가되는 값을 말합니다. 즉 , 제어문의 조건식과 같이 불리언 값으로 평가되어야 하는 문맥에서 false값으로 평가되는 것을 말

안녕하세요 hp입니다:) 오늘은 자바스크립트에서 가장 중요하고 면접에서도 많은 질문이 나오는 this에 대해서 공부해보겠습니다. 📚 개념 자바스크립트에서 this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. this는 함수 호

안녕하세요 hp입니다 :) 오늘은 Axios에 사용방법에 대해서 알아보도록 하겠습니다. 📚 개념 axios란 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리입니다. 쉽게 말해서 백엔드와 프론트엔드 간 통신

오늘은 엘리스에서 배운 DOM을 주제로 여러가지 DOM에 접근하는 방법과 제어하는 방법을 표로 정리해 보도록 하겠습니다. 먼저 DOM에 접근하는 다양한 방법에 대해 소개해드리도록 하겠습니다. 아래의 메서드에 접근하기에 앞서 모든 메서드들은 Document 객체에 접근해

안녕하세요 hp입니다 :) 오늘은 생활코딩님의 강의영상을 바탕으로 CSS 마진 겹침 현상에 대해서 알아보도록 하겠습니다. 📚 개념 📌 참고 생활코딩 마진겹침 강의 영상

저는 최근에 프론트엔드 관련하여 많은 교육들을 찾아 보았고 패스트캠퍼스 , 엘리스 SW 엔지니어 트랙이라는 교육을 알게되어서 지원해 합격하게 되었고 그 중 엘리스 트랙의 코치진님들과 교육 과정이 맘에 들어 교육을 듣게 되었습니다. 앞으로 올라오는 포스팅의 대부분의 글들