CS지식
-
Map()과 Set(), iterable 객체CS지식 2023. 12. 4. 13:13
순회 가능한 객체 = iterable 객체 내부 요소를 하나씩 차례로 반환할 수 있는 객체이다. for of 루프를 통해 각 요소를 차례로 순회할 수 있다. ex) 배열(Array), 문자열(String), Map, Set 일반객체는 iterable 객체가 아니다. 일반객체는 각 요소를 순회하려면 Object.keys / Object.values / Object.entries 사용하고 그 다음에 for of 루프를 적용하면 된다. Map = 키-값 쌍을 저장하는 자료 구조 순회 가능한(iterable)객체여서 for...of문을 사용하여 Map의 내용을 순회할 수 있다. - 특징 키의 타입 유연성: 어떤 타입의 키도 허용한다. 객체나 함수 등도 키로 사용할 수 있다. 순서 보장: 원소를 추가한 순서대로 ..
-
리액트 렌더링 최적화CS지식 2023. 11. 14. 21:43
리액트 랜더링 최적화에 대해 알아보기 전에 알아야할 사전지식을 먼저 정리하고 시작한다. - 리액트에서의 렌더링 = 함수를 호출하는 것 App 컴포넌트가 호출되고 -> 내부 로직들이 싱행되고 -> return문의 리액트 element 반환하는 것 이것이 리액트에서의 렌더링이다. - 리렌더링 되는 조건 1. state가 바뀌었을 때 2. props가 바뀌었을 때 3. 부모컴포넌트가 바뀌었을 때 - 불필요한 렌더링 발생 확인 지표 1. console.log 2. React Developer Tools → Profiler : 웹사이트의 컴포넌트들이 어떻게 렌더링되고 있는지를 보여주는 도구 : 어디 부분에서 렌더링이 오래 걸리고 불필요한 렌더링이 걸리는지 확인해야 한다면 용이! - 리액트에서의 렌더링 과정 1. ..
-
주소창에 google.com을 입력하면 일어나는 일CS지식 2023. 11. 14. 16:42
주소창에 google.com을 입력하면 일어나는 과정을 공부했다. 생각보다 너무너무..!!!! 복잡했다.. 10개 넘는 블로그, 5개 넘은 동영상을 시청하며 드디어 이 과정을 나름대로 이해하고 정리할 수 있었다. 일단은 비교적 간단하게 정리해보았지만 하나하나 더 깊게 들어가서 마스터 하고싶다. 🌟 1. 사용자가 웹 브라우저를 통해 www.google.com(URL)을 입력한다. 2. 브라우저는 먼저 4단계의 캐싱된 DNS 기록을 확인한다. - 4단계 브라우저 캐시 → OS 캐시 → router 캐시(집에서 사용하는 공유기) → ISP 캐시(SK 브로드밴드) - 왜 이런 캐시들이 있을까? 인터넷 스피드를 최대한 빨리 하기 위해서! 3. 있다면 DNS 서버로 연결하지 않고 IP 주소를 반환한다. 4. 없다면..
-
동기와 비동기, 자바스크립트에서 비동기 처리가 가능한 이유, 비동기 프로그래밍CS지식 2023. 11. 11. 15:53
동기와 비동기 - 동기 처리: 반드시 코드가 작성된 순서대로 진행된다. 장점: 실행 순서 보장 단점: 블로킹 발생, 하나의 작업이 너무 오래 걸리게 되면 오래 걸리는 하나의 작업때문에 모든 작업이 올스탑되어 처리속도가 매우 느려져 성능 상에 문제가 발생하게 된다. - 비동기 처리: 현재 실행중인 코드가 완료되지 않더라도 기다리지 않고 다음 코드를 실행하는 방식이다. 실행중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행한다. 이벤트 핸들러, setTimeout, setInteraval, HTTP 요청은 비동기 처리 방식으로 동작한다. 장점: 블로킹 발생 X 단점: 실행 순서 보장 X 그런데 싱글스레드인 자바스크립트에서 어떻게 비동기 처리가 가능할까? 자바스크립트 엔진은 싱글스레드라서 실행..
-
리액트의 재선언, Virtual DOM 동작원리, Diffing 알고리즘CS지식 2023. 11. 11. 12:11
리액트가 빠른 반응형 웹이 될 수 있었던 이유는 Virtual DOM 덕분이다. Virtual DOM이 변화한 부분만 캐치하여 최소한의 변경사항만 Raal DOM에 업데이트 해주기 때문이다. 이는 맞는 말 이지만... 너무 겉햛기식으로만 Virtual DOM을 이해하고 있기에 이번에 더 깊게 Virtual DOM을 공부해보았다. Virtual DOM 관련하여 테코톡에 세 개의 영상이 올라와 있었고 세 영상으로 더 깊게 알게된 Virtual DOM에 대해 정리해보려고 한다! (테코톡 최고..) Virtual DOM 등장이유 과거에 비해 현대의 웹 페이지는 UI/UX가 굉장히 매력적이고 복잡하다. 이러한 웹 페이지의 브라우저 렌더링 과정에서의 문제는 DOM에 변화가 발생할 때마다 렌더트리가 재생성되고 모든 ..
-
호이스팅, 호이스팅 원인, 호이스팅 종류CS지식 2023. 11. 5. 14:30
첫 콘솔을 보면 var는 undefined가 찍힌다. 이처럼 선언 라인 전에도 변수를 참조할 수 있는 현상을 '호이스팅' 이라고 한다. var 키워드는 선언과 함께 undefined로 초기화되어 메모리에 공간을 확보한다. let과 const 키워드는 선언만 되고 초기화되지 않은 상태로 선언만 환경레코드(메모리)에 등록된다. (선언 라인에 도달하기 전에는 메모리에 공간을 확보하지 못한다.) 자바스크립트의 모든 선언에는 호이스팅이 일어나지만 let, const를 이용한 선언문을 호이스팅이 발생하지 않는 것처럼 동작한다. let, const 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생하는데 이는 let과 const에도 호이스팅이 일어나기 때문에 에러를 일으키는 ..
-
실행컨텍스트, 호이스팅, 스코프체이닝 (feat. 테코톡 하루님)CS지식 2023. 11. 4. 15:29
실행컨텍스트, 호이스팅, 스코프체이닝을 완벽하게 이해하고 싶은데 호이스팅, 생성 단계, 실행 단계, 선언, 초기화, 일시적 사각지대, 함수 표현식, 함수 선언문, 식별자 결정, 스코프 체인, 스코프 체이닝 등의 여러 개념들이 얽혀있어서 정리가 잘 안됐다. 그런데 테코톡에서 하루님께서 실행컨텍스트를 발표해주신 영상을 보고 속이 시원할정도로 이해가 쏙쏙 잘됐다. 너무 감사했다..ㅠㅠ 그래서 이 영상을 보며 개념을 정리해보았다! https://youtu.be/EWfujNzSUmw?si=ICfUnYVPczB2HqTh 실행컨텍스트에는 Record가 있고 Outer가 있다. 이를 먼저 이해하면 최종적으로 실행컨텍스트를 더욱 이해할 수 있다! 1. Record로 JS 호이스팅 이해하기 이처럼 첫 콘솔을 보면 unde..
-
주니어 프론트엔드 개발자 기술면접 예상질문 - CS(2)CS지식 2022. 11. 4. 11:40
- CORS는 무엇인지, 이를 처리해본 경험이 있나요? 정의, 특징, 해결 방법 다른 출처의 자원에 접근할 때 발생한다. 대개는 프런트 개발 시에 로컬에서 API 서버에 요청을 보낼 때 흔하게 발생한다. 서로 다른 도메인 간에 자원을 공유하는 것을 뜻하고, 출처가 다른 서버의 자원을 요청하면 발생하는 문제이다. - cors를 쓰는 구체적인 이유는? 먼저 CORS의 반대인 SOP는 다른 출처라면 무조건 차단함으로써 막강한 보안을 제공한다. 하지만 다른 출처의 리소스를 사용할 때는 CORS를 써야 한다고 생각한다. 또한 CORS는 출처가 다를 시에 Access-Control-Allow-Origin:{도메인}을 HTTP Header에 추가해야한다. -cors를 구현하려면 어떻게 하는가? CORS를 구현하기 위..