프론트 산악회🌾 프론트 산악회🌾

JavaScript

• [JavaScript] Reactivity

  Front-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()도 그렇고, 여러 비동기, 콜백 함수의 작업은 어떻게 하고 있는 건데?!" 여기서 등장하는 개념이 이번 글에서 다룰 이벤트 루프이다. 자바스크립트의 메인 스레드는 이벤트 루프에 의해 관리된다. 또 글을 읽기 전, 미리 알아두면 좋을 개념은 자바스크립트의 런타임 환경은 멀티 스레드 환경처럼 동작한다는 것이다. 이 글은 자바스크립트 런타임 환경과 이벤트 루프의 개념을 큰 그..

• [자바스크립트 완벽 가이드] 3장 - 타입, 값, 변수

  Reading/Tech 2022. 8. 11. 22:43

  🍀 목차 3.1 개요와 정의 3.2 숫자 3.3 텍스트 3.4 불 값 3.5 null과 undefined 3.6 심벌 3.7 전역 객체 3.8 불변인 기본 값과 가변인 객체 참조 3.9 타입 변환 3.10 변수 선언과 할당 3.1 개요와 정의 기본 타입(불변) : 숫자, 문자열, 불(boolean), null, undefined, 심벌(Symbol) 객체 타입(가변) : 기본 객체, 배열, Set 객체, Map 객체, RegExp 타입, Date 타입, 함수와 클래스 등. 자바스크립트 인터프리터는 자동으로 가비지 컬렉션을 수행해 메모리를 관리한다. 일반적으로 객체나 다른 값을 직접 파괴하거나 할당을 해제해줄 필요는 없다. 프로그램에서 어떤 값을 더 이상 참조하지 않으면 인터프리터는 그 값을 다시 사용하지..

• [자바스크립트 완벽 가이드] 2장 - 어휘 구조

  Reading/Tech 2022. 5. 17. 16:59

  🍀 목차 2.1 자바스크립트 프로그램의 텍스트 2.3 리터럴 2.4 식별자와 예약어 2.5 유니코드 2.6 선택 사항인 세미콜론 2.1 자바스크립트 프로그램의 텍스트 자바스크립트는 대소문자를 구별하기에 while을 While이나 WHILE로 써서는 안 된다. 캐리지 리턴(CR, \r), 라인피드(LF, \n), 스페이스 문자, 탭, ASCII 제어 문자, 다양한 유니코드 스페이스 문자를 모두 공백으로 인식한다. 2.3 리터럴 리터럴(literal)은 프로그램 안에 직접 쓴 데이터 값이다. 12 1.2 "hello world" 'Hi' true false null 2.4 식별자와 예약어 자바스크립트에서 식별자는 상수, 변수, 프로퍼티, 함수, 클래스의 이름에 사용하고 일부 루프의 라벨로 사용한다. 반드시 ..

• [자바스크립트 완벽 가이드] 1장 - 자바스크립트 소개

  Reading/Tech 2022. 5. 10. 14:34

  🍀 목차 자바스크립트 소개 1.1 자바스크립트 탐험 1.2 Hello World 1.3 자바스크립트 여행 들어가며... 인턴생활 동안 많은 것을 알려주신 멘토 의숙님께서 선물해 주신 책이다! 동기 주희님과 함께 책 앞 페이지에 영광스런 한마디를 써달라고 부탁드렸다. 그 동안 소설/자서전을 제외한 기술 책을 제대로 읽은 적이 손에 꼽는데, 꼭 완주해서 자바스크립트 초보자라는 틀을 벗어나자! 🤪 게시글에는 책을 읽으며 새롭게 알게 된 것들, 흥미로운 점 등을 기록할 것이다. 자바스크립트 소개 자바스크립트는 객체 지향, 함수형 프로그래밍 스타일에 적합한 고수준의 동적 인터프리터 언어이다. 프로그래밍 패러다임 👉 프로그래머에게 관점을 갖게 해주는 역할을 하는 체계. 절차지향 프로그래밍, 객체지향 프로그래밍, 함..