화면을 만들고 꾸밀 때 사용하는 HTML, CSS쪽 지식이 빈약하다보니 스트레스를 받는 일이 잦았다. 과장해서 표현하자면, 백엔드 비즈니스 로직 설계나 구현보다 화면의 버튼 위치 이동, 정렬 맞추기, 화면 수정 작업이 더 부담될 때도 있었다. ㅎㅎ 그리고 개인적인 프론트엔드 프로젝트를 할 때도 화면 만들고 이쁘게 꾸미는게 부담이다. 그래서 패스트캠퍼스의 프론트엔드 개발자 초격차 패키지를 신청하게 됐고, 이 강의를 들으면서 몰랐던 내용이나 부족했던 부분들을 정리해보고자 한다. 나는 이 강의를 통해 HTML, CSS를 이용한 화면 작업에 대해 부담감을 갖지 않는 것을 1차 목표로 하고 있다. 우선 프론트엔드 개발자란 대체 무엇일까? 프론트엔드 개발자? 웹애플리케이션을 만들고 운영하기 위해서는 여러 분야의 사..

[클립명] 1. 404, 500 error handling 2. nunjucks macro 3. Express 권장구조 정적파일 세팅 node.js의 웹프레임워크인 Express는 각종 이미지 파일이나 js, css 파일들을 추가할때마다 해당 파일을 불러오기 위하여 router 설정을 하나하나 일일이 하지 않고, 불러올 수 있도록 간단하게 설정할 수 있다. 이를 정적파일 세팅이라고 한다.만약, 이런 기능이 없다면 이미지 파일을 추가할때마다 일일이 router 설정을 해줘야 할 것이다. 이것은 헬게이트 오픈이라고 할 수 있겠지... express에서 정적파일 세팅은 미들웨어 함수를 사용하여 아래와 같이 한다. app.use(express.static('uploads')에서 'uploads'는 정적파일이 존..

[클립명] 1. form (body-parser) 2. 정적파일 3. Global View Variable body-parser란? body-parser는 미들웨어이다. 즉, 요청(request)과 응답(response) 사이에서 공통적인 기능을 수행하는 소프트웨어이다. 그렇다면 역할은 무엇일까? 바로 요청의 본문을 지정한 형태로 파싱해주는 미들웨어이다. 아래의 테스트 코드에서 req.body를 콘솔로그로 출력해보면 undefined가 출력된다. 즉, Node.js의 웹프레임워크인 Express는 요청을 처리할 때 기본적으로 body를 undefined로 처리하고 있는 것이다. app.get('/test', (req, res) => { res.send('test'); console.log(req.body..

[클립명] 1. view engine 2. 템플릿 상속 3. 미들웨어 View Engine이란? Node.js에는 View Engine이라는 시스템이 있다. 뷰엔진은 서버에서 처리한 데이터 결과값을 정적인 페이지(HTML 파일)에 보다 편리하게 출력해주기 위해 사용한다. 뷰엔진에서 요구하는 형태로 템플릿 파일(문서)을 만들고, 해당 템플릿 문서에 서버에서 처리한 데이터를 전달하면 해당 데이터를 화면에 출력할 수 있다. 백엔드 로직을 작성하는 자바스크립트 파일 안에 HTML코드를 작성하지 않아도 되므로, 좀 더 MVC 패턴에 맞게 개발을 진행할 수 있도록 도와준다. 또한 뷰엔진에서 요구하는 문법에 맞춰 코드를 작성하면 뷰엔진이 자동으로 html 파일로 렌더링해주기 때문에 HTML파일보다 좀 더 간결하고 구..

[클립명] 1. Express 시작 2. nodemon 3. Routing Express란? Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크이다. 사실상 Nodejs의 표준 웹서버 프레임워크로 불려질 만큼 많은 곳에서 사용하고 있다. 그렇다면 Node.js와 Express는 무슨 관계인가? 이전 글에서 Node.js는 Chrome의 V8엔진을 이용하여 javascript로 브라우저가 아니라 서버를 구축하고, 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)이라고 했다. Express는 이런 Nodejs의 원칙과 방법을 이용하여 웹애플리케이션을 만들기 위한 프레임워크이다. 왜 Express 를 사용..

[클립명] 1. 에디터 설치하기 2. 모듈패턴 3. npm NPM(Node Package Manager)이란? node.js 를 배우기 위해서는 npm이라는 것을 필수로 알아야 한다. npm은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 자바스크립트 런타임 환경 node.js의 기본 패키지 관리자이다. 즉 자바스크립트로 개발된 각종 모듈의 설치, 업데이트, 구성, 제거 과정을 자동화하여 관리해주는 기능이다. 쉽게 말하면, 자신이 만든 모듈을 배포하거나, 다른 사용자가 만든 모듈을 다운로드하는 것을 손쉽게 할 수 있도록 도와주는 기능이다. npm은 node.js를 설치하면 자동으로 함께 설치된다. node.js 설치 후 cmd 창에서 아래 명령어를 입력하여 설치여부 및 버전을 확인할 수 있다. ..