1. 웹개발/1_1_1 JavaScript 검색 결과

해당 글 26건

[Javascript] 코드 품질을 높이는 방법

코드 품질을 높이는 것은 개발 과정에서 매우 중요하고 기본적인 원칙들이 존재합니다. 무조건 따라야 하는 것은 아니지만, 품질이 좋은 코드는 유지보수가 쉽고 버그가 적게 발생하며 향후 기능 추가나 변경이 용이합니다. 따라서 이번 글에서는 코드 품질을 높이는 방법과 이유에 대해서 포스팅하겠습니다. [고품질 코드 작성은 일정을 지연시키는가?] 단기적으로 보면 고품질 코드를 작성하는 데 시간이 더 걸릴 수 있습니다. 하지만 한 번 사용하고 버릴 시스템이 아닌 좀 더 중요한 소프트웨어를 개발하고 있다면, 일반적으로 고품질 코드를 작성하는 것이 중장기적으로는 개발 시간을 단축해 줍니다. 코드 품질을 고려하지 않고 먼저 떠오르는 대로 코딩하면 처음에는 시간을 절약할 수 있습니다. 그러나 이런 코드는 머지않아 취약하고..
1. 웹개발/1_1_1 JavaScript 2024. 2. 25. 11:16

[Javascript] Prototype과 Class의 개념과 차이

이번 글에서는 프로토타입과 클래스에 대해 다루어 보려고 합니다. 프로토타입은 ES6 이전부터 나왔고, 클래스는 ES6에서 도입되었습니다. 프로토타입과 클래스가 무엇이며 어떠한 차이를 갖고 있는지 간단한 코드들을 보면서 확인하겠습니다. [Prototype] 자바스크립트 프로토타입(Prototype)은 자바스크립트 객체 지향 프로그래밍에서 객체 상속과 프로퍼티 공유를 구현하는 데 사용되는 중요한 개념입니다. 모든 객체는 프로토타입을 가지며, 이를 통해 다른 객체의 프로퍼티와 메서드를 상속하고 공유할 수 있습니다. 프로토타입은 객체 간의 연쇄적인 상속을 가능하게 합니다. 객체가 다른 객체의 프로퍼티나 메서드를 참조할 때, 프로토타입 체인을 통해 상위 객체(부모 객체)로부터 프로퍼티나 메서드를 찾습니다. 이러한..
1. 웹개발/1_1_1 JavaScript 2024. 1. 27. 21:04

[Javascript] Cookies, Session And Web Storage의 차이점

쿠키(Cookies), 세션(Session), 그리고 웹 스토리지(Web Storage)는 모두 웹 개발에서 데이터를 저장하고 관리하는 데 사용되는 기술이지만, 각각의 특징과 작동 방식이 다릅니다. 간단한 예제를 보면서 이들의 차이를 설명하겠습니다. 쿠키 세션 웹 스토리지 저장 위치 클라이언트 서버 클라이언트 데이터 저장 방식 키-값 쌍 형태의 작은 텍스트 파일 서버 측에 사용자 세션 데이터를 저장하고, 클라이언트는 세션 ID를 사용하여 서버의 데이터에 접근 키-값 쌍으로 데이터를 저장하며, 로컬 스토리지와 세션 스토리지 두 가지 유형 존재 데이터 전송 모든 HTTP 요청과 함께 서버로 자동으로 전송 세션 ID가 클라이언트로 전송되지만, 세션 데이터는 서버에 저장되므로 클라이언트와 서버간의 통신을 통해 ..
1. 웹개발/1_1_1 JavaScript 2024. 1. 20. 23:11

[Javascript] 불변성이란?

