승터디

오늘은 팀 프로젝트가 얼추 마무리가 되어서 nest.js책을 보며 공부하였다. 그중 프로젝트 세팅에 대해서 정리하려고 한다. npm(Node project manager)로 설치를 진행할것이다. npm은 node를 설치하면 같이 설치된다. Nest.js 설치방법 // 1. cli을 설치한다. (Commend line interface) // nest 프로젝트의 개발 및 유지 관리하는데 도움을준다. $ npm i -g @nestjs/cli // 2. 프로젝트 이름을 이용하여 프로젝트를 생성한다. $ nest new "프로젝트 이름" // 3. 프로젝트 실행 => dev가 붙으면 코드 수정할때마다 재구동 된다. $ npm run start. $ npm run start:dev Nest.js 의 특징 특징 단..

오늘까지 해서 주요 기능은 구현완료를 목표를 하고 작업을 했었다. 나는 리뷰에 대한 CRUD를 담당했다. 리뷰가 등록될때 리뷰에 대한 고유 id를 어떻게 넣을까 고민을 했다. 내 결론은 Math.random 함수를 사용해서 랜덤 값을 주는 방법이었다. 그 작업을 한창 진행 중에 튜터님이 우리 방을 방문해서 진행상황에 대해 질문하셨다. 현재 어디까지 되었고 지금 무엇을 하고 있는지 설명을 드렸더니 튜터님께서 random함수 말고 uuid라는 걸 사용해 보라고 권하셨다. 내가 회사에서 일할 때도 접해보았고 과거에 공부할 때도 알고 있던 부분인데 생각을 하지 못했었다... 그 말을 듣고 아차 싶어서 검색 후 적용해 보았다. 나는 Review라는 클래스를 만들어서 규격을 만들고 생성자에서 uuid를 넣어서 고유..

오늘은 팀프로젝트를 진행 중 문제가 생겼었다. 내가 분업 및 모듈화를 위해 자바스크립트를 기능별로 나누었고 type="module"로 스크립트를 선언했다. 여기서 문제가 생겼는데 모듈 내에서 DOM을 접근하려고 할때 접근할 수가 없었다. addEventLisner를 사용해서 이벤트를 주려고 해도 먹히지가 않았다. 구글링도 해봤는데 모듈에선 DOM을 제어할 수 없다고 검색이 되었다. 자세한 이유를 알고 싶어서 튜터님에게 가서 여쭤보았는데 모듈은 부품처럼 각자 독립적이기 때문에 DOM과 모듈이 서로를 알지 못한다고 한다. 그래서 모듈인 부분을 빼버리고 defer를 주어서 DOM생성후 제어할 수 있었다.

새로운 프로젝트 시작 오늘부터 새로운 팀프로젝트를 시작하게 되었다. 주제는 전에 진행했던 개인과제를 더욱 업그레이드하는 과제였다. 이번에도 필수요구 사항이 있었고 배운것을 활용하여 개발한다면 그리 어렵지 않게 요구사항을 충족할 수 있을 거 같다. 우리 팀은 모여서 디자인적인 부분을 다시 정의하였다. 요구사항에 맞춰서 상세화면을 추기하기로 하였다. 그리고 상세화면에서 해당 영화에 리뷰를 작성할 수 있는 덧글기능을 추가하기로 하였다. 내가 팀장이어서 오늘은 프로젝트 세팅을 하기로 하였다. 다음과 같이 폴더를 나누었다. 다른 팀원 중에 이전 프로젝트에서 작업하는 부분이 겹쳐서 상당히 고생하셨다는 이야기를 듣고 모듈화 시켜서 서로 작업에 최대한 간섭 없이 할 수 있도록 하려고 노력했다. 모듈은 기능별로 나누었고..

자바스크립트를 더욱 강력하게 만들어줄 타입스크립트 자바스크립트에서는 변수를 선얼할때 타입을 지정하지 않고 실행시점에 타입이 결정되는 언어이다. 이러한 특징 때문에 편한 부분도 있지만 예기치 못한 결과를 초례하기도 한다. 이러한 문제는 프로젝트가 커지면 커질수록 더욱 심각해졌다. 이러한 배경 때문에 타입스크립트가 등장했고 최근엔 많은 자바스크립트로 된 프레임워크에선 타입스크립트를 권장한다. 개인 과제도 제출했고 강의도 2 회독이 끝나서 오늘은 앞으로 배우게될 타입스크립을 미리 만나보았다. 타입스크립트 설치하기 1.폴더 만든 후 오픈하고 터미널 오픈하기 여기서는 Test 이름의 폴더를 만들었다 2. 해당 명령어를 입력해야 한다(npm이 설치되어있어야 한다.) npm install -g typescript 3..

