CodeHoon

npm 관련한 명령어를 실행할 때마다 아래와 같은 에러가 발생하였다.

npm WARN logfile Error: EPERM: operation not permitted, unlink 'C:\Users\AppData\Local\npm-cache\_logs\2022-02-25T02_50_32_498Z-debug-0.log' npm WARN logfile error removing log file C:/Users/AppData/Local/npm-cache/_logs/2022-02-25T02_50_32_498Z-debug-0.log [Error: EPERM: operation not permitted, unlink 'C:\Users\AppData\Local\npm-cache\_logs\2022-02-25T02_50_32_498Z-debug-0.log'] { npm WARN logfile errno: -4048, npm WARN logfile code: 'EPERM', npm WARN logfile syscall: 'unlink', npm WARN logfile path: 'C:\\Users AppData\\Local\\npm-cache\\_logs\\2022-02-25T02_50_32_498Z-debug-0.log' npm WARN logfile }

unlink 관련하여 에러 내용인 것 같은데, 도대체 왜 저러는지 이해가 안됐었다. 😂

1. 설치단계에서는 warn 만 있고, error 로 인한 멈추는 현상은 이루어지지 않았다는 점.
2. 실행단계에서는 멈춘다는 점
3. cache 정리를 해봐도 잘 안됐다는 점... 등

그래서 내가 무엇을 했는지 생각해보았고, 문득 생각난 package.json.script 부분을 변경하였던 것이 생각나 해당 부분을 주석처리하고 재실행하였더니, warn 등의 로그들이 출력되지 않았다.

install 부분과 run · start ... 실행 부분에 또 똑같은 에러가 출력되었는데,

그냥 npm을 repair 하였다. 그랬더니 자연스럽게 잘 실행됨.

지금 다시 생각해보면 링크가 꼬였다 혹은 끊어졌다가 어울리지 않을까 싶다.

사용환경 : window10, node-v: 16.14.0, npm-v: 8.2.0, Vue.js(React.js, Angular) 

Vue.js의 프로젝트를 vue-cli를 통해서 설치하려는데 node-sass 관련하여 자꾸 오류가 났다.

node-sass 버전과 node 가 지원하는 버전간의 오류라고 한 블로그에서 확인하였지만, 버전은 잘 맞췄었다.

해결방법을 찾고 또 찾아 여러 가지 방법을 시도해보았다.

1. npm cache 정리
2. npm verify
3. node uninstall & install 
...

그리고 마지막에 와서야 dart-sass로 설치하였다. (이래도 되냐...ㅠ)

그런데 npm에서 node-sass를 검색하던 와중에 대문짝만하게 아래와 같은 내용이 작성되어져 있었는데, 간략하게 줄여보자면, 
" LibSass 및 Node Sass는 유지 보수는 무한적으로 유지할 것이지만 더 이상 사용되지 않습니다. 새로운 CSS나 Sass 기능에 추가 기능이나 호환성을 추가할 계획도 없다. 여전히 그것을 사용하는 프로젝트는 dart-sass로 옮겨야 한다." 라는 것이었다.

왜지..? 오늘에서야 이 글을 보긴하지만..

그리고 이제 다시 프로젝트를 설치해보았다.

성공하였는데 너무 찜찜하다.

에러 문구

npm ERR! code 1
npm ERR! path D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js npm ERR! Building: C:\Program Files\nodejs\node.exe D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli 'D:\\Vueproject\\Vue\\ip-addr-tracker\\app\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.14.0 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp verb `which` failed python2 Error: not found: python2 npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) { npm ERR! gyp verb `which` failed code: 'ENOENT' npm ERR! gyp verb `which` failed } npm ERR! gyp verb check python checking for Python executable "python" in the PATH npm ERR! gyp verb `which` failed Error: not found: python npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp verb `which` failed python Error: not found: python npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) { npm ERR! gyp verb `which` failed code: 'ENOENT' npm ERR! gyp verb `which` failed } npm ERR! gyp verb could not find "python". checking python launcher npm ERR! gyp verb could not find "python". guessing location npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable. npm ERR! gyp ERR! stack at PythonFinder.failNoPython (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\lib\configure.js:484:19) npm ERR! gyp ERR! stack at PythonFinder. (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\lib\configure.js:509:16) npm ERR! gyp ERR! stack at callback (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\graceful-fs\polyfills.js:299:20) npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp ERR! System Windows_NT 10.0.19044 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\Vueproject\\Vue\\ip-addr-tracker\\app\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" npm ERR! gyp ERR! cwd D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-sass npm ERR! gyp ERR! node -v v16.14.0 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1 npm ERR! A complete log of this run can be found in:

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

