JavaScript
React test Warning test was not wrapped in act error 해결 방법
React test Warning test was not wrapped in act error 해결 방법
2023.07.30React test Warning test was not wrapped in act error 해결 방법 console.error Warning: An update to FileIcon inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ 10 | icons 11 | .getClass(name) > 12 | .then((k) => setKlass(k)) | ^ 13 | .catch(() => n..
자바스크립트 this 정복하기
자바스크립트 this 정복하기
2023.07.03자바스크립트 this를 정복하는 포스팅입니다. 모던 자바스크립트 deep dive 22장 this 내용을 적은 글입니다. this 개념은 배울 때마다 헷갈리는 개념이라 마음잡고 정리했습니다. 자바스크립트 this 정복하기 (아래 사진은 this를 바라보는 저의 모습과 비슷해서 가져왔습니다.두려움, 어려움, 설명할 수 없는 개념...) this가 필요한 이유 아래와 같은 상황일 때 this를 쓸 수 있다. const circle = { radius:5, getDiameter(){ //이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면 //자신이 속한 객체인 circle을 참조할 수 있어야 한다. return 2*circle.radius; } }; console.log(circle.getDi..
Javascript 개념 정리, 콜백함수 리터럴
Javascript 개념 정리, 콜백함수 리터럴
2023.06.25Javascript 개념 정리 Javascript를 다시 정리하는 의미에서 '모던 자바스크립트 deep dive'를 읽고 있습니다. 잊기 싫은 중요한 개념을 정리했는데요, 이번 포스팅에서는 리터럴, Javascript에서 함수 정의하는 4가지 방법, 표현식, 프로퍼티, 콜백함수에 대해 간단하게 메모했습니다. (출처: 모던 자바스크립트 deep dive) 리터럴 리터럴 literal은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 notation을 말한다. 리터럴 예시 비고 정수 리터럴 100 부동소수점 리터럴 10.5 2진수 리터럴 0b010001 0b로 시작 8진수 리터럴 0o101 ES6에서 도입. 0o으로 시작 16진수 리터럴 0x41 ES6에서 도입. 0x로 시작 문..
ESLint 쉬운 설치 방법
ESLint 쉬운 설치 방법
2023.02.20ESLint는 자바스크립트 코드에서 문제가 될 수 있는 패턴을 식별하기 위한 정적 코드 분석 도구입니다. 사용자가 지정한 규칙으로 코드를 분석하여 코딩 스타일 문제를 해결해 줍니다. 이번 포스팅에서는 코드 퀄리티를 점검하기 위해 사용하는 ESLint 설치 방법을 소개하고, 어떻게 하면 활용할 수 있는지 소개하겠습니다. ESLint 설치 방법 ESLint를 사용하기 위해서 비주얼스튜디오 코드의 "Extensions"를 클릭합니다. ESLint를 Enable 합니다. Ctrl+shift+P or Command+Shift+P를 누르고, ESLint:Create ESLint Configuration을 클릭합니다. 터미널에서 질문에 맞는 답을 선택합니다. How would you like to use ESLint..
자바스크립트 Bubbling
자바스크립트 Bubbling
2022.12.19이번 포스트는 JavaScript event Bubbling에 대한 내용입니다. JavaScript Bubbling 브라우저에서 JavaScript 이벤트는 두 가지 단계로 이벤트 리스너를 실행시킵니다. 첫 번째가 버블링(bubbling) 2 번째가 캡처링(capturing)입니다. 버블링은 내부에서 외부로 이동하고, 캡처링 단계는 외부에서 내부로 이동합니다. 기본적으로 addEventListener로 추가된 모든 이벤트 리스너는 버블링으로 동작합니다. HTML 코드 Click JavaScript 코드 div와 button에 eventListener click이벤트를 추가하였습니다. const div = document.querySelector('div'); const button = document.q..
자바스크립트 preventDefault 정리
자바스크립트 preventDefault 정리
2022.12.18이번 포스팅은 JavaScript preventDefault를 사용하는 이유에 대한 내용입니다. preventDefault 역할 preventDefault는 브라우저가 적용하는 기본 동작을 방지하는 역할을 합니다. 이때 기본 동작은 이벤트의 종류에 따라 다릅니다. submit인 경우 form 데이터를 서버에 전송하고, 페이지를 새로 고침 하는 부분이 기본 동작입니다. link의 경우는 해당하는 링크로 이동하는 것이 기본 동작, checkbox에서 클릭하면 박스 togglig이 되면서 체크가 되는 부분이 기본 동작입니다. preventDefault를 사용하면 이러한 기본 동작들을 하지 않게 합니다. preventDefault submit 예제 HTML 파일 Title Submit 아래처럼 생긴 HTML 예..
자바스크립트 버튼 클릭 이벤트 추가하는 3가지 방법
자바스크립트 버튼 클릭 이벤트 추가하는 3가지 방법
2022.12.16이번 포스팅은 버튼에 클릭 이벤트를 추가하는 3가지 방법을 다룹니다. 권장하지 않는 방법부터, 권장되는 방법, 그리고 추가한 이벤트를 삭제하는 방법도 다룹니다. 우선 base HTML 코드는 아래와 같습니다.! 느낌표로 추가되는 기본 html 구성에 를 쓰고, 그 안에 을 추가한 코드입니다. Button HTML 태그 onclick 버튼 태그에 이벤트를 추가하는 방법으로 HTML 태그에 onclick를 추가해주는 방법이 있습니다. button 여는 태그 안에 onclick를 쓰고, 클릭했을 때 사용하고 싶은 JavaScript 코드를 안에 문자열로 작성합니다. 이 방법으로 button에 이벤트를 연결하면, 코딩하기 쉽다는 장점이 있지만, HTML 코드에 JavaScript 코드가 들어가면서 깨끗하지 않은..
자바스크립트 HTML Template 태그
자바스크립트 HTML Template 태그
2022.12.15Javascript 파일에서 innerHTML을 사용해서 HTML 코드를 사용할 수 있지만, template 태그로 html 코드 상에서 미리 구현해 놓은 것을 사용하면 더욱 깔끔한 코딩이 가능합니다. Template 사용 전 코드 JavaScript 코드 const toolElement = document.createElement('div'); toolElement.innerHTML = ` Merry Christmas! I am so happy `; Template 사용 코드 JavaScript 코드 const toolElement = document.createElement('div'); const toolTemplate = document.getElementById('tool'); const too..
자바스크립트 getElementById, querySelector 차이점
자바스크립트 getElementById, querySelector 차이점
2022.12.11이번 포스팅에서는 getElementById와 querySelector 차이점에 대해서 알아보려고 합니다. 클론 코딩을 하는 중에 lementById를 쓸 때도 있고, querySelector을 쓸 때도 있는데, 쓰임이 다른 이유가 궁금했습니다. Black Box Blue Box getElementById() getElementById를 사용하면 넘겨받은 문자열과 같은 id를 가진 idelement object를 반환합니다. ID는 단 하나의 유일한 값이기 때문에 getElementById를 사용하면 특정한 element에 접근할 수 있습니다. 하지만 모든 element가 Id값을 가지는 것은 아니므로, id 값이 없는 경우에 querySelector()를 사용하여 element를 찾을 수 있습니다. g..
자바스크립트 static의 모든 것
자바스크립트 static의 모든 것
2022.12.03자바스크립트 Class 실습하다가 문득 static이 무엇인지 궁금해졌습니다. APP 클래스를 만들고, APP 클래스를 시작하기 위해 App.init()을 하는데, 여기에 사용된 static 개념을 정리하는 글을 작성해 봅니다. class App { static init() { } } App.init(); 자바스크립트 static static 키워드는 정적 메서드(static method)나 정적 프로퍼티(ststic property)를 정의하기 위해 사용합니다. static으로 만들어진 메서드, 프로퍼티는 클래스의 인스턴스에서 호출될 수 없고, 클래스 자체에서 호출될 수 있습니다. class App { static init() { console.log("static init called"); } } /..
자바스크립트 클래스 Class의 모든 것
자바스크립트 클래스 Class의 모든 것
2022.11.30OOP(Object Oriented Programming) 객체 지향 프로그래밍을 배울 때 꼭 따라오는 것이 클래스(Class)입니다. Class는 Object 객체의 청사진과 같은 역할을 하기 위해 사용합니다. 청사진, 미래에 대한 희망적인 계획이나 구상을 의미하는데, 코드를 짤 때 Object가 어떤 프로퍼티(property)와 메서드(method)를 가질지 미리 구상한다는 의미입니다. 자바스크립트 클래스 클래스 생성 자바스크립트에서 클래스를 생성하려면 class 키워드를 사용하면 됩니다. 이때 클래스 선언문은 사용하기 전에 정의되어 있어야 합니다. 먼저 사용했으면 referenceError가 발생할 수 있어요. constructor 메서드는 클래스에서 단 한 번만 사용해야 하며, 다수의 constr..
자바스크립트 배열 중간에 값 추가하기 splice()
자바스크립트 배열 중간에 값 추가하기 splice()
2022.11.21자바스크립트에서 배열을 다루다 보면 배열 중간에 값을 추가하고 싶을 때가 있기 마련입니다. 이 포스팅에서는 배열을 수정해주는 splice 메서드와 splice 메서드를 사용할 때 함께 쓰면 좋은 메서드를 다룹니다. splice() 메서드는 배열이 가지고 있는 내용을 삭제하거나 기존 값을 바꿀 때, 또는 새로운 값을 넣고 싶을 때 사용하는 메서드입니다. 사용 방법은 아래와 같습니다. splice(시작 인덱스 지정, 시작 인덱스부터 삭제하고 싶은 항목의 수, item1 ,..., itemN 삭제된 부분에 추가하고 싶은 값) Splice 사용 전 알면 좋은 메서드 Array.from() 만약에 문자열 splice를 사용하려면, Array.from을 사용하면 됩니다. Array.from() 메서드는 iterab..