자바라 잡혀라 자바스크립트

1. 랜더링이란? Rendering 사전적으로는 '표현', 기본적으로 시각적인 결과물을 생성하는 과정을 나타낸다. 웹개발에서 랜더링이라 함은 HTML, CSS, JavaScript를 사용하여 웹페이지를 생성하고 브라우저에 표시하는 과정을 의미한다. 이 과정에서 클라이언트 사이드 / 서버 사이드 랜더링이 나뉘게 된다. 2. 클라이언트 사이드 랜더링은 무엇인가? Client-Side Rendering, CSR은 브라우저에서 JavaScript를 사용하여 동적으로 웹 페이지를 생성하는 방식이다. 초기 HTML은 비어 있거나 간단한 마크업만 포함하고, 페이지가 로드된 후에 JavaScript가 실행되어 페이지를 동적으로 구성하고 랜더링 한다. 3. 서버사이드 랜더링은 무엇인가? 서버에서 HTML코드를 생성하고 ..

fetch()는 정말 많이 사용하는 메서드이다. fetch() 메서드를 통해 웹브라우저에서 제공하는 비동기 네트워크 통신(대표적으로 AJAX)을 할 수 있다. * AJAX(Asynchronous Javascript and XML) : 페이지 새로고침없이 동적으로 데이터 로드 및 업데이트 가능 기본적으로 fetch()메서드는 Promise를 반환하기 때문에, 비동기적으로 데이터를 가져올 수 있다. GPT에게 fetch()에 대해 물어봤다. fetch()의 주요 특징과 사용법은 다음과 같다. HTTP 요청: fetch() 메서드를 사용하여 GET, POST, PUT, DELETE 등 다양한 HTTP 요청을 보낼 수 있습니다. Promise 반환: fetch() 메서드는 네트워크 요청에 대한 응답을 처리하기 ..

asycn / await를 사용하면 프라미스를 편하게 사용할 수 있다. 함수에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행상태(resolved promise)로 값을 감싸 이행된(성공한) 프라미스가 반환되도록 한다. // 일반 함수에서 async 작성법, function 앞에 작성한다 async function test() { return 7; } // 화살표 함수에서 async 작성법, 인수(Parameter)앞에 async를 작성한다. const test = async() => { return 7; } await와의 활용 await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만듭니다. 프라미스가 처리되면 그 결과와 함께 실행이 재개..

Promise(프로미스)는 자바스크립트에서 비동기 작업을 처리하는 객체입니다. 주로 네트워크 요청이나 파일 읽기 등 시간이 걸리는 작업을 처리할 때 사용됩니다. Promise는 비동기 작업이 완료되었을 때 성공 또는 실패 여부에 따라 처리할 수 있는 콜백 함수를 제공합니다. ** 비동기(asynchronous)란 한 작업이 완료되기 전에 다른 작업을 동시에 수행할 수 있는 것을 의미합니다. 이는 작업이 순차적으로 실행되는 동기(synchronous) 방식과는 달리, 작업의 완료 여부와 상관없이 다음 작업을 진행할 수 있음을 의미합니다. Promise는 세 가지 상태를 가질 수 있습니다: 대기(pending): 비동기 작업이 아직 완료되지 않은 상태입니다. 이행(fulfilled): 비동기 작업이 성공적으..

객체를 생성하는 방법중 가장 편리한 방법은 객체리터럴 방식이다. 객체리터럴은 중괄호 안에 속성(key-value pair)을 나열하여 객체를 표현하는 것이다. const water = { brand : "삼다수", capacity : 550, factory : "jeju" } 여기서 속성을 추가/삭제 하기 위해서는 1. 점 표기법 (Dot notation) 2. 대괄호 표기법(Bracket notation) 이 있다. const water = { brand : "삼다수", capacity : 550, factory : "jeju" } // 속성 추가 // 대괄호 표기법에서 속성이름이 문자열인 경우 반드시 따옴표를 사용해야한다. // 따옴표를 사용하지 않으면 변수로 취급된다. water.price = 10..

