오늘 한 일
- express 미들웨어 공부
- 자바스크립트 기본 공부
- 기본 crud API 다시 만들며 복습
생각
항해99 기간동안 많은 걸 하려고 하기보다는 내가 쓰는 코드를 잘 이해하고 기본인 자바스크립트, 기초적인 네트워크, OS개념들을 정리해야겠다. 특히 프론트에도 관심이 있으니 자바스크립트 공부를 꾸준히 해서 기본을 다져야겠다.
오늘의 노드
미들웨어의 진가는 다른 사람들이 짜 놓은 패키지를 쓸 수 있다는 것이다.
morgan 요청과 응답을 기록
morgan(’dev’) 개발할 때는 dev를 쓰고 실무에서는, 배포할때는 combined를 많이 쓴다고 한다.
combined를 쓰면 좀 더 자세히 나옴
cookieParser() 쿠키 관련 조작들이 더 쉬워진다.
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
json, urlencoded를 쓰면 request에서 보내는 데이터를 알아서 파싱해준다.
body-parser 미들웨어는 더이상 안쓴다.
미들웨어간에도 순서가 중요하다.
static같은 미들웨어는 요청한 경로에 해당 파일이 있으면 내부적으로 next호출을 보내지 않는다. 그렇기 때문에 morgan미들 웨어 다음에 바로 static 미들웨어를 써서 굳이 다른 미들웨어를 거치지 않고 써주면 성능에도 좋다. 더 많은 처리들을 거치지 않기 때문에
미들웨어간에 데이터를 전송하고 싶다면
app.use((req,res,next) => {
req.data = '데이터'
})
app.get('/', (req, res) => {
req.data // 데이터
res.sendFile(path.join(__dirname, 'index.html'));
});req.data를 이용할 수 있다. get ‘/’ 여기서 next가 없고 res.sendFile로 바로 끝나기 때문에 req.data는 메모리에 없고 1회성으로 쓸 수 있다. 만약 계속 유지되고 싶은 데이터를 쓰고 싶다면 req.session에 넣으면 된다. req.session.date = ‘데이터' 세션에다 담았기 때문에 다음 요청에도 남아있다.
미들웨어 확장법
예를 들어 로그인한 사람들면 특정 이미지나 파일을 보여주고 싶을 때
app.use('/', (req, res, next) => {
if(req.session.id){
express.static(path.join(__dirname, 'public'))(req, res, next)
} else{
next();
}
이렇게 미들웨어 안에 미들웨어를 넣을 수 있다.
세션 아이디가 있으면 파일을 보여주고 없으면 다음으로 넘기고dotenv는 미들웨어는 아니고 비밀키들을 관리 할 수 있는 용도로 쓰일 수 있다.
.env 파일에 비밀키를 놔두고 process.env.COOKIE_SECRET이렇게 해줄 수 있다.
.env 파일에는 COOKIE_SECRET = jasoncookiesecret이렇게 key = value형식으로 적어두면 된다.(;) 세미콜론은 적어주면 안됨
이렇게 하면 소스코드가 해킹 당해도 .env만 잘 관리하면 비밀키는 지킬 수 있다.
노드에서는
const dotenv = require(’dotenv’)이렇게 불러와서
dotenv.config()이렇게 쓸 수 있다. 이렇게 하면 process.env.COOKIE_SECRET 이렇게 쓰인 곳은
jasoncookiesecret의 역할을 한다.
.env 파일은 github에 올리면 안된다.
<궁금한 것>
서버사이드 렌더링에 대해 공부해봐야겠다.
왜 서버사이들 렌더링을 하는지, 프론트에서 만들면 되는거 아닌지 궁금하다.
오늘의 자바스크립트
기본적인 변수
변수는 기억하고 여러번 재사용하기 위해서 쓰는 것이다.
const onClick = function () {
console.log('버튼 클릭');
};
document.querySelector('button').addEventListener('click', onClick);이렇게 쓰는 게 나을까
document.querySelector('input').addEventListener('input', () => {
console.log('글자 입력');
});이게 나을까
상관은 없지만 onClick함수를 재사용하지 않는다면 그냥 콜백함수를 바로 적어주는거도 괜찮다.
콜백함수
어떤 동작이 실행된 다음에 예를 들어 클릭을 하고 난 뒤에 연이어서 실행되는 함수
함수는 여러가지 이름으로 불릴 수 있다.
같은 함수라도 이벤트리스너 함수, 콜백함수, 무명함수로 불릴 수 있다.
