Nuri-KSLV-II

문제 링크https://leetcode.com/problems/join-two-arrays-by-id/description/?envType=study-plan-v2&envId=30-days-of-javascript1. 두 배열을 합치면서, id값이 같은 경우 arr2로 overrideconst merged = [...arr1, ...arr2] .reduce((acc, item) => { acc.set(item.id, item); return acc; }, new Map());2. 두 배열을 합치면서, id값이 같지만 arr1에만 있는 값이 있을 경우, 병합 (문제에서 요구한 케이스) const merged = [...arr1, ...arr2].reduce((acc, item) => {..

1. Rest Syntax란?Rest Syntax는 함수가 호출될 때 전달된 모든 인자를 하나의 배열로 받아들이는 문법입니다. 즉, 함수의 매개변수 앞에 ...을 붙이면, 해당 매개변수는 나머지 모든 인자들을 배열로 받을 수 있습니다.예제:function f(...args) { const sum = args[0] + args[1]; return sum;}console.log(f(3, 4)); // 7f(3, 4)를 호출하면, 함수 내부에서 args는 [3, 4]가 됩니다.이처럼 함수에 전달된 모든 인자를 배열로 다룰 수 있게 해줍니다.2. 왜 Rest Syntax를 사용할까?처음에는 "그냥 배열을 함수에 전달하면 되는 거 아닌가?"라는 생각이 들 수 있습니다. 하지만 Rest Syntax는 가변적인..

함수가 객체라는 사실은 다른 프로그랭 언어와 구별되는 자바스크립트의 중요한 특징이다.- 모던 자바스크립트 딥다이브, 이응모JS 에서 함수를 호출하는 로직자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당함일급객체자바스크립트의 함수는 값처럼 변수에 할당되거나, 프로퍼티 값 또는 배열의 요소가 될 수 있음. 값의 성질을 갖는 객체를 일급객체 라고 함// 기명 함수 표현식var add = function foo (x,y) { return x+y;};// 함수 객체를 가리키는 식별자로 호출console.log(add(2,5)); //7// 함수 이름으로 호출 -> ReferenceError// 함수 이름은 함수 몸체 내부에서만 유효한..

✔ 문제 링크https://leetcode.com/problems/create-hello-world-function/editorial/✔ editorial 학습1. 익명함수var f = function(a, b) { const sum = a + b; return sum;}console.log(f(3, 4)); // 7- 무기명 함수 2. 즉시 실행 함수var res = (function () { var a = 3; var b = 5; return a + b;}())console.log(res); // 15res = (function (a, b) { return a * b;}(3, 5))console.log(res); // 15- 일반 함수처럼 값을 반환할 수 있으며, 인수..

구글 공식 검색엔진 최적화 문서 참고 https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls?hl=ko#rel-canonical-link-method URL 표준화 및 표준 태그 | Google 검색 센터 | 문서 | Google Developers 사이트에 중복 콘텐츠가 있는 경우 Google은 표준 URL을 선택합니다. 표준 URL 및 중복 URL 통합 방법을 자세히 알아보세요. developers.google.com - 하나의 페이지를 여러 URL로 액세스할 수 있거나 서로 다른 페이지에 유사한 콘텐츠가 있는 경우(예: 한 페이지에 모바일 버전과 데스크톱 버전이 모두 있는 경우) - Google은 이..

AMP란 무엇인가요? 웹사이트 로드가 3초를 넘어가면 웹사이트에서 나간다는 사람이 40% - 사용자의 휴대기기에 콘텐츠가 로드되는 시간을 줄이기 위해 Google에서는 Accelerated Mobile Pages 프로젝트를 시작 - 모든 사용자를 위해 모바일 웹 사용환경을 개선하는 것을 목표로 하는 오픈소스 프로젝트 https://amp.dev AMP - a web component framework to easily create user-first web experiences Explore AMP success stories Don’t take our word for it - read case studies from industry success stories and see how AMP has pro..

📌 검색엔진최적화란?(SEO, Search Engine Optimization) 검색엔진이 이해하기 쉽도록 홈페이지 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업 📌 검색엔진 최적화 가이드라인 1. 네이버 블로그/카페/지식인 위주로 콘텐츠가 노출되기 때문에 동일한 내용의 콘텐츠일 때 네이버가 아닌 독립적인 홈페이지에 위치한 콘텐츠는 상위에 잘 노출되지 않음 2. 구글 홈페이지 관리자를 위한 '웹마스터'도구를 제공. 해당 도구를 통해 현재 구글 검색엔진이 자신의 홈페이지 콘텐츠를 어떻게 수집해가고 있는지, 각 페이지에 인덱싱이 잘 되고 있는지 등의 정보를 확인할 수 있음 → 따라서 네이버와 구글 등 홈페이지를 어떤 브라우저에 더 중요하게 노출할 것인지 결정해서 SEO를 최적화하는 것..

📌 TCP 3-way Handshake TCP는 장치들 사이에 논리적인 접속을 성립(establish)하기 위해 3-way Handshake를 사용한다. 3-way Handshake란? TCP 통신을 이용하여 데이터를 전송하기 위해 네트워크 연결을 설정하는 과정이다. 클라이언트, 서버 모두 데이터를 전송할 준비가 되었다는 것을 보장하고, 실제로 데이터 전달이 시작되기전에 한 쪽이, 다른 쪽이 준비되었다는 것을 알 수 있도록 한다. 즉, TCP/IP프로토콜을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에 먼저 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정 1. A(Client) → B(Server): SYN 프로세스 A가 연결 요청 메시지(SYN, 'synchroni..

📌 Image Lazy Loading이란? 페이지 안에 있는 실제 이미지들이 화면에 보여질 필요가 있을 때 로딩 할 수 있도록 지연시키는 것 - 디바이스 내 리소스 활용도 증가 - 웹 성능 최적화 - EX. SPA(Sing Page Application) 내에서 바로 보여질 필요가 없는 이미지를 지연 로딩 ✔ 방식 1. 자바스크립트를 이용해 image load를 트리거하기 HTML JS document.addEventListener("DOMContentLoaded", function() { var lazyloadImages = document.querySelectorAll("img.lazy"); var lazyloadThrottleTimeout; function lazyload () { if(lazylo..

📌 기존의 mvc 패턴 SPA형태로 만들면 단 하나의 controller로 여러가지 view와 model을 관리하게 됨 view에서 일어난 상호작용으로 인해 여러 model이 변경되거나 그 반대의 문제도 있었을 것 📌 페이스북은 이러한 상황을 줄이고자 Flux 패턴을 만들어냄 flux 패턴의 키워드는 단방향 데이터 흐름이다 기본형 action이 발생하면 dispatcher에서 이를 받아와 해석한 후 store에 저장된 정보에 변경을 가하고 그 결과가 view로 전달됨 발전형 모바일에서 터치를 하는 것처럼, 웹에서도 사용자가 View를 통해서 클릭 같은 액션을 발생시킬 수 있다. action이 발생하면 dispatcher 통해 단방향으로 데이터가 흐름 📌 단계별 설명 Action Action은 일종의 Ac..