Front-End/JavaScript
-
[JavaScript] ReactivityFront-End/JavaScript 2024. 1. 19. 04:27
🍀 목차 글의 목적 Reactivity 사례 글의 목적 "React, Angular, Vue 같은 프론트엔드 프레임워크를 사용하려는 이유가 무엇인가?"에 대해서는 여러 이유가 나올 수 있다. 컴포넌트 기반으로 아키텍처를 구성하고 싶으므로, Vanilla JS로 개발하는 것보다 성능도 개선되어 있고 생산성도 높아지므로 등등... 이유 중 "Reactivity 때문"도 있을 수 있다. React, Vue와 같은 프론트엔드 프레임워크의 주요 이점 중 하나인 Reactivity는 무엇이고, 어떻게 적용되어 있을까? 해당 글은 추상적인 개념이었던 Reactivity를 조금이나마 이해해보기 위해 작성되었다. Reactivity Reactivity는 JavaScript 애플리케이션의 메모리에 있는 내용을 DOM에 H..
-
[JavaScript] 스코프(Scope)와 클로저(Closure)Front-End/JavaScript 2023. 4. 5. 04:07
🍀 목차 글의 목적 스코프 스코프의 구분 스코프 이해 + LHS, RHS 어휘적 스코프(Lexical Scope) 함수 레벨 스코프 vs 블록 레벨 스코프 클로저 클로저 예제 글의 목적 자바스크립트를 학습하다 보면 스코프(Scope), 클로저(Closure)라는 단어를 빈번하게 마주칠 수 있었다. 그럴 때마다 검색해서 대략적인 감만 잡고 넘어갔었다. 😎 "클로저가 무엇인가요?"라는 질문을 받았을 때, 내가 과연 이해한 답변을 할지, 외운 답변을 할지 생각해 봤을 때 후자에 가깝다고 느꼈다. 그렇기에 이 글은 자바스크립트의 스코프와 클로저를 이해하기 위해 작성됐다. 스코프 스코프는 자바스크립트뿐만 아니라 여러 프로그래밍 언어의 기본 개념이다. 우선, 아래 코드의 실행 결과를 예측해 보자. var x = '..
-
[JavaScript] 클린 코드 자바스크립트 강의 정리Front-End/JavaScript 2022. 12. 15. 00:04
🍀 목차 JavaScript 클린 코드? 변수 다루기 : 전역 공간 사용 최소화 변수 다루기 : 임시 변수 제거하기 타입 다루기 : 타입 검사, 형변환 주의하기, isNaN 경계 다루기 : 매개변수의 순서가 경계다 분기 다루기 : 값식문 분기 다루기 : 삼항 연산자 다루기, Truthy & Falsy Udemy 클린코드 자바스크립트(강사 장 현석님(Poco Jang), https://www.udemy.com/course/clean-code-js/) 강의를 개인적으로 정리하다 복습 겸 깔끔하게 포스팅하고 싶었다. 나쁜 코드인 이유와 습관을 고쳐주시는 강의였다. 모든 강의 내용 정리가 아니기에 내용이 흥미로우시다면 수강 추천드립니다! 👍 JavaScript 클린 코드? 해당 강의는 클린 코드에 대해 고민하는..
-
[JavaScript] 정규 표현식(Regular Expression) 정리Front-End/JavaScript 2022. 9. 21. 06:16
🍀 목차 글의 목적 정규 표현식이 뭘까? in JavaScript 응용 모음 시간 복잡도 학습에 도움이 되는 사이트 글의 목적 정규 표현식을 이해하고 JavaScript에서의 다양한 사용법을 정리하기 위해 작성됐다. 정규 표현식을 사용하면 문자열에서 특정 패턴을 찾고, 매칭 되는 것들을 배열로 받는 등 문자열 처리를 매우 편하게 할 수 있다. 웹 사이트의 이메일, 패스워드의 유효성 검증에도 자주 사용된다. 알아두면 손해는 안 보는 정규 표현식! 정규 표현식 객체(RegExp)의 메서드와 String 메서드, 다양한 예제로 정규 표현식을 이해해보자. 🔥 정규 표현식이 뭘까? 정규 표현식(Regular Expression(RegExp, Regex), 정규식)은 문자열에서 특정 내용을 매칭 하는 데 사용된다...
-
[JavaScript] 이벤트 루프(Event loop) 정리Front-End/JavaScript 2022. 8. 25. 03:52
🍀 목차 글의 목적 프로세스와 스레드? 자바스크립트의 런타임 환경 이벤트 루프 Task Queue Microtask Queue Render 큰 그림으로 이해 마치며 글의 목적 자바스크립트 언어 자체는 싱글 스레드(단일 스레드, Call Stack이 하나라 하나의 코드만 실행할 수 있음) 환경이다. 의문이 든다. 🤪 "setTimeout()도 그렇고, 여러 비동기, 콜백 함수의 작업은 어떻게 하고 있는 건데?!" 여기서 등장하는 개념이 이번 글에서 다룰 이벤트 루프이다. 자바스크립트의 메인 스레드는 이벤트 루프에 의해 관리된다. 또 글을 읽기 전, 미리 알아두면 좋을 개념은 자바스크립트의 런타임 환경은 멀티 스레드 환경처럼 동작한다는 것이다. 이 글은 자바스크립트 런타임 환경과 이벤트 루프의 개념을 큰 그..
