용용it

handleLevelChange("hard")} level={level}> HARDconst Hard = styled.button` ${({ level }) => level === "hard" && `background: ${colors.main.dark0}; color: ${colors.main.white0};`}`;const Hard = styled.button` ${(props) => props.level === "hard" && `background: ${colors.main.dark0}; color: ${colors.main.white0};`}`; 먼저 코드부터 보자, Hard 컴포넌트는 level이라는 props를 받고 있으며, styled-components를 활용..

html2canvas 이란? 특정 HTML 요소를 캡처후, 이미지로 변환하는 자바스크립트의 라이브러리이다.   언제 사용하면 좋냐면 예시를 먼저 보자.  블로그 주인장이 새로 도입한 기능인데,  저 이미지를 유저가 일일이 캡처할 필요 없이버튼 하나로 이미지로 저장할 수 있다.이런 경우 사용하면 좋을듯하다.  하지만 이 라이브러리를 사용하면서 문제가 생겼었는데, 윈도우의 크기, 쉽게 말하자면 pc와 mobile일 때의 윈도우의 크기가 다르기 때문에 윈도우 크기에 맞게 변해버린 HTML요소에 따라서 캡처가 되어버린다는 것이다.   해결 방법 제일 먼저 공식 웹사이트를 방문해서 사양을 보는 것이다. 참조https://html2canvas.hertzen.com/configuration OptionsExplore..

문자열 대체(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)와 똑같은 결과가 나..