자바스크립트는 동적 타입 언어로, 변수에 저장되는 데이터의 타입은 런타임에 동적으로 결정됩니다. 자바스크립트의 데이터 타입은 크게 두 가지 범주로 나눌 수 있습니다. 원시 데이터 타입(Primitive Data Types)과 참조 데이터 타입(Reference Data Types)입니다. 자바스크립트에서 원시타입은 불변하고 참조타입은 가변적입니다. 자바스크립트에서 불변성은 "변하지 아니하는 성질", 말 그대로 바뀌지 않는다는 뜻이며 이 개념은 함수형 프로그래밍에서 중요하게 여겨지는 개념 중 하나입니다. 원시타입 참조 타입 Number Array String Object Boolean Function Undefined Date Nul RegExp Symbol Map, Set ... [원시타입] let a ..
1. 웹개발/1_1_1 JavaScript 2023. 12. 23. 08:40

[Javascript] Function Declaration과 Function Expression의 차이

JavaScript에서 함수를 정의하는 방법에는 함수 선언형(Function Declaration)과 함수 표현식(Function Expression) 두 가지가 있습니다. 함수 선언형 (Function Declaration) 함수 선언형은 함수 이름과 함수 본문으로 구성됩니다. 함수 선언은 전역 스코프 또는 함수 스코프에서 사용할 수 있으며, 호이스팅(hoisting)이 발생합니다. 이는 함수를 선언하기 전에 호출해도 오류가 발생하지 않는다는 것을 의미합니다. 함수 선언형은 함수 이름이 필수이며, 함수 표현식과 달리 이름을 가지고 있기 때문에 재귀적인 함수 호출에 유용합니다. function greet(name) { console.log(`Hello, ${name}!`); } greet('Star');..
1. 웹개발/1_1_1 JavaScript 2023. 12. 9. 12:22

[Javascript] 브라우저 렌더링 과정

