개발관련/자바스크립트 팁

개발관련/자바스크립트 팁

javascript fetch response body가 null인 경우 처리 하는 방법.

fetch 함수를 사용하여 POST,GET 요청을 보내고 응답 본문(response body)이 null인 경우, response.json()을 호출하면 오류가 발생할 수 있습니다. 이는 response.json() 메소드가 유효한 JSON을 기대하기 때문입니다. 서버가 내용 없는 응답(예: 204 No Content 상태 코드)을 반환하는 경우, 이 메소드를 사용하기 전에 응답에 실제로 JSON 본문이 있는지 확인해야 합니다. 응답 본문이 null일 가능성이 있는 상황을 처리하는 방법은 다음과 같습니다: async function requestAPI() { try { const response = await fetch({APIURL}, { method: 'POST', headers: { 'Content..

개발관련/자바스크립트 팁

타입스크립트는 왜 Object.keys의 타입을 모를까

타입스크립트의 Object.keys 타입 추론 타입스크립트를 사용하다가 이해할수 없는 에러와 마주쳤다. const obj = { key1:"", key2:"" }; Object.keys(obj).forEach((section) => { delete obj[section]; } 위와 같은 코드가 있을때 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ key1: string; key2: string; }'. No index signature with a parameter of type 'string' was found on type '{ key1: string; key2:..

개발관련/자바스크립트 팁

자바스크립트의 setTimeout은 왜 정확한 타이밍을 보장하지 못할까

자바스크립트의 setTimeout 함수는 특정 작업을 지정된 시간 후에 실행하도록 예약하는 데 사용됩니다. 하지만 의도와는 다르게 setTimeout의 실행 시간을 정확하게 보장할 수는 없습니다. 그 이유는 자바스크립트의 이벤트 루프와 싱글 스레드의 작동 방식과 관련이 있습니다. setTimeout 예시 function printPerformanceNow() { console.log(`${performance.now().toFixed(0)}ms`); } function myCallback() { console.log(`setTimeout 실행 시간`); printPerformanceNow(); } console.log(`실제 실행 시간`); printPerformanceNow(); // 1초 후에 콜백 ..

개발관련/자바스크립트 팁

자바스크립트 parseInt / parseFloat / number를 이용하지 않고 문자열을 숫자로 형변환 하는 구현 방법

구현 function myNumber(str) { var isNegative = false; var result = 0; // 공백 제거 str = str.trim(); // 음수 체크 if (str[0] === '-') { isNegative = true; str = str.slice(1); } for (var i = 0; i 57) { break; } // 아스키 코드를 활용한 숫자 변환 var digit = charCode - 48; result = result * 10 + digit; } // 음수 처리 if..

개발관련/자바스크립트 팁

자바스크립트를 예로 들어서 의존성 역전 원칙(Dependency Inversion Principle, DIP)

의존성 역전 원칙(Dependency Inversion Principle, DIP) 자바스크립트를 예로 들어서 의존성 역전 원칙(Dependency Inversion Principle, DIP)을 설명해드리겠습니다. 가정해봅시다. 우리는 웹 애플리케이션을 개발하고 있으며, 서버에서 데이터를 가져오는 DataFetcher 모듈이 필요합니다. 초기에는 DataFetcher 모듈이 직접 서버와 통신하고 데이터를 가져오는 기능을 가지고 있습니다. class DataFetcher { fetchData(url) { // 서버와 통신하여 데이터를 가져오는 로직 return fetch(url).then((response) => response.json()); } } 이렇게 구현된 DataFetcher 클래스는 외부 의..

개발관련/자바스크립트 팁

자바스크립트의 실행 컨텍스트, Lexical Environment 및 관련 컨셉 이해하기

자바스크립트는 싱글 스레드 언어로써 동시성을 처리하기 위해 실행 컨텍스트와 Lexical Environment, Environment Record, Outer Environment Reference와 같은 개념들을 사용합니다. 이 포스팅에서는 이러한 개념들을 살펴보고, 어떻게 상호작용하는지 이해해봅시다. 실행 컨텍스트 (Execution Context) 실행 컨텍스트는 코드가 실행되는 환경을 나타냅니다. 자바스크립트 엔진은 실행 컨텍스트 스택을 사용하여 실행 중인 코드의 컨텍스트를 추적합니다. 이 스택에는 전역 컨텍스트와 함수 컨텍스트가 포함될 수 있으며, 호출 스택이라고도 합니다. 전역 컨텍스트 전역 컨텍스트는 코드가 처음 실행될 때 생성되며, 전역 객체와 관련된 변수와 함수를 포함합니다. 전역 컨텍스..

개발관련/자바스크립트 팁

자바스크립트의 반복문 종류 및 사용법: for, for...in, for...of, forEach

자바스크립트의 반복문 종류 및 사용법 👉 for, for...in, for...of, forEach 안녕하세요! 오늘은 자바스크립트에서 사용할 수 있는 반복문의 종류와 각각의 사용법에 대해 알아보겠습니다. 자바스크립트에서는 주로 4가지 종류의 반복문을 사용합니다: `for`문, `for...in`문, `for...of`문, 그리고 `forEach`문입니다. 이 포스팅을 통해 각각의 반복문이 어떻게 사용되는지 이해할 수 있을 것입니다. 👉 for문 `for`문은 가장 기본적인 반복문입니다. 반복 횟수가 정해진 경우에 사용하며, 초기값, 조건식, 증감식을 통해 반복문을 제어합니다. 다음은 `for`문의 기본 구조입니다. for (초기값; 조건식; 증감식) { // 실행할 코드 } //예시: for (let ..

개발관련/자바스크립트 팁

자바스크립트 배열 유니크 요소만 남기기 , 중복 제거 하기

자바스크립트 배열 유니크 요소만 남기기 , 중복 제거 하기 주로 3가지 방법이 많이 쓰인다. Set const arr = [1,2,3,4,5,5,6,6,7] const result = [...new Set(arr)] //result [1, 2, 3, 4, 5, 6, 7] filter / indexOf const arr = [1,2,3,4,5,5,6,6,7] const result = arr.filter((num,index)=>{ returnarr.indexOf(num) === index }) //result [1, 2, 3, 4, 5, 6, 7] caching / frequency map const arr = [1,2,3,4,5,5,6,6,7] const cache = {} const result = [..

개발자 Dane
'개발관련/자바스크립트 팁' 카테고리의 글 목록