목록개발 공부/JavaScript (12)
Just Do IT!
복학하면서 오랜만에 동아리에 들어갔다. 멋쟁이사자처럼 11기인데, 매주 팀별 스터디도 있고, 단체 스터디도 있다. 나는 프론트엔드 스터디에 참여하면서 오랜만에 html, css, javascript를 이용해서 계산기 만드는 걸 했다. 지금까지 내배캠하면서 react, typescript 위주로 공부하다 보니 바닐라 자바스크립트를 만져본 게 오래전 같았는데 덕분에 간만에 자바스크립트를 해서 나름 재밌었다. 확실히 공부를 안 하면 까먹게 되는 것 같다. (이제 면접 준비도 해야 하니까 간단하게 복습 겸 회고 겸...블로그 올리기...ㅋㅋ) HTML 너무 오랜만에 index.html 파일 안에서 작ㅇ버해서 그런지 태그를 까먹었다. ㅋㅋㅋㅋ 스터디 팀장이 올려준 예제대로 작업해야 해서 그대로 작업했는데, 진짜 ..
lodash란? JavaScript의 라이브러리 중 하나이며, 전세계적으로 많이 사용되는 라이브러리 중 하나이다. 주로 array, collection, date 같은 데이터의 구조를 간편하게 함수형으로 다룰 수 있게 하기 위해서 탄생했다. 특히 frontend 환경에서 서버(DB)에서 받은 데이터를 정렬하고 사용할 때 많이 쓰인다. 밑줄 (_) 기호를 선언하여 사용된다. _.변수 이런 식으로 작성할 경우 lodash wrapper로 변수로 감싸게 되면서 해당 변수에 대한 chaining을 시작한다. 공식문서: https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);D..
정규 표현식 문자열에서 특정 문자 조합을 찾기 위한 패턴 JavaScript에서의 정규 표현식은 객체이다 RegExp의 exec()와 test() 메서드를 사용할 수 있다 String의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드와도 함께 사용할 수 있다 정규 표현식 만들기 정규 표현식 리터럴 슬래시(/)로 패턴을 감싸서 작성 바뀔일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있다 const re = /ab+c/ RegExp 객체의 생성자 호출 const re = new RegExp('ab+c') 정규 표현식 패턴 작성하기 단순한 문자로 구성되거나 단순한 문자와 특수 문자의 조합으로 구성할 수 있다 (\d+)\.\d..
1. 실행 컨텍스트란? 스택(stack) : Last in, first out 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 콜 스택(call stack) 안에 실행 컨텍스트가 모아져 있다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장 (LIFO) 컨텍스트의 구성 방법 전역 공간 eval() 함수 함수 ☞ 우리가 흔히 실행 컨텍스트를 구성하는 방법 실행컨텍스트 구성 예시 실행 컨텍스트 객체 생성(활성화) 시점 : 한 '실행 컨텍스트'가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행한 코드에 관여하게 되는 시점 생성 시점에 JS 엔진은 해당 컨텍스트에 관련된 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨테스트 객체에 저장 실행..
기본적인 HTML 파일을 빨리 볼 수 있지만 사용자가 의미 있는 콘텐츠를 보기 위해서는 fetching과 실행하는 시간을 기다려야 한다. 3. head + async JS 파일 다운로드 받는 시간 절약 가능 자바스크립트 파일에서 DOM 요소를 조작하려는 시점에 HTML 파일이 정의되지 않는 위험한 요소가 생길 수 있다. 사용자들이 페이지를 로드하는데 여전히 시간이 걸린다. 4. head + defer 가장 좋은 옵션 순서대로 실행할 수 있어서 가장 안전하다 5. head + async 먼저 다운로드 된 파일을 먼저 실행 (정의된 순서는 상관이 없다) 순서에 의존적이라면 문제가 발생할 수 있다. 드림코딩 자바스크립트 강의를 들을 때 가장 처음으로 나왔던 부분인데, 영 헷갈려서 나중에 찾아볼 수 있을 것 같..
DOM (Document Object Model) 1. Javascript가 생긴 이유 브라우저에서 쓰려고 만들어진 JS (출처: https://roseline.oopy.io/dev/javascript-back-to-the-basic/history-of-javascript) 본연의 역할 웹 페이지를 동적으로 만들기 위해 즉, HTML 문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어이다. 2. 웹 페이지가 뜨는 과정 www.naver.com (클라이언트 → 서버) HTML 문서를 수신 (서버 → 클라이언트) 브라우저가 HTML 파일을 해석 (parsing) 브라우저에는 기본적으로 랜더링 엔진이 있다 랜더링 엔진이 HTML 문서에 코드 한줄, 한줄 보면서 '해석' 한다. DOM Tree를 구성 HT..