본문 바로가기

JavaScript80

JavaScript - 연산자 오늘은 기초중의 기초! 연산자를 정리해보았다 연산자(operator)는 연산을 수행하여 값을 만들어 낸다. (=+- 등) 피연산자(operand)는 연산의 대상이다. 이 값으로 표현식을 만든다 → 연산자는 피연산자와 짝을 이룬다. (환ssang의 커플) 할당 연산자 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수효과가 있다 단순대입연산자 → 좌항에 = 우측표현식 으로 표현한다. 복합대입연산자 → 좌항에 += 우항에서 실행된 평가결과를 할당한다 **+=는 예시 연산자 예시 동일 표현 = x = 5 x = 5 += x += 5 x = x + 5 -= x -= 5 x = x - 5 *= x *= 5 x = x * 5 /= x /= 5 x = x / 5 %= x %= 5 x = x % 5 증감 연산자 증감.. 2023. 11. 7.
JavaScript - 실행 컨텍스트란 실행 컨텍스트는 나에게 16부작 드라마를 보는(?) 느낌이었다 점심 시간에 모던 자바스크립트 딥다이브 한두장씩 읽으면서 2주 정도 걸린 것 같다 개념적으로는 존재하지만 머릿속으로는 정리해보지 않아 이번 기회에 정리해보려고 한다 소스코드를 파싱하면서 → 소스코드를 평가하고 → 실행 컨텍스트는 "생성" 된다 소스 코드의 타입 소스코드는 네가지 타입으로 분류된다 (갑분소?) 얘네 이야기를 왜하냐면 이 소스코드가 실행될 때 실행 컨텍스트를 생성하기 때문이다 전역코드 - 전역에 존재하는 코드 (전역에 정의된 함수나 클래스 등은 포함 x) - 최상위 스코프인 전역(a.k.a 글로발) 스코프를 생성한다 - 전역 코드 평가 후에 전역 실행 컨텍스트가 생성된다 함수코드 - 함수 내부에 존재하는 코드 (중첩 함수나 클래스.. 2023. 10. 31.
JavaScript - Primitive Value & Casting 오늘은 자바스크립트 기초를 정리해보았다. 내가 정리한 챕터는 Primitive Value & Casting 이다. Primitive Value 이란Primitive value (원시값)은 말 그대로 원초적인 단순 값이다 → 객체 x / 메소드 x / 속성 x 을 가지지 않는 데이터 → 원시값 자체는 불변이다. 변수가 변할 뿐! 원시 타입에는 각각의 객체마다 내장함수들이 있다 ex) toLocaleString(), toFixed() (그래서 이 타입의 값들을 핸들링할 때, 이 함수들을 요긴하게 사용한다) 하지만 null / undefined 는 아무것도 없 - 다 (그래서 undefined 값인 변수를 사용할 때 TypeError가 꽤나 발생하므로, 예외처리는 필수이다) Primitive Value 원시 .. 2023. 10. 31.
JavaScript - 비트마스킹 적용하기 (Feat.비트연산자) 비트 마스킹이란 비트마스킹은 비트의 특성을 이용하여 이진수로 표현하는 자료구조 기법이다. 어려워 보이지만 결국은 다 배우고 익힌 것들의 조합이다. 비트는 0, 1 로 이루어진 이진수이다. - 이진수는 0 또는 1 을 사용하므로 하나의 비트(bit)가 표현할 수 있는 경우는 두 가지이다. - 비트가 1이면 "켜져 있다(true)", 0이면 "꺼져 있다(false)" 라고 표현한다. 쉽게 말해서 배열을 [true, false, true, true] 이런식으로 표현하게 되면 메모리의 4 공간에 저장된다 1011 이런 식으로 표현하게 되면 메모리의 1공간 만을 차지하게 되는 셈이라 더 효율적이다. 그래서 비트마스킹 기법은 더 빠른 수행, 간결한 코드, 적은 메모리 사용의 장점이 있다. 비트 마스킹 적용하기 나의.. 2023. 10. 12.
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.
반응형

티스토리툴바