안녕하세요 상훈입니다.

Javascript의 기초 중의 기초를 공부하게 되어 포스팅하게되었습니다.

1. 변수 선언
2. 황금규칙 (2/5)
3. 식별자
4. 산술연산자
5. Null & Undefind
6. Template Literal

1. 변수 선언

  - 자바스크립트에서 변수는 형식을 가지지 않는다.
  - 자바스크립트에서는 ' ; ' 세미콜론을 사용하지 않아도 된다.
  - const, let 을 사용하자
    → var 는 구시대의 유물
      : 변수명을 잘못입력하게 되면 새로운 변수가 선언됨, 전역변수로 등록이 되어 사방팔방에서 나의 변수를 사용하게 된다.

2. 황금규칙 5가지 중 2가지

1. var 대신 let, const 를 사용하자
2. 엄격모드(strictmode) 를 사용하자 - var와 키워드 없이 사용하는 변수선언은 자제하자

3. 식별자

  - 변수명은 반드시 식별자(identifier)의 일반 문법을 준수해야 한다.
  - 식별자는 [ 유니코드 문자, 숫자, 언더바, $ ] 등으로 구성된다.
  - 숫자는 첫번째 문자가 될 수 없다.
  - ' $ ' 로 시작하는 이름은 보통 도구, 라이브러리 에서 자주 사용한다.
  - ' _ ' (로우바) 를 변수명 앞이나 뒤에 붙여 비공개 임을 표시하기도 한다.
  - ' _ ' 를 사용하는 것보다 Camel Case 를 사용하는 것을 지향한다.

4. 산술연산자 

  - ' ++ ', ' -- ' ...
  - 산술연산자를 사용하는 것을 지양하자.  후위연술자 빼고
  - 산술연산자의 자동형변환 에 의존하지 말자.

5. Null 과 Undefind

  - ' null ' 혹은 ' undefind ' 중 하나만 선택해서 사용하자
  - ' null ' 은 예약어, ' undefind ' 는 예약어가 아니다.
  - 추가적으로 ' NaN, Infinity ' 라는 지역변수도 선언을 지양하자.

6. Template Literal (템플릿 리터럴)

  - ' ${  } '
  - ' <pre> ' 처럼 개행이 가능하다
  - 중첩이 가능하다.

const greeting = `${id.length > 0 ? `${age[0]}. ` : '' } ${id}`

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

한빛미디어에서 리뷰어 이벤트를 하기에 정기적으로 개발관련 서적이 있으면 좋은 나는 신청을 하였고,
운 좋게 당첨되었다.

그래서 해당 글을 포스팅하게 되었다.

배송은 신경쓰고 있지않았지만, 약 2일-3일 정도 걸린 것 같다.
(월요일 신청, 화요일 당첨, 수-목요일 수령 이런 느낌)

교재는 상당히 깔끔하게 생겼다.

1장을 바로 펼쳐보았다. 이미 아는 것들이 많았지만, 그래도 복습겸 1장을 다 살펴보았다. 

내용은 정말 딱 필요한 핵심 내용만 작성되어져 있어서 가독성이 매우 우수했다.

고급 비구조화 - 객체 부분에서 잠깐 한동안 쳐다보게 되었는데 그래도 찬찬히 읽으니 이해가 잘 되었다.

역시 책은 1장부터 봐야 제맛.

앞으로 주기적으로 해당 교재에 대한 내용을 포스팅하려고 한다.

이상입니다.

웹소켓에 대해 외부접속도 가능하게 하려고 그간 많은 노력을 했으나 번번이 실패하여 어느덧 3주-4주의 시간이 흘렀다.

로컬 환경에서는 여러 번 성공하였으나 외부접속 부분에서 계속 실패. 방향을 바꿔버렸다.