왜 이걸 알아야할까? 많은 데이터들 속에서 내가 원하는 부분만 사용 및 가공하기 위해서? 다양한 방법들 1. 반복문 사용하기 for 문 const example = [1, 2 , 3, "a", "김"] const target = "김" // for반복문 사용 function findTarget(array){ for (let i=0; i < array.length; i++){ if(array[i] === target){ return i; } } } const result = findTarget(example) console.log(result, example[4]) // 4, "김" // 값이 여러개 일 때 모두 찾기 // 새로운 배열을 만들어서 담는다, index든 값이든 선택 const example ..

템플릿리터럴(template literal) 템플릿리터럴 사용하면 뭐가 좋을까? 특정 문자열이 담긴 변수를 동적으로 사용할 수 있게된다. str1 + srt2 와 같이 문자열을 연결할 때 보다 가독성이 좋다. 사용방법 문자열 안에 변수를 사용하기 위해서는 백틱(`)으로 문자열을 감싸고 ${} 구문을 사용하여 변수를 삽입한다. const apple = "Iphone"; const samsung = "Galaxy"; function templateTest (someString) { const variable = `${someString} is the best!` console.log(variable) return variable } const result1 = templateTest(apple); const..

비교연산자 설명 예시 결과 == 두 값이 동등한지 비교합니다. 형 변환을 수행합니다. 1 == '1' true === 두 값이 정확하게 일치하는지 비교합니다. 형 변환을 수행하지 않습니다. 1 === '1' false != 두 값이 부등한지 비교합니다. 동등 연산자(==)의 반대입니다. 1 != '1' false !== 두 값이 정확하게 불일치하는지 비교합니다. 일치 연산자(===)의 반대입니다. 1 !== '1' true 1. == 와 != 는 형변환을 수행한다. 자바스크립트는 동등,부등 비교 연산자를 사용할 때, 피연산자의 데이터 타입이 다를 경우 타입을 일치시키기 위해 형 변환을 수행한다 문자열과 숫자를 비교시, 문자열을 숫자로 변환한다. 불리언 값과 다른 데이터 타입을 비교시, 불리언 값을 숫자로..

1. 자바스크립 데이터 타입 순번 원시/참조 데이터타입 설명 예시 1 원시 문자열 (String) 텍스트 데이터를 나타냅니다. "Hello, World!" 2 숫자 (Number) 숫자를 나타냅니다. 정수 및 부동 소수점 숫자를 모두 포함합니다. 42, 3.14 3 불리언 (Boolean) true 또는 false 값을 나타냅니다. true, false 4 null 값이 없음을 나타냅니다. null 5 undefined 값이 할당되지 않았음을 나타냅니다. undefined 6 참조 객체(Object) 여러 개의 속성(키-값 쌍)을 포함하는 컨테이너입니다. {name: "John", age: 30} 7 배열(Array) 여러 개의 값을 순서대로 저장하는 리스트입니다. [1, 2, 3, 4] 8 함수(Fun..

var는 구식자바스크립트의 잔재다. 대부분의 경우 let으로 대체가 가능하나 다른방식으로 동작이 되기 때문에 무작정 바꿀 수는 없는 노릇이다. 여전히 var로 만들어진 많은 코드들이 있기에 var와 let,const와의 차이점에 대해 알아야 한다. -- Var / let, const 차이 (var의 특성) 1. var는 블록스코프가 없다, 함수스코프 이거나 전역스코프이다. (let과 const는 블록스코프) 블록 기준으로 생기지 않기 때문에 블록 밖에서 접근이 가능하다. // let이나 const로 선언시 Uncaught ReferenceError: test is not defined if (true) { var test = true; // 'let' 대신 'var'를 사용했습니다. } alert(tes..