용용it

문자열 대체(replace)함수String.prototype.replace() 구문 replace(pattern, replacement) 예시 const paragraph = "Hi, my name is Dragon"console.log(paragraph.replace("i", ''));// H, my name is Dragon 참조https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace String.prototype.replace() - JavaScript | MDNString 값의 replace() 메서드는 pattern의 단일, 일부 혹은 모든 일치 항목이 replacement로 대치된 새로..

얕은 복사(Shallow Copy) ? JavaScript에서 얕은 복사는 주로 Object.assign()이나 전개 연산자(...)를 사용하여 수행된다. 복사본의 속성이 복사본이 만들어진 원본 객체와 같은 참조 (메모리 내의 같은 값을 가리킨다.)를 공유하는 복사이다. 따라서 원본 객체의 중첩된 객체가 변경되면 얕은 복사된 객체에도 변경될 수 있다. 예시를 먼저 보자, firstObj라는 객체를 만들고 호출해보자. 잘 나온다. 전개 연산자로 copyObj라는 객체를 만든다. copyObj를 호출하면 firstObj와 똑같은 속성들이 나온다 이번엔 원본 객체의 속성중 c를 변경하고 복사했던 객체의 c 속성을 확인해보면 원본의 속성을 변경했는데 복사본의 속성도 같이 변한 걸 알 수 있다. 깊은 복사(Dee..

get으로 얻어온 api에서 배열 안에 객체 형태로 여러가지 데이터가 반환된다. 바로 예시를 보자, console.log(following.response)를 해서 반환한 데이터이다. 반환된 데이터에는 배열안에 12개의 객체가 있다. 만약에 객체의 개수만큼, 즉 3개의 객체가 있으면 3줄로 렌더링 하게 하고싶으면 어떻게 해야할까 ? 일단 모든 객체를 console.log로 한 번씩, 총 12번 출력해야 써먹기 편할 것 같다. 이때 사용하는 것은 for of문, 즉 반복문이다. 그러면 반복문을 어떻게 사용해야할까 ? 정답 공개~ following.response 배열의 각 요소를 followingItem으로 순회하고 출력한다. 어떻게 출력이 될까 ? 이런식으로 객체의 수 만큼 순회하고, 출력한다. 만약 여..

documnet.createElement() 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환. 파라미터에 태그 이름을 넣어서 메서드를 사용하면 된다. // 새로운 요소를 생성합니다. var newDiv = document.createElement("div"); // 새로운 요소를 생성합니다. var newParagraph = document.createElement("p"); // 새로운 요소를 생성합니다. var newLink = document.createElement("a"); 이렇게 생성된 요소는 아직 문서에 추가되지 않았으며, 원하는 위치에 추가하거나 다른 요소와 조작할 수 있다. 예를 들어, 요소를 문서에 추가하려면 appendChild()나 insertBefore() 같은 메서드를 사..

document.getElementById() HTML `id` 속성(Attributes) 값으로 검색한 요소를 반환한다. 여러 요소가 검색되면, 가장 먼저 찾은 요소만 반환한다. 검색 결과가 없으면, `null`을 반환한다. 이걸 콘솔로 찍으면 어떻게 나올까 ? 안녕하세요, 이것은 제목입니다. 가 출력될 것이다. 정답. 말 그대로 "Id의 요소를 얻는다" 그러면 만약에 텍스트만 뽑아서 쓰고싶으면 ? console.log(heading.textContent); 이렇게 텍스트컨텐트만 뽑아서 쓰면된다. 그러면 이제 콘솔에 출력되는 건 안녕하세요, 이것은 제목입니다. document.querySelector() 'CSS 선택자'로 검색한 요소를 하나 반환한다. 여러 요소가 검색되면 가장 먼저 찾은 요소만 반환..

DOM(Document Object Model) DOM이란 HTML 문서를 객체로 표현한 것으로 JS에서 HTML을 제어할 수 있게 해준다. 노드(Node) DOM의 기본 구성 요소로이다. HTML 요소, 텍스트, 주석 등 모든 것을 의미한다. 요소(Element) HTML 요소를 의미한다. 문서 내에서 특정한 태그로 묶은 모든 것을 의미한다. 예를 들어, , , 와 같은 HTML 태그로 묶인 내용은 요소이다. 즉, 노드는 DOM의 구성 단위이며, 요소는 그 중 하나로 HTML 문서에서 태그로 묶인 내용을 나타낸다. 자식 요소 1 자식 요소 2 자식 요소 3 console.log(parent.childNodes) 먼저 보자, parent 클래스에 있는 모든 자식 노드를 출력하라고 콘솔로 찍었는데 자식 요..

fetch(주소, 옵션) 네트워크를 통해 리소스의 요청(Request) 및 응답(Response)을 처리할 수 있다. Promise 인스턴스를 반환한다. fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId: 1, id: 101, title: 'Custom Title', body: 'This is the body of the post.' }) }) .then(response => response.json()) .then(data => { console.log(data); // 서버로부터 받은 데..

스택 트레이스 프로그램 실행 중에 함수 호출이 어떻게 이뤄져왔는지 나타내는 정보. 오류가 어떤 함수 내에서 발생했는지 그 함수가 어떤 함수를 호출하였는지 보여준다. 함수 호출 스택(call stack)에 기반하여 생성되며, 오류가 발생한 함수에서부터 거슬러 올라가며 각 함수의 이름와 위치를 나열한다. 쉽게 말하면 우리가 콘솔에서 찍어봤을 때 에러가 나는데 여기서 나오는 오류 메세지와 스택 트레이스가 함께 출력이 되는 것이다. 즉, at 이 부분이 스택 트레이스, 또 다른 예시로, console.error(error.message)를 찍어보면 에러 메세지만 출력하는 것을 볼 수 있다. 참고로 console.error(error.stack)을 찍어보면 console.error(error)와 똑같은 결과가 나..

Promise를 사용하여 비동기 작업을 처리할 때, 두 가지 측면인 성공(Resolve)과 실패(Reject)에 대한 처리가 중요하다. Resolve(성공) 프로미스가 성공적으로 처리되면, resolve 콜백 함수가 호출된다. 이 함수는 프로미스가 해결된 값을 인자로 받아 해당 값으로 프로미스를 완료시킨다. const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('성공'); }, 1000); }); promise.then(result => { console.log(result); // '성공' }).catch(error => { console.error(error); }); 앞에서 배운 then 메서드는 promise가 ..

async/await 비동기 프로그래밍은 작업이 순차적이 아닌 동시에 여러 작업이 처리되는 방식이다. 이를 통해 프로그램이 더 효율적으로 동작할 수 있지만, 코드의 복잡성이 증가하고 가독성이 낮아질 수 있다. 때문에 async/await는 이런 비동기적인 작업을 더 쉽게 다루기 위해 도입된 개념이다. async 함수 : 함수 선언 앞에 async 키워드를 붙여서 선언한다. 이렇게 선언된 함수 내에서는 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있다. async 함수는 언제나 Promise를 반환한다. await 함수 : await 키워드는 async 함수 내에서만 사용 가능하며, 프로미스를 기다리는 역할을 한다. await 키워드 다음에 오는 표현식이 완료될 때까지 해당 함수의 실행을 ..