세줄코딩

React + Typescript Error 사항들 1. 'React' must be in scope when using JSX react/react-in-jsx-scope React를 import 해서 쓸 일이 없는 코드라고 할 지라도 확장자가 .tsx 이고 또 컴포넌트 태그를 리턴하거나 하면 반드시 상단에 import React from 'react'; 라고 선언해 두어야 한다. React 를 import 해두지 않으면 babel은 JSX를 구문 분석하고 JavaScript로 변환하는 방법을 알지 못하기 때문이다. https://stackoverflow.com/questions/56562685/react-must-be-in-scope-when-using-jsx-error-in-routes-js-fil..

Webstorm HttpClient Postman 사용해 보다가 로컬에서 그냥 간단히 테스트 하는 법을 찾아냈다. 바로 웹스톰에 내장되어 있는 HttpClient 이다. 어디 있냐 하면 Webstorm 툴을 열고 아래와 같이 선택한다. HTTP 클라이언트가 생성되면 아래와 그림과 같이 + 아이콘을 클릭하면 GET/POST METHOD 요청을 할 수 가 있다. 실행은 아래 그림처럼 좌측 녹색 화살버튼을 클릭하면 된다. 결과는 Webstorm 하단에 서비스 창에서 볼 수 있다. 더 자세한 사용법은 아래 홈페이지 링크를 보고 참고 하면 될 거 같다. https://www.jetbrains.com/help/webstorm/http-client-in-product-code-editor.html#creating-h..

CRA 로 리엑트 작업중에 interface 를 export 선언하자 아래와 같은 에러 발생. Re-exporting a type when the '-isolatedModules' flag is provided requires using 'export type'. 우선 컴파일 옵션이 가물가물하여 --isolatedModules 을 찾아보았다. --isolatedModules : 추가 검사를 수행하여 별도의 컴파일 (예를 들어 트랜스파일된 모듈 혹은 @babel/plugin-transform-typescript) 이 안전한지 확인합니다. 옵션 타입 기본값 --isolatedModules boolean false 라고 한다.. 그리고 TS 버전을 찾아보니 3.8 부터는 type-only imports와 ex..

forEach ( javascript 반복문 ) forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다. arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) forEach 에서 처리 되는 매개변수 - callback 각 요소에 대해 실행할 함수. 그리고 아래는 callback 함수에서 세 가지 매개변수를 받는다. 1. currentValue : 처리할 현재 요소. 2. index : 배열 인덱스. 옵셔널 처리 되어 있기에 선언 안해도 된다. 3. array : forEach()를 호출한 배열. 옵셔널 처리 되어 있기에 선언 안해도..

for of 구문 for (variable of iterable) { statement } for...of 명령문은 반복가능한 객체 Array, Map, Set, String, TypedArray, arguments 객체 등에 대해서 반복하고 개별 속성값에 실행문이 있는 사용자 정의 루프를 생성한다. Array 예) let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } // 10 // 20 // 30 String 예) let iterable = "boo"; for (let value of iterable) { console.log(value); } // "b" // "o" // "o" Map 예) let itera..

React.StrictMode( Strict 모드 ) create-react-app 설치 후 index.js 를 살펴 보면 라는 것을 볼 수 있다. 처음엔 이게 먼가 싶었는데... 딱히 머 실행시 문제될 거는 없었기에 신경을 안쓰고 있었는데... 테스트시 devtools 에 콘솔 로그 값이 두번씩 찍히는 것을 발견 할 수 있었다. 검색해서 찾아봤더니 React.StrictMode 라는 것 때문에 그런 현상이 나타나는 것이라는.... 해서 공식 홈에 해당 부분을 찾아 봤더니...아래와 같은 내용들이 있었다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화. 주의 Strict 모드는 개..

React 에서 import 시 경로 설정. jsconfig.json 파일을 이용해 경로를 지정할 수 있다. 1. jsconfig.json 파일을 root 경로에 만든다. 2. 아래 코드 내용을 jsconfig.json 에 입력하고 저장. // jsconfig.json { "compilerOptions": { "baseUrl": "src" } } "baseUrl": "src" 를 작성하면 루트폴더가 src 폴더로 설정. import시에 ../../ 등의 상대경로 부분을 생략 가능하게 됨..

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 오류 Switch 를 찾을 수 없다 라는 오류가 나서 먼가 하고 봤더니 react-router-dom 이 버전 6로 업그레이드되면서, Switch 를 더이상 지원을 하지 않는다는 ㅠㅠ. Switch -> Routes 로 변경해서 쓰면 된다. 속성 중에 component 도 element 로 바꾸어서 사용해야 한다. 공식문서( https://reactrouter.com/docs/en/v6/upgrading/v5 ) 참조 React Router | Upgrading from v5 Declarative routing for React apps at any scale reactr..