2021.2.22(mon)_express, sass 설치

✱express 서버 설치

오늘은 미루고 미루던 express 서버 설치를 했다. 'node.js 교과서'를 참고했는데 생각보다 간단했다. (화면을 띄우는 데 까지만.....) 서버 설치한 과정을 적자면,

 

   1. package.json 파일 만들기 + scripts에 "start": "nodemon app" 추가

(이 글 쓰고, 다음 날에 package.json에 대해 정리함)

npm init -y
// 여기서 -y 옵션은 뭘까...

   2. express, nodemon 설치 

npm i express
npm i -D nodemon
// i는 install 약자로 아예 똑같은 것인가..?

   3. app.js 파일 작성

const express = require('express');

const app = express();
app.set('port', process.env.PORT || 3000);

app.get('/', (req, res) => {
   res.send('Hello, Express');
});

app.listen(app.get('port'), () => {
   console.log(app.get('port'), '번 포트에서 대기 중');
});

   4.  npm start 했을 때 정상 작동. localhost:3000으로 접속하면  Hello, Express 출력됨.

 

   5.  HTML로 응답하고 싶다면 res.sendFile 메서드 사용. localhost:3000으로 접속하면 html 나옴.

const express = require('express');
const path = require('path');

const app = express();
app.set('port', process.env.PORT || 3000);

app.get('/', (req, res) => {
   // res.send('Hello, Express');
   res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(app.get('port'), () => {
   console.log(app.get('port'), '번 포트에서 대기 중');
});

 

 Node.js 교과서 책만 따라했는데 작동이 됐다. 중요한 건 이해하지 못 했다는 것...

(이 글 쓰고, 다음 날 블로그에 코드 정리함.)

 

📌📌📌 그런데 html을 작성하고, link태그로 css파일을 연결했는데 localhost:3000으로 접속했을 때 반영이 안 됐다. 경로 문제인가하고 계속 수정해봤지만 그 문제가 아니었다. 동료들과 같이 해본 결과 역시나 해결되었다! 

app.use(express.static('src'));

app.js에 이 코드를 하나 추가했는데 바로 됐다. 이 코드가 어떤 걸 의미하는지 공부해야겠다!!! (오늘은 컨디션 조절을 위해 잘 거다.)

 

✱sass 설치

sass 설치하는 과정 중 가장 헷갈렸던 부분.

   1.  sass, scss가 있는데 scss가 더 좋고 최신이래서 난 그걸 쓰고 싶은데 scss 설치는 안 보이고 sass설치만 보인다. npm으로 설치하는 모듈들이 다 뭐 sass, node-sass, sass/sass/sass....답답해서 계속 찾아보니까 sass설치하면 되는 거였다.^^ sass를 설치하면 scss도 된다. 확장자명을 다르게 파일로 만들 뿐. 이걸 확신으로 답을 찾을 때까지 오래 걸렸다.

 

   2.  sass를 사용하려면 뭔가 설치를 해야하는 것 같은데 블로그에 따라서 'sass'도 있고, 'node-sass'도 있고.. 그래서 처음에는 sass를 설치해야 사용할 수 있고, node-sass가 css로 컴파일링 해주는 건가 생각했다. 그래서 두 개 다 설치해야하는 줄 알았다. 더 찾아본 결과 둘 중 하나면 되고 둘 다 컴파일러이다.

 

  3. node-sass, sass 둘 다 설치를 하려는데 에러가 엄청나게 뜬다.

 

블로그를 뒤져 해결하기는 했지만 --unsafe-perm는 뭘까ㅠㅠ

 

 

  4. 처음에는 node-sass를 설치했다가 deprecated도 맘에 좀 걸리고, 폐지됐다는 글을 봐버려서 찜찜했는데 어텀이 sass로 설치했다길래 나도 sass를 또 설치했다. 컴파일되는 건 똑같은 것 같은데 내 마음이 편해...

 

✱마무리

 오늘의 가장 큰 고민은 express의 서버 구동을 완벽히 이해하고 넘어가야할까...구현이 됐다면 다음으로 넘어가도 되는 걸까 였다.  sass도 설치해야하고, html도 작성해야하고, sass문법 공부해서 웹페이지를 만들고, js로 동적구현까지 해야하는데.. express를 공부하는 데에 시간을 많이 써도 되는 것일까하는 고민이 든다. 서버에서 이미지같은 것도 가져오고 하려면 이해를 하고 넘어가는 게 맞는 것 같아서 내일도 express를 공부해야할 것 같다ㅠㅠ 

 

쓰다보니까 오늘 참 공부를 잘못했다는 생각이 든다. 할 건 많고 마음은 급하니 일단 뭔가 됐다!하면 더 이상 이해하려고 하지 않고 넘긴 것 같다. 문제를 해결은 했지만, 왜 해결이 된건지, 그게 뭔지 모른 채로 그냥 넘어갔다. 이렇게 계속 공부한다면 앞으로 쌓이는 게 없지 않을까.. TIL을 써보니 뭔가 남는 것 없이 공부했다라는 걸 확실히 느낄 수 있었다...

 

할 게 많은데 다 이해하고 넘어가자니 시간은 없고, 마음은 급하고 복잡하다~~~🤯

 

---

참고📚

이 글의 express 설치 부분 코드는 조현영 -〔Node.js 교과서〕책의 코드를 참고했습니다.