허도경, limewhale

자바스크립트의 for( ), forEach( ), map( ) 함수에 대해 비교를 통해 알아보겠습니다.​ 1) for( ) 초깃값부터 시작해서 증가 또는 감소하면서 조건에 부합하면 계속 순회합니다. 중간에 "break;" 문을 만나면 반복문을 중단합니다. for ([initialization]; [condition]; [final-expression]) statement​ ​ 2) forEach( ) 배열의 각 요소에 대해 callback을 실행합니다. 배열을 순회하므로 중간에 "break;" 문을 사용할 수 없습니다. 이런 경우라면 for( )문을 사용해야 합니다. array.forEach(callback(currentvalue[, index[, array]])[, thisArg]) ​ 3) map( ..

💡 메타태그(meta tag)란 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 합니다. 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있습니다. 메타태그 속성에는 http-equiv, name, content 3가지 속성이 있습니다. 1) http-equiv ="항목명" 웹 브라우저 서버에 명령을 내리는 속성 name 속성을 대신해 사용할 수 있음 html 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을때만 의미를 가짐 content 속성의 정보 / 값을 위한 HTTP header를 제공 html4에서는 문자 설정을 할 때 사용했지만 h..

브라우저는 어떻게 동작하는가? 이전에도 해당 주제로 글을 쓴적이 있어서 오늘은 간단하게 알아보고 스크립트의 로드 시점에 대해 알아보려 합니다 사용자가 연결된 주소의 서버에 데이터 요청을 하게 되면 서버로부터 데이터를 다운로드 받은 것을 가지고 웹브라우저가 그것을 해석해서 사용자가 보는 UI 를 완성해 주게 됩니다. 📖 웹 브라우저 동작과정 간단히 알아보기 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 💡 브라우저의 기본 구조 브라우저의 주요 구성 요소는 다음과 같습니다. [사용자 인터페이스] - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 [브라우저 엔진] - 사용자 인터페이스와 렌더링 엔진 사이의..

💡 WEB STORAGE 웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다. HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있습니다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴으로 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다. Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념으로 사실 거의 차이가 없지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었습니다..

👍 목표 호이스팅(Hoisting)이란 무엇인지 이해합니다. 함수 선언문과 함수 표현식에서의 호이스팅 차이를 이해합니다. let / const와 var 변수 선언에서의 호이스팅 예시 차이를 이해합니다. 같은 이름의 var 변수 선언과 함수 선언에서의 호이스팅에 대해 이해합니다. 👏호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 단 선언에 대한 부분만 끌어올려지고 값의 할당은 끌어올려지지 않습니다. ✔ 호이스팅이란 자바스크립트 Parser는 현재 실행될 컨텍스트의 대상 코드 내에 어떤 식별자들이 있는지를 먼저 수집합니다. 때문에, 변수를 인식할 때 식별자를 모두 모아서 유효 범위의 최상단에 선언합니다. 단 값의 할당 과정은..

1. Object.assign() 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다. 방법 : Object.assign(target,... sources) target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체 ...sources 타겟 오브젝트에 병합 리턴값으로 타겟 오브젝트를 반환 const obj = {a:1}; const copy = Object.assign( {}, obj ); console.log(copy); // {a: 1} const obj1 = {a:1}; const obj2 = {b:2}; const obj3 = {c:3}; const newObj = Object.as..

자바스크립트를 공부하게 되면 한 번쯤은 들어보게 되는 단어가 '클로저'입니다. 하지만 막상 클로저를 설명하려고 하면 어렴풋이 개념은 알고 있어도 쉽게 설명을 하지 못하는 경우가 많습니다. 👍 클로저란? 클로저에 대해 MDN은 아래와 같이 정의하고 있습니다. “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. MDN에 정의되어 있는 말을 보아도 문맥이 어려워서 선뜻 이해가 되지 않습니다. 위 정의에서 중요한 키워드는 “함수가 선언됐을 때의 렉시컬 환경(..

React Hook 주의점 최상위 바깥에 선언해서 실행 순서가 일정하게 하는 것이 중요합니다. 조건문 안에서 Hook를 실행시키지 않습니다. hook안에 hook을 사용하지 않습니다. Hook을 일반적인 JavaScript 함수에서 호출하지 않습니다. React 함수 컴포넌트에서 Hook을 호출하세요. Custom Hook에서 Hook을 호출하세요. 리액트에서 Hook을 반복문, 조건문 혹은 중첩된 함수 내에서 호출하지 않습니다. Hook은 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 이러한 점은 React가 useState와 useEffect 가 여러 번 ..

자바스크립트에서 문자열에서 문자 또는 문자열의 위치를 검색 위해서는 indexOf와 search 함수를 사용하고, 문자열의 뒤에서부터 문자열을 검색할 때는 lastIndexOf 함수를 사용하면 됩니다.​ - str.indexOf(searchValue[, fromIndex]) - str.search(regexp) - str.lastIndexOf(searchValue[, fromIndex]) 대부분 문자열을 찾을 때는 indexOf 함수를 많이 사용하며, 정규식을 사용해야 할 경우 search 함수를 사용하면 됩니다. 문자열을 찾으면 문자열의 첫 번째 위치를 반환하고 찾지 못하면 -1을 반환합니다. 💡 indexOf 함수로 문자열 찾기 const str = 'HTML,CSS,JavaScript'; const..

React에서 특정 URL에서 전달한 Params값을 가져와야 할 때 리액트 라우터 돔을 사용하면 useParams를 사용하면 되지만 사용 환경에 따라 nextjs를 사용하거나 리액트 라우터 돔을 사용하지 않을 경우 해당 Params값을 추출하기 위해 라우터 돔을 설치하는 것은 굉장히 비효율적입니다. 이때 쉽게 Params 값을 가져와서 처리할 수 있는게 window의 기본 객체인 location객체의 search 파라미터입니다. 리액트에서의 location은 javascript의 window.location과 동일합니다. search 파라미터는 url의 ? 뒤에 전달하는 파라미더값을 가져올 수 있습니다. 가령 위의 주소처럼 'localhost:3000/?id=1' 과 같은 주소가 있다면 가져올 키 값은..