본문 바로가기

JavaScript85

JavaScript - 자바스크립트 엔진 / 이벤트 루프 / 테스크 큐 올 초부터 점심시간마다 모던 자바스크립트 딥다이브를 한 장씩 읽고 있다. 기초 개념들을 익히기에 좋은 자투리 시간인 것 같다. 잊지 않기 위해 내가 이해한 내용들을 바탕으로 쉽게 풀어 포스팅 해보려고 한다. JavaScript - 자바스크립트 엔진 / 이벤트 루프 / 테스크 큐 자바스크립트는 싱글 스레드 언어이다. (언제나 그렇듯이) 싱글 스레드는 카페에서 직원 한명이 모든 주문을 다 처리하는 것과 같다. 하지만 싱글스레드는 하나의 일이 끝나야 다음 일을 한다. (동기적) 에스프레소샷을 내리는 사이 - 얼음을 컵에 담아놓고 - 샷을 얼음컵에 담아 건낸다 주문을 받고 - 동전을 거슬러 주고 - 영수증을 준다 그렇지만 브라우저가 등장하면 이야기가 달라진다. 동시에 여러 일을 할 수 있도록 매니저가 지시해주는.. 2023. 8. 1.
JavaScript - This 에 대해서 요즘 바닐라 자바스크립트를 사용해서 코드를 짜다보니 this 가 여간 걸리는 게 아니다 리액트에서는 this 의 개념이 없어서 안다고 했지만 그동안 간과해왔던 이 친구 정확히 정체가 뭘까? 설명할 수 없는 지식은 완전한 지식이 아니기 때문에 공부하고 정리해보았다 JavaScript - This 에 대해서 함수 호출 시 this 의 값이 결정된다. (선언이 아니다) 클로저 (상위 스코프를 참조하는 성질) 때문에 this 도 마찬가지로 상위 값을 참조한다 다만 엄격 모드와 논엄격 모드에서는 차이가 좀 있다 ** 참고로 함수의 상위 스코프는 글로벌(window)이다 단독으로 사용한 this 의 경우 → 함수 상위 스코프인 window 로 바인딩 된다 함수 안에서 사용한 this 의 경우 → 함수 상위 스코프인.. 2023. 7. 30.
CSS - display 속성 inline / block / inline-block 이란 display: inline inline 속성은 텍스트 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다. 대표적인 태그는 이 있다. (텍스트 크기만큼만 공간을 계산하니 레이아웃 관련 속성은 적용이 안된다.) width / height 적용 불가 margin / padding-top / bottom 적용 불가 line-height 적용 불가 , , , , , , , , , , display: block block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 가 있다. width, height, margin 등 layout 관련 속성 지정가능 , , - , , , , , , , display: inline-block inline-block 속성은 inline .. 2023. 4. 13.
JavaScript - 호이스팅(hoisting)과 클로저(closure)의 쉬운 이해 JavaScript 를 공부할 때면 알아야할 호이스티와 클로저의 개념 여러번 숙지할때마다 조금 더 깊이 들어가게 된다. (다 - 다익선) 오늘도 의식의 흐름에 따라 정리를 해보았다. JavaScript - 호이스팅(hoisting)과 클로저(closure)의 쉬운 이해 스코프 코드를 짤 때, 모든 시작은 변수를 선언하고 값을 넣는 것에서 출발한다. 근데 변수가 인기가 많아서 이곳 저곳 불려다니면 혼선이 생길 것이다. 그래서 스코프라는 개념으로 변수가 돌아다닐 수 있는 바운더리를 정해두었다. 글로벌 레벨 스코프는 코드 이곳저곳을 누빌 수 있다. 함수 레벨 스코프는 function() { 함수 안 } 에서만 누빌수 있다. 블록 레벨 스코프는 { 요런 블록 안 } 에서만 뛰놀 수 있다. (if 문이나 for .. 2023. 3. 17.
JavaScript - 동기와 비동기의 쉬운 이해 Updated 03/16/23 항상 헷갈렸던 부분을 의식의 흐름에 따라 정리해보려고한다. 요청과 응답 HTTP 통신을 할때는 클라이언트와 서버가 서로 커뮤니케이션을 한다. 통신을 할 때는 순서가 중요하다. 그래서 통신을 할 때 동기적 처리가 필요하게 되었다. 요청 - 클라이언트 → 서버 응답 - 서버 → 클라이언트 동기와 비동기 동기는 하나가 완료하고 차례차례 그 다음 테스크를 처리하는 방식이다. 비동기는 동시에 병렬적으로 핸들링하는 방식이다. 자바스크립트는 싱글쓰레드 언어이다. 싱글쓰레드는 이 말인즉슨 일꾼이 한명이다. 동시 진행이 안된다. 하나의 함수를 실행하고 있으면, 다른 함수는 블로킹(Blocking)이 된다. 멀티쓰레드는 병렬진행이 가능하다. ex) 크롬 창을 보면 알수있다. 한탭에서 에러가 .. 2023. 3. 9.
JavaScript - 유용한 정규식 예제들 내가 보려고 만든 유용한 정규식 예제들 🤩 정규식은 사랑입니다 💝 (계속 업데이트 해서 채워나갈 예정) JavaScript - 유용한 정규식 예제들 URL 검사 const validURL = (url: string): boolean => { if (!url) { return false; } const regex = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/g; return regex.test(url); }; 이메일 검사 const validEMAIL = (email: string): boolean => { if (!email) { return false; } const regex = /^([\w._-])*[.. 2023. 3. 2.
JavaScript - 재귀함수 만들기(feat. 반복문 비교) 프로그래머스 코테 문제를 풀어보다가 while 문을 사용한 함수를 → 재귀함수로 바꾸어 한번 더 풀어보았다. 처음에는 어렵지만 유형을 익히고 이해하게 될수록 참 재미있어 지는 것 같다. JavaScript - 재귀함수 만들기(feat. 반복문 비교) 문제를 간단히 설명해보면 다음과 같다. (출처 : 프로그래머스 - 콜라문제) 콜라 빈병 2개를 가져가면 → 새것 1병으로 교환해준다. 나는 총 빈병 20개를 가지고 있다. → 그럼 새것 10병을 받을 것이다. 10병을 그자리에서 마신다 → 그럼 새것 5병을 받을 것이다. 5병을 그자리에서 마신다 → 그럼 새것 2병을 받을 것이다. + 빈병 1개가 남을 것이다. 2병을 그자리에서 마신다 → 그럼 새것 1병을 받을 것이다. 새병 1개 마셔버리고 + 아까있던 빈병.. 2023. 3. 1.
웹최적화 - Reflow 와 Repaint Reflow ? Repaint ? 브라우저 렌더링 과정을 공부할 때 나왔던 단어들이다. 그 전까지는 그렇게 깊이 생각해본 적은 없었지만, 최적화를 공부하면서 이들의 존재감에 대해서 깨닫게 되었다. 이들은 무엇이고 왜 존재감이 생겼을까? 브라우저 렌더링의 과정을 간단히 알아보면 dom + cssom 트리를 각각 만들어서 → 렌더 트리를 만들어내고 → 각 요소들의 사이즈를 계산해 자리를 배치하는 레이아웃을 거친 뒤 → 그 레이아웃 요소들에 페인트하는 페인트 단계를 거친다 → 그 모든 걸 조합하는 컴포짓해서 화면에 내보낸다 웹최적화 - Reflow 와 Repaint 여기서 css 요소가 변경이 되면 Reflow 와 Repaint 를 거친다. Reflow는 이모든 단계를 다시 거치는 것이고 DOM + CSSOM.. 2023. 2. 4.
JavaScript - 조합 구하기 (재귀함수) 조합은 순서 상관없이 경우의 수를 구하는 것이다. 그림을 보면 한번에 이해가 될 것이다. [1,2,3] 배열의 경우 [1,2], [2,3], [1,3] 이렇게 세가지 조합이 나온다 JavaScript - 조합 구하기 (재귀함수) 조합을 구하기 위해서는 재귀함수를 응용한다. 반복문으로 구할 수 있지만 일일이 구하고자 하는 숫자만큼 반복해주어야되어 코드가 길고 복잡해질 수 있기 때문이다. // 1 function getCombination(arr, selectNum){ const result = []; // 결과값을 담은 배열선언 if(selectNum === 1) { // selectNum 이 1 일 떄 (재귀함수의 종료조건, 탈출구!) return arr.map(item => [item]) // ex) .. 2023. 1. 4.
반응형

티스토리툴바