Today Hailie Learned

강의자 : 모모 Heli Aaron kakaopay software engineer 카카오페이와 카카오뱅크의 차이점 카카오페이는 법적으로 금융회사가 아니다. 서비스 개발 조직과 플랫폼 개발 조직의 차이 공부는 하는데 성장했는지 잘 모르겠어요.. 개발 역량 강화를 위한 도서 - 리팩터링 2판 - 구글 엔지니어는 이렇게 일한다 성장은 두가지 관점에서 볼 수 있다. 비즈니스에서의 성장 : 회사 입장에서의 성장 (매출 확대, 비용 감소, 사업 확장) 개인의 성장 : 나의 목표 (풍부한 기술 경험, 깊이 있는 학습, 다양한 협업) 개인 성장을 위한 목표 설정 1. 최대한 많은 자료 수집하기 (채용 공고, 도서, 컨퍼런스, 깃헙 등등) 새로운 기술을 처음 배울때는 만들거나 제안한 사람의 글, 문서 위주로 학습하는 ..

✔️ 이번 정독을 통해 알게 된 것 DOM이란 무엇인가요? innerHTML의 단점은 무엇인가요? 🤔 DOM이란 무엇인가요? 🤓 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 🤔 innerHTML의 단점은 무엇인가요? 🤓 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 XSS(크로스 사이트 스크립팅 공격)에 취약합니다. 또한 요소 노드의 기존 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경하게 됩니다. ✔️ DOM이란? Document Object Model은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공..

그동안 CRA(create-react-app)만을 사용하다가, 현직에서는 CRA보다 Vite를 더 많이 사용한다는 말에 Vite가 궁금해졌습니다. Vite는 esbuild를 사용해서 빌드 속도가 빠른 빌드 도구 입니다. 빠르다는 이야기에 바로 테스트를 해보았는데 CRA보다 체감상 정말 빨랐고, 바로 vite를 사용하게 되었습니다. //package.json "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, package.json에는 "dev"라는 명령어로 브라우저를 킬 수 있습니다. 그래서 npm run dev를 하면 아래와 같은 주소에 실행됩니다. 그런데 CRA환경과 다르게 자동으로 브라우저가 열리지 않고, c..

✔️ 이번 정독을 통해 알게 된 것 파싱이 무엇인가요? 렌더링이 무엇인가요? 브라우저의 렌더링 과정? script 태그를 body 태그 최하단에 추가하는 이유 🤔 파싱이 무엇인가요? 🤓 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 과정을 말합니다. 🤔 렌더링이 무엇인가요? 🤓 HTML, CSS, JS로 작성된 문서를 파싱해서 브라우저에 시각적으로 출력하는 것을 말합니다. 🤔 브라우저의 렌더링 과정? 🤓 브라우저는 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고, 이..

✔️ 에러 코드 Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform. 해석 = Component selectors는 @emotion/babel-plugin, the swc Emotion plugin, 또는 다른 Emotion-aware 컴파일러로만 사용가능합니다. ✔️ 에러가 나온 이유 vite 환경에서 emotion 라이브러리를 사용하는데 위와 같은 에러메세지가 나왔습니다. 😅 Component Selector는 상위의 컴포넌트에서 스타일링을 적용을 할 때, 하위의 컴포넌트를 선택해서 스타일링..

✔️ 이번 정독을 통해 알게 된 것 클로저는 무엇인가요? 렉시컬 스코프가 무엇인가요? 🤔 클로저는 무엇인가요? 🤓 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다. 🤔 렉시컬 스코프가 무엇인가요? 🤓 자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는데 이를 렉시컬 스코프라고 합니다. ✔️ 클로저란 클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 특성이다. 클로저 in MDN 👉 A closure is the combination of a function and the lexical environment within which that function was declared. 클로저는 함수와 그 함수가 선언된..

두 개의 스택으로 큐 구현하기 스택은 나중에 들어간 데이터가 먼저 나오는 자료구조이고, 큐는 먼저 들어간 데이터가 먼저 나오는 자료구조이다. 그렇다면 스택으로 큐를 어떻게 구현할까?? 처음에 이 문제를 보고 이게 과연 가능할까? 싶었는데 생각해보면 간단하다. 왜냐? 스택이 두 개인걸 활용하면 되니까!! 스택1은 데이터를 입력받는 용으로만 사용한다. 스택2는 데이터를 빼는 용도로만 사용한다. (pop) 스택1에 데이터가 있고 스택2가 비어있다면 스택1의 데이터를 스택2로 옮기고 이걸 다시 Pop 하면 된다.

✔️ 이번 정독을 통해 알게 된 것 this란 무엇인가요? this 바인딩이란 무엇인가요? 🤔 this란 무엇인가요? 🤓 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. 🤔 this 바인딩이란 무엇인가요? 🤓 this와 this가 가리킬 객체를 연결하는 과정입니다. ✔️ this란? 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 객체에서 메서드는 자신이 속한 프로퍼티를 참조하고 변경할 수 있어야 하는데 그러기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 이 역할을 this가 한다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. ✔️ this의 특징 ◆ this..

✔️ 이번 정독을 통해 알게 된 것 TDZ(temporal dead zone)이란 무엇인가요? 암묵적 전역이 무엇인가요? 🤔 TDZ(temporal dead zone)이란 무엇인가요? 🤓 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 말합니다. 🤔 암묵적 전역이 무엇인가요? 🤓 선언하지 않은 식별자에 값을 할당하면 전역 객체의 프로퍼티가 되 ✔️ var ◆ 변수의 중복 선언이 가능해서 side effect 발생 가능성 ↑ ◆ 함수 레벨 스코프(오로지 함수의 코드 블록만을 지역 스코프로 인정한다. )이기 때문에 함수 외부에서 var 키워드로 선언한 변수는 코드블록 내에서 선언해도 모두 전역 변수가 된다. side effect 발생 가능성 ↑ var i = 10; for(var ..