kuchee_p.log

[vscode] console.log 단축키 추가하기

Sat, 17 Sep 2022 10:15:20 GMT

vscode를 사용해서 코딩을 하다보면 console.olg conso;e등 console.log를 타자치다가 다양한 오타를 경험하게 된다. 매번 console.log를 타자치는게 귀찮았지만 단축키를 추가하는 방법을 찾는것이 더 귀찮았나보다 여태 추가를 안 한 것을 보면 ^^.. 드디어 추가해보려고 한!!다!! 🤗

vscode의 상단메뉴> [File]-[Preference]-[Configure User Snippets]

그러면 사용하는 언어를 검색할 수 있는 창이 나온다.

나는 javascript를 사용하니까 javascript를 검색해서 선택.

javascript.json파일이 열리게 되는데 주석에 적힌대로 입력하면 된다. 나는 아주 직관적으로 console.log라서 cl으로 자동 완성 문구를 설정했다😏

파일을 save하고 js파일에 cl이라고 입력하면

짜잔~ 바로 사용할 수 있다!

javascript.json 뿐만아니라 javascriptreact.json 또한 동일한 방법으로 저장했다.

[vscode] installed vscode extensions list

Tue, 13 Sep 2022 06:30:23 GMT

ES7+ React/Redux/React-N

ESLint
Live Server
Material Icon Theme
Prettier
Reactjs code snippets
TabOut
VS Color Picker

내가 잊지 않으려고 작성하는 vscode extension 모음! 어느날 갑자기 vscode를 아무리 클릭해도 실행이 되지않고 관리자모드 실행, vscode 내부의 파일삭제하기 이러저러한 해결법을 다 해보았지만 결국엔 켜지지 않았다. vscode 프로그램 파일을 삭제하지 않고 vscode를 덮어쓰는(?) 설치를 하면 해결된다고 해서 설치했더니 W O W .. 😥 해결은 됐다 됐는데.. 해결이 해결이 아닌 그냥 vscode를 재설치를 한거나 다름이 없었다.. 설치된 것들이 날아가는 게 싫어서 재설치는 되도록이면 피했던건데 💢 내 vscode extention들이 다 날아가버렸다. 유튜브나 강의를 보면서 강사님들이 사용했던걸 요리조리 설치해서 사용했었던 건데 기억을 되살려 vscode 유용한 extension으로 검색해보면서 위의 리스트들을 그대로 다시 설치할 수 있었다 : )

➕ 기능 설명을 추가할 예정입니다.

[Error] webpack < 5 used to include polyfills for node.js core modules by default.

Tue, 30 Aug 2022 08:17:28 GMT

API 호출하는 함수를 작성하던 중 만난 webpack 오류

어..그래..ㅜㅜ .. 해결 방법은 역시나 버전 변경 빨갛고 검정색인 오류를 만나게되면 해결방법은 대부분 버전오류였다 그래! 다시 설치가볼게

npm uninstall react-scripts

npm i react-scripts@4.0.3

감사합니다.

[TIL] console.log("왜 두 번 출력되죠?");

Sat, 27 Aug 2022 13:49:59 GMT

이러저러한 React 공부를 할 때 한 번도 일어나지 않은 console.log("두 번 출력 사건..") 왜 한 번도 보지 못 한 것이며 평소에.. console.log찍는 버릇을 안들여서 나만 처음 보는 오류인건가..? 하고 당황스러웠다. 분명히 console.log는 한 번 찍혀있늗네 출력은 두번되는 상황.

도대체 W H Y ? .. 구글링 해보니 이러한 현상은 StrictMode때문이라고 한다. React환경에서 작성한 코드를 출력하기 위해 만든 index.js파일을 확인해보면

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  
    
  
);

이렇게 을 감싸고 있다. StrictMode는 앱 내의 잠재적인 문제를 알아내기 위한 도구이며 Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화 한다고한다.

Strict모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다.

StrictMode는 아래와 같은 부분에서 도움이 됩니다. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 ref 사용에 대한 경고 권장되지 않는 findDOMNode 사용에 대한 경고 예상치 못한 부작용 검사 레거시 context API 검사

