컴퓨터 IT/Javascript
TDD를 위한 ESLint Prettier 적용
TDD를 위한 ESLint Prettier 적용
2023.08.03TDD를 위한 ESLint Prettier 적용 React TDD 개발할 때 eslint와 prettier를 활용하는 방법에 대한 포스팅입니다. ESLint와 Prettier는 그냥 코드를 작성할 때에도 유용하지만, Test 코드를 작성할 때에도 많은 도움이 됩니다. 테스트 코드에 ESLint와 Prettier를 적용함으로써 코드 품질이 향상될 수 있고, 오류를 예방할 수 있습니다. ESLint Setup 1. npm install eslint-plugin-testing-library eslint-plugin-jest-dom npm install eslint-plugin-testing-library eslint-plugin-jest-dom 2. package.json에서 eslintConfig 삭제 pa..
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..
React test useHref() 오류 해결 방법
React test useHref() 오류 해결 방법
2023.07.29React test useHref() 오류 해결 방법 React Test 코드를 짜면서 누구나 한 번쯤은 보는 useHref() Link 관련 오류 해결방법에 관한 포스팅입니다. 아직 이 오류를 만나지 않았더라도 해결 방법을 보는 걸 추천드립니다 :0 useHref() 오류 메시지 useHref() may be used only in the context of a component. console.error The above error occurred in the component: at LinkWithRef (C:\Users\flyhi\Downloads\codesplain-starter\node_modules\react-router-dom\index.tsx:394:7) at div at div at R..
React TDD 개발 시작(확장자 추천)
React TDD 개발 시작(확장자 추천)
2023.07.27React TDD 개발 시작 (확장자 추천) npx create-react-app my-app 기본적인 test 라이브러리는 npx create-react-app을 하면서 설치되기 때문에 추가로 설치해줘야 하는 패키지는 없습니다. npm test 터미널에 npm test를 입력해서 테스트를 시작할 수 있고, 한 번 시작해 놓으면 파일이 바뀔 때마다 자동으로 테스트가 돌아갑니다. 만약에 테스트를 종료하고 싶으면 Ctrl C를 누르면 됩니다. 처음 npm test를 할 때나, w를 누르면 아래와 같은 옵션을 볼 수 있습니다. a는 모든 테스트를 돌리고 싶을 때 f는 실패한 테스트를 돌리고 싶을 때 p는 정규 표현식으로 특정 테스트 파일을 돌리고 싶을 때 사용합니다. (맨 처음에는 a로 테스트해 보는 게 좋고..
React fetch 사용법 Loading,Error,GET,POST
React fetch 사용법 Loading,Error,GET,POST
2023.07.17React fetch 사용법 Loading, Error, GET, POST React에서 HTTP 요청을 보내는 방법은 크게 2가지라고 합니다. 첫째는 axios를 사용하는 것, 두 번째는 fetch를 사용하는 것. 이번 포스팅에서는 fetch를 사용하여 GET, POST를 시도해 보고, 그에 따른 Loading 처리하는 방법, Error처리하는 방법까지 다룹니다. React - backend 통신하는 방법 데이터를 얻고 싶다. React App Database server 가장 빠른 방법은 데이터베이스와 직접 통신하는 방법일 텐데, 프런트에서 바로 데이터베이스에 접근하게 된다면, 일반 이용자들도 데이터에 접근 가능하기 때문에 반드시 피해야 합니다. React App Backend App Database..
자바스크립트 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로 시작 문..
리팩터링이란?
리팩터링이란?
2023.06.19리팩터링이란? 리팩터링은 겉으로 드러나는 코드의 기능 (겉보기 동작)은 바꾸지 않으면서 내부 구조를 개선하는 방식으로 소프트웨어 시스템을 수정하는 과정이다. 버그가 생길 가능성을 최소로 줄이면서 코드를 정리하는 정제된 방법이다. 즉 => 선 코딩, 후 개선 리팩터링 REFACTORING [명사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법 [동사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 여러 가지 리팩터링 기법을 적용해서 소프트웨어를 재구성하다. '프로그램이 새로운 기능을 추가하기에 편한 구조가 아니라면, 먼저 기능을 추가하기 쉬운 형태로 리팩터링 하고 나서 원하는 기능을 추가한다. ' 리팩터링이 필요한 이유 -새로운 요구사항을 쉽게 반..
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 코드가 들어가면서 깨끗하지 않은..