`그냥 로컬로 돌리자`

간단한 서버가 될 코드 내용이다. index.js 등으로 구현

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server, {
  cors: { origin: "*"  }
});

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

// websocket으로 데이터 받아오기
const socket = io('ws://localhost:3000');

io.on('connection', (socket) => {
  console.log('a user connected');
});

나를 괴롭혔던 몇 가지의 문제들이 있었다.

1. Port 처리
2. CORS (Access-Control-Allow-Origin) 에러
3. REST API

첫째로 포트 문제였다.

공인 아이피로 접속해야하는데 자꾸 접속이 안됐었다. 서버를 돌려도 안되었고, 등등..
원인은 포트포워딩이었다. 과거에 서버를 설치하는데 내가 직접 건들지 않았던 부분이었기 때문에 신경 자체를 쓰지 못했다.

내 능력부족일 뿐,, ㅠㅠ

그리고 이번 기회로 네트워크 단의 공부를 잘 하게 되었다. 어떤 식으로 흘러가는지 대충 알았던 모습을 그림도 그려가면서 공부하며 이해를 할 수 있었다. ㅂㄷㅂㄷ.. 시간 잡아먹은거 생각하면 치가 떨림.

두 번째로 CORS 에러. 

프론트엔드 개발자들이 가장 자주 보고 친숙한 에러 중의 하나라고 하는데, 이해가 된다. 
걸핏하면 CORS에러에요~ 뿌잉뿌잉하면서 빨간 글씨로 나타나는 녀석이다.

서버에서 분명히 아래와 같이 주었는데도, 계속 에러나고 ㅋㅋㅋ 열받아 죽겠다.

cors: {  origin: "*"  }

ORIGIN * 는 함부로 주면 안된다.

그래도 어느정도 해결해서 다행이다. 전체적인 프로세스도 잘 알았고, 역시 부딪히는만큼 알게 되는 법

마지막으로 REST API 이다.

그래도 위의 두 녀석보다는 훨씬 애를 덜 먹였다. 왜냐하면 기존에도 자주 사용하는 방식이었기 때문. 
RESTFUL API 환경구성을 하기 위해 프론트와 백을 일부로 구분하여 사용하였다.

기존에는 Legacy였기 때문에 코드를 직접 보기 너무나도 끔찍하여 토할 것 같았으나, PHP를 백으로 놓고 데이터만 내뱉게 만들어놓고, Javascript로 나머지를 충당했다. 쓴 라이브러리 등은 ajax를 처음에는 사용하였으나, vue.js를 공부하면서 axios에 대해 알게되었고, 이제는 axios위주로 사용한다. 
axios에 대해서는 과거에 작성한 내용을 참고 바랍니다.

nodejs로 서버를 구성하고, socket.io 를 통해서 웹소켓을 구성하려고하는데 해당 에러가 발생하였다.

node.js TypeError: path must be absolute or specify root to res.sendFile [failed to parse JSON]

이유인즉슨, result.sendFile( ) 에서 [절대 경로 설정 or Root 경로 설정] 을 해주지 않았기 때문이다.

(라고 stackoverflow에서 말함)

그래서 해결방법은 간단하다.

__dirname 을 추가해주면 된다. -> 요청한 경로를 따라옴

app.get('/', function(req, res){
        res.sendFile(__dirname + '/index.html');
        });

일단 그래서 해당 에러는 해결이 되었다.

사용환경 :  Ubunut 20.0.4 LTS, Apache2.x, Node.js, Javascript

Apache설정 변경

# /etc/apache2/sites-available/000-default.conf  내용 추가

<VirtualHost  *:80>
ServerName example.com

           ProxyRequests Off
           ProxyPreserveHost On
           ProxyVia Full
           <Proxy *>
              Require all granted
           </Proxy>

           <Location /nodejs>
              ProxyPass http://localhost:3000
              ProxyPassReverse http://localhost:3000
           </Location>

            <Directory "/var/www/example.com/html">
                    AllowOverride All
            </Directory>
</VirtualHost>

3000포트로 허용함을 설정

$ sudo service apache2 restart

아파치 서버 재구동 

