Javascript (8) 썸네일형 리스트형 호이스팅과 TDZ 호이스팅은 자바스크립트에서 변수와 함수의 선언부가 코드가 실행되기 전에 미리 메모리에 할당되는 과정이다. 변수 호이스팅var, let, const는 호이스팅 방식에서 차이가 있다.1. var 호이스팅var로 선언된 변수는 호이스팅 시 초기값이 undefined로 설정된다.console.log(a); // undefinedvar a = 10;console.log(a); // 10 위 코드는 내부적으로 아래와 같이 해석된다.var a; // 변수 선언이 호이스팅됨 (초기값: undefined)console.log(a); // undefined 출력a = 10; // 값 할당console.log(a); // 10 출력 2. let, const 호이스팅let, const도 호이스팅은 되지만,.. Axios와 Fetch의 차이 프로젝트를 구현할 때, 주로 axios를 썼다. 하지만, fetch를 사용해보면 좋겠다는 멘토님의 말씀을 듣고 axios와 fetch의 차이에 대해 다시 공부해보았다.Axios1. 어떻게 설치할까?Axios를 사용하려면 패키지 매니저를 사용하여 별도로 설치해야 한다. 2. 어떻게 사용할까?import axios from 'axios';axios.get('') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); 3. JSON 처리Axios는 응답 데이터를 자동으로 JSON으로 변환한다.import axios from 'axios';axios.get('') .then(re.. JSON.stringify()와 JSON.parse() 프로젝트를 구현하다가, local storage에 저장한 데이터를 사용하기 위해 가져오면서 JSON.parse()라는 문법을 사용했다. 정말 기본적인 지식임에도 불구하고 창피하지만 왜 사용했는지 설명하라고 하면 하지 못할것 같아서 정리했다. 내가 사용한 상황은 다음과 같다. 먼저, isLike 상태가 True인 값을 가공하여 local storage에 저장한다. 이후, local storage에서 likes라는 키 값으로 저장한 값을 불러온다....const [products, setProducts] = useState(() => { // 앱 로드 시 localStorage에서 likes를 불러와 초기화 const savedLikes = JSON.parse(localStorage.getItem.. 자바스크립트 Date 객체와 toLocaleDateString(), toLocaleString() 자바스크립트의 Date 객체를 자주 다루면서, toLocaleDateString()과 toLocaleString()에 대해 알게 되었다. 먼저, Date 객체에 대해 알아보고 이후 메서드들을 살펴보겠다. Date 객체 Date 객체 생성 방법은 어렵지 않다. 특정 날짜를 지정하여 다양한 방법으로 생성할 수 있다.const now = new Date();console.log(now); // 예: Wed Dec 31 2024 13:45:30 GMT+0900 (Korean Standard Time)// YYYY-MM-DD 형식const date1 = new Date("2024-12-31");// MM/DD/YYYY 형식 (주의: 미국식)const date2 = new Date("12/31/2024");// 년.. 자바스크립트 메서드와 원본 데이터 유지 자바스크립트 메서드자바스크립트로 기능을 구현하다보면 여러 메서드들을 많이 쓰게 된다. 이번 기회에 자세히 다시 한번 알아보았다. map(), filter()는 자주 사용했는데, 나머지 메서드들은 새로 알게 되었다. map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소만 필터링한다. reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다. some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트한다.. Ajax, V8 자바스크립트 엔진, 그리고 Node.js와의 관계 Ajax와 V8 자바스크립트 엔진, 그리고 Node.js와의 관계에 대해서 알게 되었다.Ajax이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 html 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로부터 새로운 html을 전송 받아 웹페이지 전체를 처음부터 다시 렌더링했다.이러한 방식은 아래와 같은 문제가 있었다.변경할 필요가 없는 부분까지 포함된 html 코드를 서버로부터 받아 불필요한 데이터 통신이 발생화면 전환으로 인한 순간적인 깜빡임 발생1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpRequest라는 이름으로 등장했다. 이로써, 필요한 .. 단축 평가, 옵셔널 체이닝 연산자, null 병합 연산자의 쓰임 기초적인 부분이지만, 코드를 해석하다 보면 헷갈릴 때가 있다. 단축 평가 논리곱 연산자는 두 개의 피 연산자가 모두 true로 평가될 때 true를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.'Cat' && 'Dog' // Dog 논리합 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 논리합 연산자도 좌항에서 우항으로 평가가 진행된다.'Cat' || 'Dog' // Cat 다른 기초 예제'Cat' || 'Dog' // 'Cat'false || 'Dog' // 'Dog''Cat' || false // 'Cat''Cat' && 'Dog' // 'Dog'false && 'Dog' // false'Cat' && false // false 실무에서는 어떻게 쓰일까.. 데이터 타입은 왜 필요한 것일까? 개발 중, 데이터 타입 오류는 많이 겪었지만 본질적으로 왜 데이터 타입이 필요한지는 생각해보지 못했다. 이번을 계기로 정리해보았다. 값은 메모리에 저장하고 참조할 수 있어야 한다. 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 한다.var score = 100; 위 코드가 실행되면 컴퓨터는 숫자 값 100을 저장하기 위해 메모리 공간을 확보한 다음, 확보된 메모리에 숫자 값 100을 2진수로 저장한다. 이러한 처리를 하려면 숫자 값을 저장할 때 확보해야 할 메모리 공간의 크기를 알아야 한다. 또한, score 변수의 경우, 저장되어 있는 값이 숫자 타입이므로 8바이트 단위로 읽어 들이지 않으면 값이 훼손된다. 더불어, 2진수는 데이터 타입에 따라 숫자, 문자 등 다양하게 해석될.. 이전 1 다음
