Daily 학습일기 썸네일형 리스트형 [패스트캠퍼스 챌린지 30일차] Express - 사용자 이미지 업로드 패스트캠퍼스 작심 30일 챌린지 30일차. 드디어 패스트캠퍼스 작심 30일 챌린지의 마지막날이다. 마지막 날인만큼 학습 내용에 대해 간략히 작성하고 챌린지를 통해 느낀점을 작성해야지! 오늘 학습한 내용은 그동안 Express로 사용자 정보를 조회하고 입력하는 API 기능을 수정하여, 사용자의 이미지를 업로드하는 기능을 배웠다. 먼저 업로드를 하기 위해 pug 파일에 Form을 추가한다. form(action=`/user/${userId}/profile` method="post" enctype="multipart/form-data") input(type="file" name="profile") button UploadProfile Picture 코드에서 보는것과 같이 /user/사용자ID/profile이라.. 더보기 [패스트캠퍼스 챌린지 29일차] Express - Jest를 통한 API 테스트 패스트캠퍼스 작심 30일 챌린지 29일차. 오늘은 그동안 작성했던 API 코드를 테스트하는 방법에 대해 학습하였다. Java에서 Junit을 이용하여 테스트하는 것처럼 Nodejs에서는 Javascript에서 제공하는 jest와 super test 패키지를이용해 테스트 코드를 작성하였다. 코드를 작성하기 전에 jest는 Jabascript Testing Framework로 여러 시나리오의 테스트를 도와주는 Tool이고, Super Test는 Express App에 대해 Test를 도와주는 도구라는 점을 알고 있자. 코드를 작성하기 위해 먼저 npm을 통해 다음 네가지 패키지를 다운로드 받자. jest @types/jest supertest @types/supertest jest와 supertest를 사용.. 더보기 [패스트캠퍼스 챌린지 28일차] Express - Pug Template 패스트캠퍼스 작심 30일 챌린지 28일차. 어느덧 28일차 강의를 듣고 있다. 오늘은 지난 시간에 RestAPI와 Middleware, Router 개념을 이용해 작성한 Page에 CSS를 추가하고 존재하지 않는 User를 조회할 때 Error Message를 Handling하는 것에 대해 학습하였다. 그럼 먼저 CSS 적용부터! CSS는 '스태틱 파일 서빙'이라는 개념을 이용하여 적용하게 되는데 HTML의 CSS를 작성하고 적용해본 사람이라면 쉽게 이해할 수 있을 것이다. 그럼 아래 JS파일, CSS파일과 PUG 파일을 살펴보자 [index.css] body { background-color: green; } .blue { color: blue; } .orange { color: orange; } .b.. 더보기 [패스트캠퍼스 챌린지 27일차] Express - Pug Template 패스트캠퍼스 작심 30일 챌린지 27일차. 지난 시간에 Express를 통해 Rest API를 간단히 구현해봤다. 보통 실무에서 Rest API를 통해 특정 Data를 JSON 형태로 전달받는 경우가 많다. (물론 내 경험을 기준으로...) 이전까지 구현한 Rest API는 모두 JSON 형태로 전달받도록 구현하였다. 오늘은 JSON이 아닌 웹 페이지가 출력되도록 수정하였다. Web Page를 구현하기 위한 가장 간단한 방법은 HTML 파일을 직접 만들어서 화면에 전달하면 된다. 하지만 이번 강의에서는 Pug라는 Template Engine을 활용해서 화면을 구현하였다. Pug에 대해 알아보기 전에 Template Engine이란 Template 언어로 작성된 코드를 HTML로 변환해주는 역할을 하는 것.. 더보기 [패스트캠퍼스 챌린지 26일차] Express - Rest API 라우팅 패스트캠퍼스 작심 30일 챌린지 26일차. 25일차 강의를 통해 미들웨어의 개념을 어느정도 알았을 것이다. 오늘은 25일차 소스코드를 개선하여 Rest API를 작성하고 Express에서 지원하는 라우터의 기능에 대해 학습하였다. 라우터에 대해 알아보기 전에 아래 소스코드에서 '/'는 URL Path인 것을 지난 시간에 배웠다. app.use('/', (req, res, next) => { ... }) 이 Path에 대해 Express는 다양한 Express Path Pattern을 지원하고 있다. Path Pattern에 대해 간략히 알아보자. - /ab?cd : acd 또는 abcd로 접속 가능 - /ab+cd : abcd, abbcd, abbbcd, abbbbbbbbbbcd 접속 가능 - /ab*c.. 더보기 [패스트캠퍼스 챌린지 25일차] Express - Middleware 패스트캠퍼스 작심 30일 챌린지 25일차. 오늘은 Express의 미들웨어 개념에 대해 학습하였다. 미들웨어하면 일반적인 컴퓨터보다 조금 더 큰 컴퓨터를 생각했는데, Express에서의 미들웨어는 다른 개념이다. Express가 실행되면 사용자가 서버로 접근하면서 request를 전달하는데, 이때 request가 응답으로 반환되기 전까지 데이터 처리를 위해 거치는 모든 함수 하나 하나를 미들웨어라고 한다. 단 request가 거치는 함수들 사이의 연관성이 없으면 미들웨어는 의미가 없다. 그러므로 함수끼리 데이터를 전달하며 데이터를 처리하게 되는데 이처럼 앞의 미들웨어가 처리한 데이터를 뒤의 미들웨어로 전달하여 서로 연관된 기능을 하는 함수들을 미들웨어라고 한다. 그럼 이전 Express 개념에서 작성한 .. 더보기 [패스트캠퍼스 챌린지 24일차] Express - 소개 패스트캠퍼스 작심 30일 챌린지 24일차. 오늘은 Javascript의 기본 개념을 끝낸 후 Nodejs에서 많이 사용하는 Express에 대해 간단히 학습하였다. Express는 Nodejs의 가장 대표적인 웹 프레임워크로 이전에 배웠던 HTTP 패키지와 거의 비슷하게 서버를 구현하여 동작시킬 수 있다. 조금 더 자세히 알아보면, HTTP 요청을 처리하는 핸들러를 만들 수 있고, 요청에 대한 응답을 만들기 위해 View 렌더링 엔진과 결합할 수 있다. (developer.mozilla.org의 내용을 참고하였다.) 그럼 Nodejs에서 Express를 사용하려면? 당연히 Express 패키지를 설치해야한다. $ npm install express --save 위에 명령어를 통해 express를 설치하면.. 더보기 [패스트캠퍼스 챌린지 23일차] NodeJS - 백엔드 Part 1 마무리 패스트캠퍼스 작심 30일 챌린지 23일차. 오늘은 백엔드 Part 1 마무리 강의, 리팩토링 프로젝트 강의를 수강하였다. 이번 강의에서는 API를 통해 '왕좌의 게임 가문의 캐릭터에서 긍정적인 가문과 부정적인 가문을 조회'하는 기능을 리팩토링하였다. 먼저 여기서 사용한 API는 두 가지가 있다. 하나는 말그대로 '왕좌의 게임' 데이터를 가져오는 Game of thrones Quotes API. 그리고 다른 하나는 문잘 별로 긍정적인지 부정적인지를 분석해주는 Sentim-API. 이 두가지를 통해 구현된 소스코드를 '백엔드 Part 1' 강의에서 배운 내용을 바탕으로 리팩토링을 진행하였다. 오늘은 일부 기능에 대해서만 Clone Coding을 진행하고 강의를 수강만 했기 때문에 학습 내용에 대한 요약은 간.. 더보기 이전 1 2 3 4 다음
