본문 바로가기

전체 글148

2022.06.16 TIL ( 웹팩이란 ) 🍄 웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 🍄 모듈 번들러: 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 🍄 모듈이란? 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다. // 📁 math.js function sum(a, b) { return a + b; } function substract(a, b) { return a - b; } const PI = 3.14; export { sum, substract, PI }.. 2022. 6. 16.
2022.06.14 TIL ( 이벤트 전파 ) 🍄 이벤트 전파 브라우저에서 요소에 대한 event가 발생하면 해당 요소에 할당된 handler가 동작하게 됩니다. handler가 동작하면서 Bubbling과 Capturing이 발생하게 됩니다. 🍄 버블링 🌱 bubbling은 특정 요소에서 event가 발생했을 때 상위 요소로 event가 전파되는 것을 의미합니다. 🌱 HTML요소는 트리 형식으로 랜딩페이지에서 가 최상위 요소가 됩니다. 🌱 그 밑으로 자식 요소들이 있게 됩니다. 🌱 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 뜻합니다. 캡처링 🌱 bubbling은 특정 요소에서 event가 발생했을 때 하위 요소로 event가 전파되는 것을 의미합니다. 🌱 즉, 이벤트가 발생한 element부터 자식들에게 순차적으로 이벤.. 2022. 6. 14.
2022.06.13 TIL ( 브라우저가 렌더링 되는 과정 ) 🍄 브라우저가 렌더링 되는 과정 1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다. 2. 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌더 트리를 생성한다. 3. 브라우저 JS 엔진은 받아온 JS를 파싱해 AST를 생성하고, 바이트코드로 변환해 실행한다. 4. 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다. 5. 화면에 HTML요소를 페인팅한다. STEP 1. 요청과 응답 👉 브라우저는 우선 필요한 리소스(HTML, CSS, JS, 이미지, 폰트..)를 서버에 요청하고, 응답으로 받아와야 한다. 브라우저에 있는 주소창이 그 역할을 한다. 주소창에 URL을 입력하고 엔터.. 2022. 6. 13.
2022.06.12 TIL ( 프로토타입 ) 🍄 프로토타입의 이해 자바스크립트는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다. 프로토타입은 객체를 참조하는 prototype 속성과 객체 멤버인 proto속성이 참조하는 숨은 링크가 있습니다. 🍄 상속, 프로토타입 prototype 👩‍💻 콘솔창에 있는👉__proto__ 이것을 프로토타입이라고 한다. 👩‍💻 proto 는 생성된 객체(new) 또는 json 객체에 존재한다. 👩‍💻 즉, 상위 객체를 나타내는 속성이다.. 2022. 6. 12.
[항해99 96일차] 2022.06.10 TIL (항해99 수료 후기 ) 오눌은 항해 99를 수료하는날이다 ~! 3월초에는 이날이 올까싶었지만, 놀랍게도 엄청 금방와버렸다 ! 🍄 항해를 통해 얻은 것들.. 96일동안 많은 것을 배웠다. 항해99를 통해 어떻게 구글링하는지 ..를 나 스스로 깨닫고, 강의에 의존한 공부법이 아닌 자기주도적인 공부방법을 익힐 수 있었던 시간인 것 같다 !!! 무엇보다도 좋은 동료들을 얻은 것 같다 !!!!!! 🥹 짜짠..나의 누적시간..ㅎㅎ 밤을 샌적은 ,,두 세번 정도지만 그 당시엔 밤을 샐 정도로 몰입했고, 그만큼 프로젝트를 완성하고 싶었다. 항해99를 통해 많은 프로젝트를 했었는데, 포기하지 않고 매번 제출을 잘했었다. ㅎ_ㅎ 내가 이렇게 몰두해서 공부를 할 수 있는 사람이었다는 사실을 알게 해줬다. 월화수목금토 아침9시부터 저녁9시 ㅎㅎ 맨.. 2022. 6. 10.
[항해99 95일차] 2022.06.09 TIL (모의면접 준비 ) 오늘은 모의 면접 데이다 !! 8시에 있는 모의 면접을 위해..1분 자기소개를 준비해야겠다 ~! 리액트 쿼리 ? 리덕스 ? 상태관리 ? 머릿속에서 아직 제대로 정리가 되지 않았다 !!! 🍄 Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요. 🌱 전역상태관리툴 리액트 쿼리 - 👩‍💻 React Query의 기능을 간단하게 요약하여 정리해보면 다음과 같습니다. 클라이언트에서 서버 데이터의 캐시를 관리합니다. loading, error state를 관리합니다. pagination, infinite scroll도 쉽게 처리할 수 있도록 지원합니다. prefetching을 쉽게 처리할 수 있도록 지원합니다. error가 발생할 경우 자동으로 재시도합니다. request가 성공하거나 실패했을 .. 2022. 6. 9.

티스토리툴바