CodeHoon

안녕하세요 상훈입니다.

graphQL을 사용하는데, syntax highlight를 시키고 싶다면, 아래처럼 생긴 확장자를 사용하면 됩니다.

이 링크에서도 확인이 가능합니다. 참조해주세요!

감사합니다

Vue-cli 프로젝트를 만들 때 ESLint 옵션을 standard로 설정하고 생성하였다. 

그런데 순조롭게 코드를 작성하고 있던 와중, 딱히 코드 자체에 문제가 없어보이는데 저런 에러가 출력되면서 --fix만 사용하란다. 

■ 해결방법

npm run --fix

2022.12.12. 수정
 - npm run lint -- --fix 로 해야지 됩니다. 
위의 코드는 제가 script에 해당 내용을 미리 작성해서 되는것이었습니다. 참고바랍니다.

npm run lint -- --fix

해당 명령어를 bash에서 입력했을 때 

순조롭게 되었다.

예전에는 이게 뭐야? ㅡㅡ 하면서 지나갔던 내용인데 뭔가 오기가 생긴건지 결벽증이 생긴건지 이런 것 하나하나 신경쓰게 되었다.

SSH로 LINUX 혹은 다른 IP에 접속해서 VSCode로 내부 파일을 수정하려고 하는데 저장할 때에 에러가 발생.

해결방법은 해당 파일이나 폴더 등에 계정에 대한 권한을 할당하는 것이다.

## /var/www/html/example/ 경로일 때
sudo chown -R  계정명  경로명

이렇게 적용하면 바로 저장 혹은 수정할 수 있게 된다.

위와 같이 /var/www/html/example/  라는 폴더 내부의 파일들을 모두 수정할 수 있는 권한을 주고 싶을 때,

## 현재 내가 있는 위치 :  /var/www/html/
sudo chown -R  username ./example

하면 우측하단에 에러 알림이 왔던 내용이 사라지고 저장 혹은 수정할 수 있게된다.

참고

https://pinkwink.kr/1343

■ 환경 및 툴

→ Linux(Ubuntu), Apache, Nodejs, socket.io, javascript, html, css, vscode

■ 특이점 

→ 외부 접속을 허용하였는데, 해당 서버가 제대로 작동하지 않는 상황

Apache + Node.js + Express 를 통해 3000포트 접속을 허용하고 웹서버를 띄웠다.

이 때 외부 IP를 입력해서 들어간 경우에는 안되었고, vscode에서 웹브라우저를 띄웠을 때 및 localhost:3000 로 접속하였을 때는 동작하였다.

외부 아이피 주소 112.~ 로 접속하였을 때는 실패하였다. CORS 오류나면서.

아무래도 이전 포스팅과 연결되는 말인 것 같지만,

처음 이 현상을 발견하게 된 것이 VSCODE에서 뇌가 하얗게 되어 무지성으로 클릭하다가 우연찮게 발견하여 클릭하고 발견한 웹 브라우저 띄우기. 

예전에도 localhost 환경에서 axios를 사용할 때 해당하는 CORS 오류가 출력되었는데, 이 때 비슷한 에러가 출력되었던 것도 같다.

즉, 내부포트로 접속할 수 있는 환경에서 왜 굳이 외부포트로 접속하냐 이런 느낌.

VsCode - ssh 이용 해서 원격으로 특정 파일을 수정하거나 추가할때 에러가 발생하였다.

NoPermissions (FileSystemError): Error: EACCES: permission denied, open

■ 에러 이유

- 해당 파일에 대한 권한의 문제이다.

■ 해결 방법

- 접속자에게 권한 할당을 해주어 파일을 수정할 수 있게 해준다.

sudo chown -R  '접속계정명'   '권한을 할당할 경로'

예시) 

sudo chown -R sanghoon /var/www/html/*

하시면 이제 정상적으로 값이 수정·추가 되는 것을 확인할 수 있다.

Vue.js의 template 세트를 원하는 부분에 미리 작성해놓고 사용하는 방법이 있습니다.

물론 기본적으로 ctrl  + space 만 눌러도 template, script, style 이 세가지가 다 나오지만, 

잠깐 귀찮으면서 미리 작성해놓으면 원하는 내용을 추가적으로 등록해놓을 수 있습니다.

이런식으로 말이죠.

F1을 눌러 snippet을 검색하고, preferences를 누릅니다.

그 다음 vue 를 검색하여 vue.json을 클릭합니다.

vue.json 파일이 열리며, 이곳에 작성해주시면 됩니다.

{ 
// ...
"Generate Basic Vue Code" : {
		"prefix": "vue-start",
		"body": [
			"<template>\n\t<main>\n\n\t</main>\n</template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\texample: '',\n\t}\n},\n\tbeforeCreate() {},\n\tcreated() {},\n\tbeforeMount() {},\n\tmounted() {},\n\tbeforeUpdate() {},\n\tupdated() {},\n\tbeforeUnmount() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>"
		],
		"description": "Generate Basic Vue Code"
	}
}

prefix 부분에 명령어와 같이 vue-start를 입력하면 해당 body 포멧을 불러올 수 있게 됩니다.

body 부분에 원하는 내용을 작성하는 것입니다.

추가.

{
"Generate Other Vue Code" : {
		"prefix": "vue-other",
		"body": [
			"<template>\n\t<main>\n\n\t</main>\n</template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\texample: '',\n\t}\n},\n\tcreated() {},\n\tmounted() {},\n\tmethods: {}\n}\n</script>"
		],
		"description": "Generate Basic Vue Code"
	}
}

이상입니다.

리액트 코드를 작성하면서 snippets가 작용할 수 있게.

= h1 만 작성하여도 자동으로 <h1></h1>이 작성되게 하는 익스텐더