컴퓨터 IT
c드라이브 용량 큰 파일 찾기 TreeSize
c드라이브 용량 큰 파일 찾기 TreeSize
2023.08.25c드라이브 용량 큰 파일 찾기 TreeSize 노트북을 나름 깨끗하게 쓰는 편인데, C드라이브 남은 용량이 19GB였다. 영화를 다운로드한 것도 없고, 게임도 안 하고, 비디오 편집 프로그램을 설치한 것도 아닌데! 어디서 이렇게 용량을 잡아먹는지 ;; 윈도우 기본 파일 속성, 저장소 사용 목록을 보면 설치된 앱에서 370GB를 사용하고 있었다. 그래서 설치된 앱으로 들어가서 삭제하려는데, 목록에서 그렇게 큰 파일을 찾을 수 없었다. 프로그램 자체 크기라기보다, log들이 수집되어서 그렇게 큰 파일이 만들어진 것 같은데.. program Files를 다 클릭해 볼 수도 없고, 어느 앱이 문제인지 모르니 정말 답답했다. TreeSize Free https://www.jam-software.com/treesi..
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 [명사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법 [동사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 여러 가지 리팩터링 기법을 적용해서 소프트웨어를 재구성하다. '프로그램이 새로운 기능을 추가하기에 편한 구조가 아니라면, 먼저 기능을 추가하기 쉬운 형태로 리팩터링 하고 나서 원하는 기능을 추가한다. ' 리팩터링이 필요한 이유 -새로운 요구사항을 쉽게 반..
파이썬 기초 다지기 for 데이터 분석
파이썬 기초 다지기 for 데이터 분석
2023.05.30파이썬 기초 다지기 for 데이터 분석 숫자 e를 사용해서 매우 크거나 작은 숫자를 표현할 수 있다. 지수연산은 **이고, 제곱근 함수대신 지수 부분에 0.5를 입력해서 제곱근 결과를 알 수 있다. 77e3 #77*10*3 = 77000 123e-3 #123*10^(-3) = 0.123 2**3 #2*2*2=8 16**0.5 #root 16 = 4 튜플 원소가 하나인 튜플을 생성할 땐 쉼표를 꼭 넣어줘야 한다. 쉼표가 없으면 소괄호로 보고 튜플 생성 안된다. - 튜플은 내부 원소를 수정할 수 없다. - 수정하고 싶으면 새로운 튜플을 만들어야 한다. (777,) 딕셔너리 딕셔너리 dictionary는 키(key) 값 value 쌍으로 구성된다. dic_01 = {"key1": 1, "key2": [200,..
CSS margin collapsing (마진 겹침)
CSS margin collapsing (마진 겹침)
2023.04.03CSS margin collapsing (마진 겹침) top/bottom 마진이 겹치는 현상을 margin collapsing이라고 부릅니다. 마진 사이즈가 같을 땐, 하나의 사이즈로, 마진이 서로 다르다면 큰 쪽으로 겹쳐지는 현상을 말합니다. 1. 인접 형제 (adjacent siblings) 바깥쪽 여백(margin)을 가진 두 인접 형제(adjacent sibling)가 겹쳤을 때, margin collapsing 현상이 발생합니다. 아래 그림에서 노란색 부분이 margin입니다. 똑같은 인접 형제가 위아래로 있다고 가정했을 때, 두 마진은 더해져서 더 큰 마진을 만드는 것이 아닌, 공통부분을 공유하여 합쳐집니다. 2. 첫째/마지막의 자식에 margin이 설정된 부모 첫 번째 또는 마지막 자식 요소..
CSS 박스 모델 padding border 개념
CSS 박스 모델 padding border 개념
2023.03.28CSS 박스 모델 기본 개념 CSS를 공부할 때 가장 기초가 되는 개념이 박스 모델입니다. content, padding, border, margin 개념이 갑자기 쏟아져 나옵니다! 배울 때는 분명 '아하 그렇지' 알겠는데, 막상 사용하려고 하면 '언제 padding을 쓰고 언제 border를 쓰는 거지?' 헷갈립니다. 시간이 지나면 뭐가 내용에 가까운 거였고, 뭐가 border 밖이었지? 잊기도 합니다. 아래 그림을 보면 더 이상 헷갈리지 않을 거예요! 1. 사람: content입니다. 사람은 중요하니까요. 가장 중심에 있습니다. 2. padding: 사람이 패딩 외투를 입고 있습니다. content를 감싸고 있어요. 3. border: 울타리입니다. 울타리는 경계를 의미하죠! 4. margin: 울타..