[항해99] WIL(Week I Learn) - 5주차

이번주는 성공적으로 과제를 원래 제출하는 시간보다 빨리 제출했다...

 

어떻게 보면 데드라인을 지켰다는게 상당히 의미가 있다.

 

Class를 활용해서 TEST Code를 Jest로 검증해보는 과정이었는데, 

 

솔직히 말해서 뭔가 Class에 대해서 공부하면서 배운

 

상속과 같은 개념들을 정확히  이해하고 사용했다고는 생각이 들지 않는다.

 

일단 나는 class의 상속을 다음과 같이 생각했다.

 

일반 함수가 new 연산자와 호출 시 생성자 함수로써 동작을 시작한다.

var Es5 = function(name){ 

this.name = name;

};

Class는 동일한 항목들(properties)과 동일한 함수를 가지고 있는, 객체를 생성하기 위해 사용된다. {name : “john”, age:19}와 같은 형태를 가진 객체를 생성하기 위해 사용된다.

var array = new Array(1, 2, 3);  

예를들어, 생성자 함수 Array를 new 연산자와 함께 호출한다면 인스턴스가 생성된다.

Array를 Class라고 한다면, Array.prototype 객체 내부의 요소들(concat, filter, forEach 등)이

인스턴스에 상속된다고 볼 수 있다.

또, 인스턴스에 상속되는지 아닌지에 따라서, 스태틱 멤버와 인스턴스 멤버로 나뉜다.

• 스태틱 멤버: 프로토타입 프로퍼티 내부에 할당되지 않고 Array 생성자 함수 객체에 직접 할당되어 있는 프로퍼티
• 인스턴스 멤버: 프로토타입 내부에 정의되어있는 메서드들

만약 Js에서 상속을 구현했다는 것은 프로토타입 체인을 잘 연결한 것으로 이해할 수 있는데,

프로토타입 체이닝으로 인해 JS는 다른 언어들과의 상속과 다른 작용을 한다.

그렇기 때문에, 상위클래스에 접근할 수 있는 수단인 super나 인스턴스에 영향을 주는 클래스값 없애기 등 다양한 작용을 통해 상속을 실현시킬 수 있다.

 

어디서 보고 배운것이라, 정확히 이해했는지는 모르겠지만 음.. 뭐랄까

쉽게 이해한 것치고 써먹는 것은 어려웠다 정도?

 

이 외에도 다른 사람의 프로젝트들을 둘러보다가

노드에서 써먹을 수 있는 기술들을 몇가지 배웠는데,

 

https://vlogue.tistory.com/62?category=1023813 

[Node.js] Express.joi 모듈을 활용해 validation을 검증하자

Express.joi,

https://vlogue.tistory.com/61?category=1023813 

[Node.js] bcrpyt 모듈,

Express.bcrpyt,

https://vlogue.tistory.com/60?category=1023813 

등을 배웠고 현재는 Multer를 공부중이다.

 

---

주특기 심화주차가 끝나고, 프론트엔드를 공부하시는 분들과

같이 협업을 할 수 있는 Mini Project 주차가 시작됐다.

Api의 설계부터 시작하고, Schema를 어떻게 정의할 것인지

db는 어떤 것을 사용할 것인지부터 해서 환결설정을 하는데 상당히 지치고 오랜 시간이 걸린다고 느꼈다.

 

그리고 3파트로 나눠서 서버쪽 api를 구성하게 됐는데,

내가 맡은 쪽은 게시물을 등록하고 보여주는 일종의 /posts 를 담당하게 됐다.

사실 express를 이용해서 CRUD를 구성하는 것은 이전부터 해왔던 일이기 때문에 그렇게 어렵지 않을거라고 생각했으나

프론트 axios에서 form태그를 이용해 form-data 형식으로 서버로 넘겨준다면

서버에서 Multer를 통해 받아줘야 한다는 사실을 알게됐다.

그리고 그 과정에서 AWS S3를 알게됐다.

 

AWS S3클라우드를 현업에서도 잘 쓰인다는 사실을 알게된 이후로 팀원분들과 협의를 통해서

이미지 파일을 db나 로컬에 저장한다는 식의 방법말고

좀더 실천적이고 건설적인 방법이라고 생각되는 aws s3를 사용해보기로 했다.

 

이와중에 FE에서는 axios를 사용하게 됐다고 들었다.

이 Axios라는건 일종의 서드파티 라이브러리로서 , CDN이나 npm같은 방법을 통해 설치하여

프로젝트에 추가할 수 있다고 한다.

 

Axios를 사용하면, 응답 데이터를 기본적으로 Json타입으로 사용할 수 있고, 그렇기 때문에

따로 바꿔줄 필요가 없어서 편리하다고 한다.

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 아다.
쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.
이미 자바스크립트에는 fetch api가 있지만,
프레임워크에서 ajax를 구현할땐 axios를 쓰는 편이라고 보면 된다.

 

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
Promise(ES6) API 사용
요청과 응답 데이터의 변형
HTTP 요청 취소
HTTP 요청과 응답을 JSON 형태로 자동 변경

을 사용할 수 있다고 한다.

 

그리고 fe쪽과 협업을 위해서 권한 문제를 해결해야 하는데 여기서 

https://vlogue.tistory.com/60?category=1023813 

[Node.js] Express.cors

cors에 관한 설정이 따로 필요하다.

 

위에 올려둔 링크는 내가 직접 작성한 글이니... 베껴온 것이 아니라는 점만.. 참고해주면 감사할 것 같다.

 

multer를 통해 이미지를 서버쪽에서도 관리해줘야 한다는 사실을 알게됐으니..

multer를 배우고, cors설정 또한 해줘야 하니.. 생각보다 할일이 많다고 느꼈다.