🔨..우선은 을 감싸고있는 를 삭제해서 해결했다. 하지만 이는 괜히 만들어진 기능이 아니기 때문에 차차 더 공부한 후 다시 추가하여 이 문제를 해결할 수 있는 다른 방안을 찾아보아야겠다.

출처 : ko.reactjs.org/docs

[Error] 몽고DB 504 에러

Thu, 04 Aug 2022 10:33:43 GMT

Redux dev tool에는 이렇게 error가 확인됐다.

product_by_id -> products_by_id ^^..로 수정하고

터미널엔 이렇게

코드에는 문제가 없고(제일 많이 하는 실수인 오타..ㅎㅎ) 연동되어 있는 DB의 문제인가? 서치해보니 역시나! 요즘 집 와이파이 문제로 계속해서 재연결을 하고 있는데 그래서 생겨난 문제인 것 같다. 우선 해결방안을 확인했으니 차례대로 진행해 보았다. 몽고DB 504 Error, 감사합니다

혹시 몰라 원래의 ip address는 그대로 놔두고 현재 ip address를 추가했다

해결완! >.<

[Error]node.js 버전과 node-sass 버전 설치 오류

Fri, 08 Jul 2022 14:41:25 GMT

node.js 최신버전을 설치해서 사용하고 있었다. sass <의 등장.. npm install node-sass로 sass 설치! 남들은 한방에 되는 거 같은데 난 왜이렇게 오류가 많이 나는지 .. 버전 오류라고 했고 node.js와 node-sass버전이 맞지 않아 나는 오류라고 했다. 그래서 무한 uninstall install 반복반복 install node-sass@latest< 로 최신 버전을 설치했다가 node.js를 16버전으로 재설치하여 install node-sass@6.0.0으로 설치를 했다가 또 오류가 나길래 install node-sass@5.0.0으로 설치를 했는데..이건 node.js 15버전에서만 허용 가능이란다 ^^ .. 또 uninstall 검색도중 nvm(node version manager)을 이용해 node버전을 바꿔 나갈 수 있는 방법을 찾았다! 도움주셔서 감사해요.. 그래 node버전도 무한 변경가보자고💢💢라는 마음에 nvm 설치 node -v v16.16.0 nvm list available 사용가능한 리스트를 확인 후 오류랑 가장 멀었던 그~나마 가장 최신 버전인 v14.20.0을 설치했다. nvm install 14.20.0

두구두구두구두구 nvm list에서 node 사용가능 버전 확인 후 nvm use 14.20.0 ...?

..?????????????????

하.. 날 너무 당황시키게 하는 이 문자들.. 이게 뭔데요 ㅠ ㅠ .. 검색도 못하겠어 .. 그래서 nvm use exit status 5:로 검색해보았다

[Error] nvm use 입력 시 exit status 5 오류.. 파일경로에 띄어쓰기가 있으면 안 된다는 말과 경로를 바꿔서 다시 설치하라고 확인 해봤지만 전혀 문제가 없었고 PowerShell에서 시도 했지만 이또한 동일한 오류가 났다.. 관리자 권한으로 재시도했더니 감격스럽게도 성공! -> 윈도우 권한 문제였던 거 같다.

라고.. node-sass@14.0.1사용이 가능할 줄 알았지; 더 어려운 난관 도착 그냥 아싸리 상위버전에서부터 내려가보자라는 생각에 다시 17.9.1버전을 설치했다. npm install node-sass@latest 설치중...

많은 react관련 회고들을 보면서 버전관리에 어려움을 겪는 글을 많이 봤지만 아~무것도 하지 않았는데 그냥 설치 단계에서부터 이렇게 막막해지니까 정말 한숨이 나왔다 거의 6시간 정도 붙잡고 있었던 거 같은데 해결이 돼서 마음놓고 잘 수 있다 ㅠ.ㅠ ..

또 다른 난관에 도착.. eslint?

package.json과 eslint-config-react-app의 충돌이라고 한다. eslint-config-react-app설치로 해결완👊

우선 npm install -g sass npm install등으로 설치

<포스팅 예정 목록> npm start -> npm stop! npm restart할 수 없는 것인가????? ctrl+c 일괄 작업을 끝내시겠습니까 (Y/N) ? Y < 이렇게 >npm stop이 가능하다