본문 바로가기

JavaScript85

JavaScript - 애니메이션 최적화하기 (requestAnimationFrame) 자연스러운 애니메이션을 구현하기 위해 사투를 벌인 스토리를 포스팅해보려고 한다 애니메이션은 여러 사진을 연속적으로 연결한 것이다. 그리고 그 사진을 프레임(Frame) 이라고 한다 1초 동안 보여줄 수 있는 최소한의 자연스러운 프레임의 갯수는 60 프레임 정도가 된다 그래서 Frame Per Seconds 라고 해서 60fps 라고도 한다 시계침 애니메이션을 구현하는 중이었다. 초침의 경우 초단위로 360도씩 돈다 처음에는 타이머 함수인 setInterval()를 사용하였더니 이슈가 생겼다 다른 이벤트와 겹치니 1초마다 움직여야할 애니메이션이 누락되어 뚝뚝 끊겨버렸다 JavaScript 로 애니메이션을 실행하면 Reflow 가 일어난다. (애니메이션으로 인해 Dom이 변경되기 때문에) "Reflow" .. 2024. 2. 1.
JavaScript - Argument 란 (Feat. caller, callee) 함수를 공부하다보면 Argument 이야기가 나온다 Argument 이친구도 알아야겠다 싶어 포스팅를 쓰게 됬는데 caller와 callee 의 개념도 같이 알아야겠다 싶어 소금치듯 같이 뿌려보았다 JavaScript - Argument 란 (Feat. caller, callee) arguments, caller, 그리고 callee는 자바스크립트에서 함수와 관련된 속성이나 개념을 이다. 하지만 caller와 callee는 현재 사용되지 않거나 사용이 권장되지 않는다고 한다. (ES5부터는 caller와 callee의 사용이 제한, strict 모드에서는 arguments.callee가 금지) Argument arguments 는 유사 배열 객체이다 함수를 사용할 떄 매개변수로 여러개를 받는 상황이라면 .. 2023. 11. 19.
JavaScript - 표현식 자바스크립트 뿐 아니라 프로그래밍 언어 기초공부를 하며 표현식이라는 단어를 참 많이 들은 것 같다. 표현식이 뭘까? 자세히 알아보자 표현식 표현식은 쉽게말해 값이 나오는 코드이다. (숫자 같은) 값들, 연산자, 변수 및 함수의 조합으로 이루어져 있다 const x = ___ 처럼 변수에 할당된 일반적인 표현식이 있고, const x = 이부분을 쏙 빼고 5 + 10 같은 알맹이만 사용하는 문장 표현식이 있다 // 변수에 할당된 표현식 (숫자 값들의 덧셈) const sum = 5 + 10; // 15로 평가 // 변수에 할당된 표현식 (변수와 연산자를 사용) const x = 20; const y = 30; const result = x * y; // 600으로 평가 // 문장 표현식 (변수에 할당x) .. 2023. 11. 17.
JavaScript - throw / try / catch / finally throw / try / catch / finally 이친구들은 참 많이도 접하고 많이도 공부했다. 근데 따로따로 공부했다 🥲 그래서 따로 놀았다 이제는 개념을 한번더 뭉쳐줄 타이밍이다 throw, try, catch, finally 이 친구들은 전부다 예외 처리 라는 목표을 향해 뭉친 친구들이다 throw 는 예외를 던져(throw)버리고 try 는 예외 없이 잘 실행될 경우(happy case) catch 는 throw가 던진 에러를 캐치해서 뒷처리를 해주고 finally 는 예외가 있던 없던 그냥 실행된다 Throw 자바스크립트에서 예외는 - 런타임에러가 일어날 때 발생하거나 - throw 문으로 발생시킬 수도 있다 예외가 발생하면 인터프리터는 실행을 중단하고 가까운 예외처리기로 넘긴다 (이때 ca.. 2023. 11. 14.
JavaScript - Call By Value, Call By Reference 함수형 컴포넌트를 다루다 보니 정작 함수에 대해 모르는 부분이 많다는 생각이 들었다 그래서 이번 포스팅은 Call By Value, Call By Reference 를 정리해 보았다 함수를 호출하는 방법은 Call By Value, Call By Reference 요 두 가지 방법이 있다 → 값을 호출할거냐 참조를 호출할거냐 두가지 방식으로 본다 → 내가 이해한 개념은 함수 안에서 값을 어떻게 다루느냐 였다 이 부분을 이해하려면 c 언어의 포인터와 스택의 개념을 알아야 할 필요가 있다 그리고 인자와 매개변수의 차이도 잘 알아야 한다 (백문이 불여일견 ) function getUser(name, age) { // name 이랑 age 가 매개변수 return { name, age }; } getUser('.. 2023. 11. 9.
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.
반응형

티스토리툴바