승터디

오늘은 팀 프로젝트가 얼추 마무리가 되어서 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주 차 강의를 들을 때 까진 이 말이 맞다고 생각했었다.. 그러나 this, 동기, 비동기 Promise 등 다양한 내용이 나오니까 이해하기 힘든 부분이 많아졌다.오늘 글에서 이 내용을 다뤄야 하지만 이해가 가지않는 부분이 많아서 추가적인 학습 후 글에서 다뤄야 할 거 같다. 콜백 함수란? 함수를 인자로 받는다 함수를 리턴한다. // 대표적인 콜백함수 setTimeout(function() { 전달될 함수 내용 }, 1000); [1, 2, 3, 4].forEach(() => { 함수 내용 }); 콜백함수도 함수이므로 this를 사용할 시 전역 객체를 참조한다. 클래스 클래스는 설계도와 같다..

Map, Set 자료구조 그리고 데이터 저장 원리 Map과 Set 자료구조에 대해서는 프로그래밍 언어에서 비슷한 개념으로 많이 사용되는 것을 알고 있었다. Map은 자바의 Map가 비슷했고 Set은 스위프트를 공부할 때 배웠던 개념이랑 유사했다. 그래서 비교적 이해하는데 수월했던 것 같다. 그리고 변수를 선언하고 할당할 때 메모리에 어떻게 저장되는지는 이번에 처음 배웠는데 원리를 알고 나니까 자바스크립트를 깊이 있게 알아가는 느낌이 들었다. Map 이란 Key, Value 값으로 이루어져 Object와 비슷하지만 순서를 가진다. 검색, 삭제, 검색, 존재여부 등 활용할 수 있음 const myMap = new Map(); // Map에 값을 저장하기 myMap.set("one", 1); myMap.set..

점점 더 발전하는 자바스크립트 자바스크립트는 ES6에 들어서면서 발전하고 현대적인 언어로 업그레이드되었다. 그럼으로써 배워야 할 문법도 많아졌고 새로운 개념도 많이 도입되면서 기존 ES5나 Jquery에 익숙한 사용자들에겐 당황스러운 부분이 많을 것이다. 그중 나도 해당하는데 다행히 강의에서 ES6문법을 자세히 다뤄주어서 정리해보려고 한다. 구조분해할당 객체, 배열의 속성을 분해해서 새로운 변수에 옴겨담거나 사용가능하게 만듦 //1. 배열의 경우 // value1,2에 배열 index 순서대로 할당한다. const [value1, value2] = [1, "홍길동"]; // value1 = 1, value2 = "홍길동" const myArray = [1, "홍길동", 3]; const [a, b, c]..

TIL(Today I Learned)를 왜 쓰게 되었을까??? 10월 4일부터 스파르타 코딩클럽에서 진행하는 내일 배움 캠프에 백엔드(Node) 과정으로 참여하게 되었다. 시작하자마자 미니프로젝트를 진행하게 되어 정신없이 1주일이 지나갔고 발표 까지 끝마쳤다. 이제 고작 1주일 진행했는데 벌써 한 달은 지난듯한 느낌이었고 오늘부터 본격적으로 주특기 수업인 자바스크립트 공부가 시작되었다. 오늘 하루종일 정신없이 강의를 시청했고 새로운 것도 배웠는데 휘발성으로 날아가버릴 거 같아서 두려웠고 내일 배움 캠프에서도 TIL을 강조하여서 TIL에 대하여 찾아보았다. 그날그날 공부한 내용을 기록하는 것이라고 한다. 이것만으론 감이 잡히지 않아서 다른 블로그들도 찾아보았는데 다들 멋있는 레이아웃으로 가독성 좋게 꾸며놓..