분류 전체보기 검색 결과

해당 글 443건

[React] axios를 사용하는 이유 (vs fetch)

Javascript에는 HTTP Request를 위한 방법으로 대표적으로 axios와 fetch가 있습니다. 이번 글에서는 각각의 장단점과 간단한 사용방법을 보면서 비교하고 차이를 알아보겠습니다. Fetch 간단하면서도 강력한 기능을 제공하며, 주로 모던 브라우저에서 사용되는 경향이 있습니다. [장점] ES6부터 도입된 Javascript 내장 라이브러리 브라우저 환경에서 사용 가능하며, import 하면 node.js에서도 사용 가능 Promise 기반 사용법이 간단하고 직관적이며, 간단한 요청에서는 불필요한 설정이 없이 사용 [단점] HTTP 에러(404, 500 등)를 자동으로 걸러내지 않음 응답 데이터가 바로 넘어오지 않아 JSON으로 파싱해야됨 IE11 및 구형 브라우저 지원은 추가 설정이나 폴..
1. 웹개발/1_1_5 React JS 2023. 12. 30. 19:27

[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

[Jest] Jest를 사용하는 이유

현대 웹 개발에서 코드의 안정성과 신뢰성은 점점 더 중요해지고 있습니다. 이런 상황에서 코드의 품질을 보장하고 버그를 최소화하기 위해선 강력한 테스트 프레임워크가 필수적입니다. 그중에서도 Jest는 자바스크립트 개발자들에게 널리 사용되는 강력한 도구 중 하나입니다. 이번 글에서는 Jest에 대해 알아보도록 하겠습니다.  테스트의 종류1. Unit Test (단위 테스트)개별 컴포넌트, 함수, 또는 모듈 등 코드의 작은 부분들을 테스트 하는 것 2. Integration Test (통합 테스트)여러 컴포넌트 간의 상호 작용을 테스트하는 것 3. E2E Test (End-To-End 테스트)유저 입장에서 유저의 모든 상황에 대해 시작부터 끝까지 테스트하는 것  Jest란?Jest는 페이스북에서 개발한, 자바..
1. 웹개발/1_1_7 Jest 2023. 12. 17. 18:26

[React] React Query를 사용하는 이유 (vs Redux)

저는 개인적으로 운영 중인 프로젝트에서는 API 통신과 비동기 데이터 관리를 위해 React Query를 적극적으로 활용하고 있습니다. 프로젝트를 처음 진행할 당시에는 Redux의 redux-saga를 주로 사용하여 서버와의 API 통신과 비동기 데이터를 관리하였습니다. 그러다가 불편함을 느끼고 React Query를 도입하여 Redux에서 React Query로 마이그레이션하였습니다. 이번 글에서는 왜 React Query도입을 결정하게 되었는지 정리하려고 합니다. Redux는 Global State Management!Redux는 모두가 알다시피 Redux의 기본 원칙이 존재합니다. 단일 스토어여야 하며, 상태는 불변성을 유지해야 하기 때문에 읽기 전용이어야 하며 순수함수로 상태를 변경해야 합니다. ..
1. 웹개발/1_1_5 React JS 2023. 12. 14. 21:22

[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

Module '"@prisma/client"' has no exported member 'PrismaClient'. 해결 방법

Yarn Berry 환경에서 작업 중인 토이 프로젝트에서 prisma를 사용하려고 했는데 다음과 같은 에러가 발생하였습니다.'"@prisma/client"' has no exported member 'PrismaClient'"@prisma/client"' 모듈에 내보낸 멤버 'PrismaClient'이(가) 없습니다.  [에러 원인]저는 PrismaClient를 통해 스키마에 접근해 데이터를 가져오려고 했습니다. 하지만 '"@prisma/client"' has no exported member 'PrismaClient' 에러가 발생하였습니다. 저의 작업 환경은 Yarn Berry 이다 보니 node_modules 폴더가 아닌 PnP로 되어있는 라이브러리 파일을 참조합니다. 그래서 기본 prisma 설정으..
1. 웹개발/1_1_8 Error Handling 2023. 11. 12. 21:10

[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