몽땅뚝딱 개발자

보통 import 시 경로를 지정할 때 '../../../'를 사용하지않고 설정파일에서 '@/'로 alias를 줘서 간단히 표현할 수 있다. Typescript를 함께 사용하는 경우 아래 파일에서 각각 설정해줘야 제대로 돌아간다. 📄 tsconfig.json 타입스크립트 검사기(문법 검사)는 이 파일을 참조 { "compilerOptions": { "paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@pages/*": ["pages/*"], "@utils/*": ["utils/*"], "@typings/*": ["typings/*"] } } } 📄 webpack.config.t..

📄 tsconfig.json { "compilerOptions": { "esModuleInterop": true, "sourceMap": true, "lib": ["ES2020", "DOM"], "jsx": "react", "module": "esnext", "moduleResolution": "Node", "target": "es5", "strict": true, "resolveJsonModule": true, "baseUrl": ".", "paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@pages/*": ["pages/*"], "@utils/*": ["utils/*"],..

◽ 정의 prettier: 코드 정렬 도구 eslint: 코드 검사 도구 ◽ 설치하기 npm i -D eslint npm i -D prettier npm i -D eslint-plugin-prettier npm i -D eslint-config-prettier ◽ 설정파일 .prettierrc.json, .eslint.json 처럼 .json을 사용할 수도 있다. 📄 .prettierrc { "printWidth": 120, "tabWidth": 2, "singleQuote": true, "trailingComma": "all", "semi": true } 📄 .eslint { "extends": ["plugin:prettier/recommended", "react-app"] }

Node.js란? Node.js는 Javascript를 사용하기 위해 만들어진 프로그램(=환경, *자바스크립트 런타임, 자바스크립트 실행기)이다. * 런타임: 특정 언어로 만든 프로그램을 실행할 수 있는 환경 스크립트 언어는 웹 브라우저안에서만 동작하여 웹 브라우저없이는 동작하지 못했다. Node.js는 Javascript를 웹 브라우저에서 독립시킨 것으로 Node.js를 설치하면 터미널 프로그램에서 Node.js를 입력하여 브라우저 없이 바로 실행할 수 있다. Node.js는 내장 HTTP 서버 라이브러리를 포함하고있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는게 가능하다. 출처 https://junspapa-itdev.tistory.com/3 https://hanamon.kr/nodej..

1. brew로 MySQL 설치 $ brew install mysql 2. 설정하기 // 서버 시작 $ mysql.server start // 여기서 초기화 $ mysql_secure_installation // 서버 종료 $ mysql.server stop 3. 워크벤치 설치 mac이 몬터레이인 상태에서 가장 최신 버전의 워크벤치를 설치했다. 사람들이 추천하는 버전은 8.22 버전이긴 했다. 아래처럼 설정하고 Test Connection 해보면 성공.

0) setup() setup()은 beforeCreate 이전에 호출되는 것이며, this를 사용할 수 없다. 첫번째인자: _, props 두번째인자: { emit, root, refs } ... 1) reactive() 객체만 받을 수 있다. deep 서치가 가능하다. 접근할 때 [.value]가 아니라 [변수이름.key]로 접근한다. return시 ...refs([변수이름])을 사용한다. 2) ref() reactive와 달리 원시타입을 모두 받을 수 있다. 원시값을 'value’라는 key로 감싸 객체를 반환시킨다. 따라서 원본 값은 ref 객체의 value 속성을 통해 접근할 수 있으며, 값을 변경할 때에도 value 속성에 접근하여 조작한다. ref()로 선언한 변수를 setup()안에서 사용..

router에서 dispatch를 사용했을 때 modules를 찾지 못하는 에러가 떴다. store 모듈을 여러개로 분리해놓았는데 auth라는 이름을 가진 모듈만 접근하지 못했다. store를 콘솔로 찍어 확인해보니 다른 module은 '모듈이름/action이름'으로 확인되는데 auth는 그냥 'action이름'만 나오고있어서 namespace에 문제가 있다고 판단했고, 역시나 문제는 namespaced를 namespace로 잘못입력한 오타 때문이었다. (^^) 이런 실수는 더 이상은 naver..

API가 다 만들어지기 전, 응답값 명세만 나온 상태에서 사용해보는 목업 API! 내가 직접 DB를 건드릴 수 없고 data 옵션에 하드코딩으로 넣어놓고 테스트하기에는 나중에 바꿀게 너무 많기때문에, 실제 api를 호출하면 목업 api에서 intercept하여 내가 원하는 데이터를 넣어 테스트 할 수 있어야했다. 팀장님이 이렇게 하라고 했지만 들을 당시에는 못 알아듣고..^^ 나중에 다시 얘기하다가 모킹 모듈을 추천받고 사용해보게 되었다. 결론적으로는 덕분에 너무 편하게 개발했고 간과했던 문제점들을 매우 많이 찾을 수 있어서 시간을 아꼈다. axios-mock-adapter-path-params Axios adapter that allows to easily mock requests. Latest ver..

맥북 재설정 중 정리해보는 node 버전 변경하는 방법 😎 1. node 설치 $ brew install node 2. node 버전을 변경하기 위한 nvm 설치 $ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 3. nvm 설정하기 $ vi ~/.bash_profile // => terminal이 bash인 경우 $ vi ~/.zshrc // => terminal이 zsh인 경우 3-1. 아래 입력 후 ESC 누르고 :qw export NVM_DIR="$HOME/.nvm" [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/n..

$ lsof -i tcp:9080; $ sudo kill -9 14310