# /var/www/html/nodejs/hello.js

var http = require('http');
http.createServer(function (request, response) {
   response.writeHead(200, {'Content-Type': 'text/plain'});
   response.end('Hello World! Node.js is working correctly.\n');
}).listen(3000);
console.log('Server running at http://127.0.0.1:3000/');
console.log('It is running now...');

마찬가지로 3000포트 연결 설정

hello.js 파일 실행

$ node /var/www/html/nodejs/hello.js 

http://example.com:8080/node.js/
접속

일단 서버 내에서 8080포트로 접속하여 3000포트의 Websocket communication 로그 출력이 완료되었다.

Node.js, JavaScript의 Websocket을 이용해 간단한 셀프 채팅 어플리케이션을 구현하겠습니다.

웹소켓의 기본적인 구성은 다음과 같습니다.

굳이 개념치 않다면 안보셔도 무방합니다.

■ ws 설치 

$ npm install ws

우선 npm 명령어로 ws (web socket) 을 설치하도록 하겠습니다.

■ Server.js

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer( { port: 8900 } );    // 포트번호는 자유롭게 작성해주세요.

wss.on( 'connection', function(ws){
    console.log("connected");

   // 클라이언트가 메시지를 전송했을 때 수신하여 다시 보내는 과정.
    ws.on( 'message', function(msg){
        console.log("msg[" + msg + "]" );
        ws.send( msg );
    });
});

포트번호(port)는 본인이 사용하는 포트번호를 지정하면 됩니다.

그리고 구동하는 방법은 터미널에서

$ node server.js

로 js파일을 구동시킵니다.

■ Client.html

html파일이던 php파일이던 상관없습니다. 중요한건 javascript로 한다는 것이니까요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <title>Document</title>
   </head>
   <body>
    <form>
     <input id="Send" type="text" autofocus>    <!--메시지 작성 영역-->
     <button type="button" onclick="sendMessage();" >Send</button>  <!--전송버튼-->
    </form>
    <div id="Recv"></div>   <!-- 보낸 메시지가 기록되는 곳 -->
    <script>
        $( document ).ready( function() {
            var txtRecv = $('#Recv');
            ws = new WebSocket("ws://localhost:8900");

            // websocket 서버에 연결되면 연결 메시지를 화면에 출력한다.
            ws.onopen = function(e){
            txtRecv.append( "connected<br>" );
            };
      
            // websocket 에서 수신한 메시지를 화면에 출력한다.
            ws.onmessage = function(e){
            txtRecv.append( e.data + "<br>" );
            };
      
            // websocket 세션이 종료되면 화면에 출력한다.
            ws.onclose = function(e){
            txtRecv.append( "closed<br>" );
            }
        });
      
        // 사용자가 입력한 메시지를 서버로 전송한다.
        function sendMessage() {
            var txtSend = $('#Send');
        
            ws.send( txtSend.val() );
            txtSend.val( "" );
            txtSend.focus()
        }
       </script>
   </body>
   </html>

■ 결과

· 서버 구동 -> 연결 -> 페이지 접속마다 터미널에 "connected" 라는 로그가 찍힙니다.

· 메시지를 작성하고 버튼을 통해 전송하였을 때,

■ 결론

-> 몇가지 보완할 내용이 존재하긴 하다.

1. jQuery로 작성하였다는 점.
    -> 필자는 jQuery를 선호하지 않는다.
        비동기통신 위주로 사용하는 스타일인데, 예전에는 ajax 사용할 때 사용했지만,
        요즘은 axios 위주로 사용하기 때문에 이마저도 잘 사용하지 않는다.

2. 사소한 버그가 있다.
    -> 메시지를 작성하고 송출하였을 때, 해당 메시지가 웹페이지에 제대로 출력이 되지 않고,
         [ Object Object ] [ Blob ] 이런식으로 작성되더라. 
    -> e.data를 통해 해당 내용을 append 시켜 작성하였는데, 아무래도 해당 node 자체가 입력이 된것이라 판단하다.
    -> 해결방법으로 <p> 를 하나 생성해서 해당 내용을 생성하여 삽입할 수 있다.

3. 뭐 그냥.. 그렇다고..

참고