🌕 F-lab 멘토링 기록 ❔ 리액트를 왜 사용할까? 컴포넌트 단위의 코드 작성 : UI를 구성하는 개별적인 뷰 단위인 컴포넌트 단위로 코드를 작성하고 이런 컴포넌트들을 조합하여 어플리케이션 개발이 가능해집니다. 유지보수 및 재사용성이 상승한다는 장점이 있습니다. JSX(JavaScript + XML)와의 조합 : 자바스크립트의 확장 문법으로서 리액트와 함께 쓰였을 때, 코드의 가독성과 생산성을 높인다는 장점이 있습니다. Virtual DOM : 가상돔을 통해 유저 인터렉션이 있을 때마다 직접 Real DOM을 조작하지 않습니다. 따라서 직접 DOM을 조작하여 랜더링했을 때의 비효율성을 개선할 수 있습니다. 물론 위의 특징들이 리액트만의 특징으로 보기는 어려울 수 있지만, 위의 개념들을 성공적으로 적용한 프론트엔드 라이브러리라고 볼 수 있습니다. ❔ 가상 DOM이란? 가상 DOM을 조작한다는 것은 무슨 의미인지? 실제 DOM이 아닌 리액트에서 구성한 가사의 DOM입니다. 가상 DO…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 ❔ 옵저버 패턴이란 옵저버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 주로 분산 이벤트 핸들링 시스템을 구현하는 데 사용된다. 발행/구독 모델로 알려져 있기도 하다. 좀더 단순하게 생각하면 이다. B는 A를 구독함으로써 , A에서 어떤 이벤트를 발행할 때 B의 상태가 변경되게끔 하는 디자인 패턴이다. A는 Observable, Subject 등으로 불리고 Model이 그 역할을 한다. B는 Observer이며 View에 해당한다. 옵저버 패턴을 이용해 해결하려는 상태 변경? 한 객체의 상태가 변경되었을 때, 이 객체에게 의존하고 있는 모든 객체들에게 상태 변경에 대해 알리면서 동시에 어떤 행동을 취하게 하는 것 : 두 객체가 상호…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 http란 무엇일까? 그리고 https와 차이는? 의 약자로 인터넷에서 hyper text를 교환하기 위한 통신 규약으로 80번 포트를 사용하고 있다. 클라이언트는 로 요청을 보내고 서버는 80번 포트에서 요청을 받는다. 즉, 주소창에 을 검색하면 우리가 타이핑하지 않아도 앞에 http 또는 https가 붙게 되는데, 이 말은 즉 google 도메인 주소에 80번 포트로 접속하겠다는 의미이다. 그러면 비로소 html 문서를 서버가 보내주게 된다. 허나 http는 평문 데이터를 전송하는 프로토콜이기 때문에, http를 통해 중요한 개인정보(비밀번호, 주민등록번호 등)을 주고 받게 되면 외부에 노출될 가능성이 있다. 이런 문제를 해결하기 위해 등장한 것이 , https이다. https는 기존의 http에 가 추가된 프로토콜이다. 를 사용하고 네트워크 상, 제 3자가 정보를 볼 수 없도록 암호화를 지원하고 있다.…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 이벤트 루프, 매크로/마이크로 테스크 큐 eventLoop-taskQueue 자바스크립트는 싱글 스레드 기반의 언어이지만, 구동되는 환경(브라우저, Node.js)는 여러 스레드를 제공한다. 이 때, 구동 환경과 자바스크립트 엔진을 연동하기 위해 사용되는 장치가 이벤트 발생 시 호출되는 콜백 함수들을 관리하여 태스크 큐에 전달하고 콜스택이 비었을 때, 콜스택으로 전달한다. 매크로 테스크 큐: DOM, setTimeout 등의 비동기 처리 콜백함수가 담기는 큐 자료구조 마이크로 테스크 큐: Promise, async 등의 비동기 처리 콜백함수가 담기는 큐 자료구조 코드 실행 우선 순위: 콜스택(메인 스레드, 자바스크립트 엔진) > 마이크로 테스크 큐 > 매크로 테스크 큐 위 코드의 실행 순서: A E C D B Variable Environment와 Lexical Environment Variable Envir…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 폴리필(polyfill)이란? 바벨: 새로운 문법을 사용해 코드를 작성하면 트랜스파일링을 통해 구 표준을 준수하는 코드로 변경 폴리필: 새롭게 추가된 함수나 메서드는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용이 가능하다. 즉, 이렇게 변경된 표준을 준수할 수 있도록 기존 함수의 동작 방식을 수정하거나 새롭게 구현한 함수의 내용을 메꿔주는 역할을 하는 것이 폴리필! 폴리필에서 core-js란? 기존 폴리필 라이브러리들 @babel/polyfill 전역공간에 폴리필을 채워 넣기 때문에 전역공간의 오염으로 폴리필 충돌 가능성이 있다. 브라우저에서 이미 구현된 폴리필까지 전부 번들에 포함되어있어 크기가 커지는 단점 번들 크기는 커지지만 실행 시에는 브라우저에서 미구현된 문법만 실행하기 때문에 빠르다는 장점 바벨 7.4버전부터 depeciated됨 @babel/plugin-transform-runtim…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 DOM이란? Document Object Model의 약자로 HTML 문서의 계층 구조와 정보를 표현하고 이를 제어할 수 있는 API(프로퍼티, 메서드)를 제공하는 트리 자료구조 SPA란? Single Page Application의 약자로 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것 과거 웹 사이트의 규모가 작을 때, 어떤 요소를 클릭 시 서버에서 매번 전체 html 파일을 전송해주었다. 그러나 점점 웹 사이트의 규모가 커지면서 요소 하나를 변경하기 위해 전체를 보내는 것이 너무 비효율적 그래서 등장한 것이 SPA에서 SEO가 동작하기 어려운 이유? 하나의 페이지에 여러 페이지를 클라이언트 사이드에서 자바스크립트로 구현(Client Side Rendering; CSR)하기 때문에 자바스크립트를 읽지 못하는 검색 엔진에 대해서는 크롤링이 되지 않아 문제가 발생한다…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 프로토타입 체인 프로토타입: 자바스크립트의 기반이 되는 개념으로 각 함수의 상위 객체를 참조할 수 있는 프로퍼티 프로토타입 체인: 어떤 객체의 프로토타입 또한 프로토타입을 갖고 있으며 이를 통해 스코프 체인 처럼 상위 프로토타입을 참조하며 프로토타입이 갖고 있는 메서드를 활용할 수 있는 방법 클로저와 정보은닉 클로저: 어떤 함수의 변수를 참조하는 내부 함수가 외부로 전달될 때, 참조된 그 변수가 메모리에서 제거되지 않는 현상 불변성 불변성: 객체가 최초로 생성되었을 때의 값이 변하지 않고 유지되는 것 -> 메모리 영역에서 값을 변경할 수 없다는 의미 원시형은 데이터를 할당할 때, 데이터를 메모리에 저장하고 그 주소를 변수에 할당 이후 같은 변수에 새로운 데이터를 재할당하게 되면, 그 새로운 데이터에 대한 메모리가 새롭게 생기고 그 주소를 변수에 할당한다. 즉, 데이터 자체가 바뀌는 것이 아니라 새로운 공…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 함수형 프로그래밍이란?(feat.불변성) 프로그래밍의 패러다임 프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 하여 코드를 어떻게 작성할지 결정하는 역할을 한다. 새로운 프로그래밍 패러다임을 통해서 새로운 방식으로 생각하는 법을 배우고, 이를 바탕으로 코드를 작성할 수 있다. 명령형 프로그래밍: 무엇(what)을 할 것인지보다 절차지향 프로그래밍: 수행되어야할 순차적인 처리 과정을 포함하는 방식 객체지향 프로그래밍: 객체들의 집합으로 프로그램의 상호작용을 표현하는 방식 선언형 프로그래밍: 어떻게(how) 할 것인지보다 함수형 프로그래밍: 순수 함수를 조합하여 프로그램을 만드는 방식 [보충 필요] 옛날 브라우저에서는 어떻게 최근 코드를 사용 가능할까? 바벨(Babel)을 사용한다. 바벨은 ES6이후의 코드를 이전 JavaScript 엔진에서 실행할 수 있는 코드로 변환해주는 무료 오픈소스 Java…

🌕 F-lab 멘토링 기록 멘토링 이후 부족한 부분을 채우기 위한 기록 참조형 타입이 불변형과 다른 부분 참조형에서도 마찬가지로 데이터 영역 자체는 불변이지만, 객체 내의 프로퍼티에 해당하는 변수 영역에서는 데이터를 가리키는 주소값이 바뀜. 이런 점을 가변성이라고 함. 얕은 복사와 깊은 복사의 차이 얕은 복사 : 객체의 바로 아래 단계의 값만 복사 깊은 복사 : 내부의 모든 값들을 하나하나 찾아서 전부 복사 environmentRecord란? 호이스팅과의 연관성? environmentRecord 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨(처음부터 끝가지 순서대로 훑음) 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자, 선언함 함수 자체, var로 선언된 변수의 식별자 호이스팅 코드가 실행되기 전에 environmentRecord에 환경에 속한 코드의 변수명을 모두 알고 있음 ‘이 덕분에 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다’해도 문제가 없음 이런…