자바스크립트에선 this라는 키워드가 존재한다. 다른 언어에서도 자주 볼 수 있는 키워드인데 자바스크립트에서 this는 가리키는 객체가 상당히 혼란스러운 경우가 많다. function add(a, b) { console.log(this, a, b); } const obj1 = { name : "obj1", func : function () { console.log(this); } } 여기 형태에 함수가 있다. add는 평범하게 함수 선언식으로 선언된 함수이다. func는 obj1에 속해있는 함수이다. 이런한 형태일 때 각자 this가 가리키는 게 무엇인지 생각해 보자. 브라우저 콘솔에서 add함수를 실행시켜 보았다. 10과 20은 우리가 전달한 값이고 window라는 정체불명의 객체가 출력되는 것을 볼 ..

실행 컨텍스트란????? 사실 이 주제는 3주 차 강의 내용인데 처음 들었을 때는 이해가 가지 않는 부분이 많아서 TIL에 기록을 하지 않았다. 강의를 2 회독 한 시점에서 조금 감을 잡았고 정리한 내용을 한 번 더 읽으니까 더 이해하기 쉬웠다. 자바스크립트는 CallStack 이란곳에 실행 콘텍스트를 저장하고 Stack자료구조(FIFO)처럼 관리해서 코드 실행순서를 보장한다. CallStack에 저장하는 실행 콘텍스트란것이 무엇인지 알아보자 실행 컨텍스트 실행할 코드에 제공할 환경 정보를 모아놓은 객체이다. 3가지 일을 함 호이스팅 외부 환경 구성 this 바인딩 실행 콘텍스트에는 무엇이 담기나?? VariableEnvironment 식별자 정보 (record)는 변수, 함수, 매개변수 등을 의미한다...

드디어 개인 과제.....! 내일 배움 캠프에서 자바스크립트 수업을 시작한 지 1주일이 되었다. 예정대로 오늘 오전 개인 과제를 공지해 주셨다. 지금 공부하던 내용도 이해가 가지 않는 부분이 많아서 걱정이 되었다. 그리고 대망에 개인 과제를 보았는데..!!! 인기 영화 리스트를 볼 수 있는 사이트를 만들라고 하셨다. 제시해주신 필수요구사항은 다음과 같다. 라이브러리 없이 순수 바닐라 자바스크립트를 사용할 것 TMDB 오픈 API 사용하여 인기영화 데이터를 가져와서 사용할 것 받아온 영화 리스트를 카드형식으로 구현 영화 검색 기능 구현 하기 기재된 Javascript 문법 요소를 사용하여 구현 const와 let만을 이용하여 변수선언 화살표함수 배열 메서드 map, filter 등등 DOM 제어하기 그리고..

Class에 Property를 은닉하는 방법, 그리고 정적메서드 현재까지 학습한 내용을 바탕으로 class를 선언하면 다음과 같다. class Person { constructor (name, age) { this.name = name; this.age = age; } get name () { return this.name; } set name (value) { this.name = value; } } Person이란 class를 만들고 생성자로 name, age를 받는다. 여기에 Getter, Setter를 추가했다. 기존처럼 property에 직접 접근해서 가져오거나 할당하면 되는데 왜 Getter, Setter를 만들어서 만들어서 사용할까???? 1. property 세팅되는 값을 원하는 대로 통제..

자바스크립트 깊어질수록 어렵다. 자바스크립트를 공부하기 전에 익히 듣기론 배우기 쉬운 언어라는 이야기를 들었다. 3주 차 강의를 들을 때 까진 이 말이 맞다고 생각했었다.. 그러나 this, 동기, 비동기 Promise 등 다양한 내용이 나오니까 이해하기 힘든 부분이 많아졌다.오늘 글에서 이 내용을 다뤄야 하지만 이해가 가지않는 부분이 많아서 추가적인 학습 후 글에서 다뤄야 할 거 같다. 콜백 함수란? 함수를 인자로 받는다 함수를 리턴한다. // 대표적인 콜백함수 setTimeout(function() { 전달될 함수 내용 }, 1000); [1, 2, 3, 4].forEach(() => { 함수 내용 }); 콜백함수도 함수이므로 this를 사용할 시 전역 객체를 참조한다. 클래스 클래스는 설계도와 같다..