브라우저 렌더링 과정은 웹 페이지를 브라우저에 표시하기 위한 단계적인 프로세스를 나타냅니다. 이러한 프로세스를 이해하면 웹 페이지를 최적화하고 성능을 향상시킬 수 있습니다. [HTML 파일] Hello, World! This is a sample paragraph. [CSS 파일]h1 { color: blue; }[JS 파일]document.querySelector('p').style.color = 'red'; 브라우저 렌더링 과정을 아주 간단한 예제와 함께 살펴보겠습니다. 렌더링 과정은 HTML, CSS, Javasciript의 상호작용으로 구성됩니다. 1. 문서 파싱(Document Parsing) 브라우저는 HTML 문서를 가져오고, 문서의 각 요소(태그)를 파싱하여 DOM(Document Obje..
1. 웹개발/1_1_1 JavaScript 2023. 12. 1. 22:38

[Javascript] 런타임 작동 방식

이번 글에서는 Javascript 런타임에 대하여 알아보겠습니다. Javascript 런타임은 Javascript가 구동되는 환경을 말합니다. 즉, Javascript 런타임은 Javascript 코드를 해석하고 실행하며, 필요한 리소스와 API를 제공하여 코드가 다양한 작업을 수행할 수 있게 합니다. Javascript 런타임 구성 요소는 다음과 같습니다. 1. 엔진 Javascript 코드를 실행하는 핵심 구성 요소입니다. 가장 유명한 Javascript 엔진 중 하나는 구글의 *V8엔진으로, Chrome과 Node.js에서 사용됩니다. 브라우저마다 다른 엔진을 사용할 수 있으며 Edge, IE는 Chakra라는 엔진을 사용하고 있습니다. 이러한 엔진은 Javascript 코드를 해석하고 실행하는 역..
1. 웹개발/1_1_1 JavaScript 2023. 11. 25. 09:02

[Javascript] 클로저(Closure)란?

클로저란? 클로저는 함수가 다른 함수 안에서 정의되고, 그 함수의 외부 변수에 접근할 수 있는 것 - 함수 내 함수 클로저는 함수 내부에 정의된 함수입니다. 이 함수는 외부 함수의 스코프에 접근할 수 있습니다. - 외부 변수 접근 클로저는 외부 함수(자신포함)의 변수나 매개변수에 접근할 수 있으며, 그 값을 읽거나 변경할 수 있습니다. - 스코프 유지 외부 함수가 실행을 완료하더라도 클로저 함수는 여전히 외부 함수의 스코프 정보를 유지합니다. 이것은 클로저 함수가 외부 함수의 변수에 계속 접근할 수 있는 이유입니다. 예시 위의 개념으로만 보면 이해가 잘 안 될 수 있으니 예제를 통해 자세히 살펴보도록 하겠습니다. function outer() { let outerVar = '저는 외부 변수입니다.'; f..
1. 웹개발/1_1_1 JavaScript 2023. 11. 19. 21:34

[Javascript] 웹 접근성을 높이는 방법

웹 표준과 웹 접근성은 서로 보완적이며, 함께 고려되면 더 나은 웹 경험을 제공할 수 있습니다. 개발자들과 디자이너들은 표준을 준수하고 웹 접근성을 고려하여 웹 사이트를 개발하는 것이 좋습니다. 이번 글에서는 웹 표준과 웹 접근성과 웹 접근성을 높이는 방법에 대하여 알아보겠습니다. [웹 표준이란?] 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격을 말합니다. 반드시 지켜야 하는 것은 아니지만 표준을 따르면 다양한 브라우저와 호환하게 해 주고 개발자들은 일관된 규칙과 구조를 활용하여 빠르게 웹 페이지를 개발할 수 있습니다. 그리고 검색엔진에 노출이 잘 될 확률이 높아집니다. [웹 접근성이란?] 웹 애플리케이션에 대한 모든 사용자, 특히 장애를 가진 사용자들이 동등하게 접근하고 이해할 수 있도록..
1. 웹개발/1_1_1 JavaScript 2023. 11. 17. 21:14

[Javascript] Execution Context란?

1. Execution Context란? Execution Context(실행 컨텍스트)는 실행 문맥이라고도 합니다. Execution Context는 굉장히 추상적인 개념인데요. 자바스크립트 코드가 실행될 때 생성되는 환경 및 실행에 필요한 정보를 관리하는 중요한 개념입니다. 자바스크립트 엔진은 코드를 실행할 때 현재 실행 중인 컨텍스트를 추적하며, 이 컨텍스트에는 코드가 실행되는 동안 필요한 데이터와 정보가 저장됩니다. 이번 글을 통해 Execution Context에 대해 자세히 알아보도록 하겠습니다. 2. Execution Context 종류 컨텍스트는 두 개 이상의 종류가 있고, 종류마다 특정 조건에 생성이 됩니다. 전역 실행 컨텍스트 가장 기본이 되는 실행 컨텍스트 입니다. 자바스크립트 코드가..
1. 웹개발/1_1_1 JavaScript 2023. 11. 10. 23:31

[Javascript] Callback, Promise 그리고 async/await의 차이점

Callback, Promise, 그리고 async/await은 모두 JavaScript에서 비동기 작업을 다루는 방식입니다. 이번 글에서는 각각의 차이점에 대해 포스팅해 보겠습니다. 비동기 작업을 다루기 전에 동기와 비동기의 차이점부터 작성하였으니 참고해 주세요. 1. Synchronous, Asynchronous - 동기 (Synchronous) 동기 작업은 순차적으로 진행되며, 하나의 작업이 완료될 때까지 다음 작업이 시작하지 않습니다. 동기 코드는 작업이 순서대로 진행되기 때문에 간단하게 이해할 수 있고, 디버깅하기 쉽습니다. 하나의 작업이 끝날 때까지 다른 작업을 수행하지 않기 때문에 성능 문제가 발생할 수 있습니다. 특히 긴 시간이 걸리는 작업은 애플리케이션을 블록 시킬 수 있습니다. - 비동..
1. 웹개발/1_1_1 JavaScript 2023. 10. 29. 10:05