삽질의기록8 axios-mock-adapter 인스턴스 제대로 넘기기 axios-mock-adapter 는 react 측에서도 권장하는 mocking 라이브러리이다. react-testing-library 에서는 서버에서 실제로 데이터를 받아와서는 안되고 모킹 데이터를 만들어 테스트 해야 한다. import axios from 'axios'; const mock = new MockAdapter(axios, { delayResponse: 200 }); // 2022. 7. 14. 웹팩 빌드 시 번들사이즈 문제 웹팩 빌드 시 다음과 같이 비정상적으로 js 파일 사이즈가 커지는 경고가 발생하였다. https://stackoverflow.com/questions/49348365/webpack-4-size-exceeds-the-recommended-limit-244-kib Webpack 4 "size exceeds the recommended limit (244 KiB)" I have two files which are combined under 600 bytes (.6kb) as below. So how is it that my app.bundle.js is so large (987kb) and more importantly how does one manage the size of it? src file index.. 2022. 6. 6. 깃허브 페이지에 배포중 이미지 경로 다루기 (with Webpack) 웹팩을 사용한 깃허브 페이지 배포과정에서 public static 이미지 경로 다루는 중 삽질기록 CRA를 사용하면 미리 작성된 설정에 따라 배포자체는 쉽게 된다. 문제는 웹팩을 사용하면서 겪은 문제들 리액트 파일구조는 다음과 같다. public 폴더 안에 img0.jpg 이미지 파일 하나가 들어있다. 이미지 경로 다루기 public ㄴimg0.jpg src ㄴcomponent ㄴindex.tsx ㄴindex.html 구글링 결과 src 폴더 밑에 asset 폴더 형식으로 이미지경로를 다루는 예제들이 많다. 이미지 경로는 대부분 다음과 같이 임포트 형식으로 불러와서 작성한다. import imagesrc from './asset/img0.jpg'; 필자는 작은 프로젝트 중 public 폴더에 있는 이미지.. 2022. 4. 7. visual studio Window SDK 설치문제 error MSB8036: Windows SDK 버전 10.0.17134.0을(를) 찾을 수 없습니다. 필요한 버전의 Windows SDK를 설치하거나, 솔루션을 마우스 오른쪽 단추로 클릭하고 [솔루션 대상 변경]을 선택하거나 프로젝트 속성 페이지에서 SDK 버전을 변경하세요. 하루에도 삽질 최소 다섯번은 하는 것 같은데 삽질의 기록 카테고리에는 글이 잘 안올라온다... 쓰기 귀찮다 ^^ 삽질좀 하다 알고리즘 푸려고 VS를 켰는데 다음과 같은 오류를 뱉는다. 문제는 하드 정리중 쓸데없이 2gb 차지하고 있다고 생각한(?) 무지함에 window sdk를 삭제한것이 원인... 해결방법 https://developer.microsoft.com/ko-kr/windows/downloads/windows-sdk/ .. 2022. 2. 3. css, html 줄바꿈 문제 no-wrap, word-break 띄어쓰기 없는 단어 줄바꿈 삽질의 기록... import React, { useState, useEffect } from "react"; import styled from "styled-components"; const CreatePostWrapper = styled.div` position: absolute; width: 84%; max-width: 824px; left: 50%; transform: translateX(-50%); margin: 2rem 0; background-color: white; border-radius: 7px; padding: 2rem; border: 2px solid red; `; const App = () => { return ( GOODandelayWebsintsnip.. 2021. 12. 13. [Error]Cannot use JSX unless the '--jsx' flag is provided 다음의 오류는 글로벌 ts 버전과 현재 ide ts 버전이 달라서 생기는 오류 ts 글로벌 버전과 package.json 버전이 다를 때 vscode ts 파일 우측 하단 버전숫자 클릭 -> Select Tyoescript Version -> Use Workspace Version 클릭 2021. 11. 5. react cookie에서 httpOnly 옵션에 관하여 토큰기반 로그인 구현 중 jwt에서 서명한 토큰을 브라우저에 쿠키로 저장하기로 했다. document.cookie 명령어에 의해 쿠키 탈취를 막고자 다음과 같이 옵션을 넣어 작성했다. cookie.set('accessToken', res.token,{ path : '/', httpOnly : true }) httpOnly 옵션은 스크립트로 인한 쿠키 탈취를 막는다. 하지만 문제가 있는데 You can only set domain cookies for registry controlled domains, i.e. something ending in .com or so, but not IPs or intranet hostnames like localhost 출저 : https://stackoverflow.co.. 2021. 10. 27. Cannot add or update a child row: a foreign key constraint fails sql 오류 원인은 참조 무결성을 위반해서 그렇다. 다른 테이블을 참조하고 참조테이블에 기본키를 외래키로 가지고 있는 테이블에서 참조테이블에 키가 없어서 발생하는 오류 예를들어 유저 회원가입 시 비밀번호 암호화에 필요한 salt값을 따로 저장하는 테이블에서 유저 테이블에 아이디가 없으니 동작하지 않는다. 해결법은 참조하는 테이블에 값(외래키)를 넣어주면 된다. 2021. 10. 12. 이전 1 다음
