승터디

자바스크립트에서 객체의 프로퍼티를 크게 두 종류로 볼 수 있다. 데이터 프로퍼티 - 키와 값이 있는 실질적인 데이터 액세스 프로퍼티 - 자체적으로 값을 가지고 있지는 않으나 호출 시 값을 불러오거나 설정할 수 있다. const person = { name: "홍길동" ,year: 2000 get age() { return new Date().getFullYear() - year; } set age(age) { this.year = new Date().getFullYear() - age; } } 여기서 데이터 프로퍼티는 name, year를 이야기하고 액세스 프로퍼티는 getter, setter를 의미한다. 우리가 변수처럼 사용하는 프로퍼티는 내부적으로 또 다른 속성들이 존재한다. 마치 프로퍼티도 객체처럼..

모듈 특정기능을 가지고 있는 자바스크립트 파일이다. 다른 프로그램에서 재사용 가능하다. 부품처럼 활용가능 export = 해당 모듈 내보내기 import, require = 외부모듈 참조 require는 CommonJs 모듈 시스템을 관리할 때 사용 import는 es6 모듈 시스템을 관리할때 사용 // module로 함수자체로 내보내기 const add = (a, b) => { return a + b; }; module.exports = add; // 사용법 const add = require("./math.js"); console.log(add(10, 30)); // 객체로 내보내기 exports.add = (a, b) => { return a + b; }; // 사용법 구조분해할당 으로 받기 con..

비동기 프로그래밍에서 동기적 표현이 왜 필요한가 현대 애플리케이션에서는 비동기 프로그래밍은 선택이 아닌 필수가 되었다. 여기서 동기와 비동기에 대하여 아주 간단하게 언급하자면 다음과 같다. 동기 => 앞선 동작이 끝나야 다음 동작을 수행할수 있다. 비동기 => 앞선 동작이 끝나지 않아도 다음 동작을 수행한다. 동기적 동작을 살펴보면 1번동작이 끝나야 2번 동작을 수행하고 그다음 3번, 4번으로 동작하게 된다. 1번 동작이 얼마나 걸리던 뒤에 동작은 1번 동작이 종료할 때까지 작동하지 않는다. 비동기 동작은 모든 동작을 받아서 한꺼번에 처리한다. 그러나 일의 종료순서를 보장하지는 않는다. 그러면 우리가 앞으로 배울 Promise나 async await같은걸 왜 사용을 할까?? 바로 "비동기 동작의 동기적 ..

오늘은 팀 프로젝트가 얼추 마무리가 되어서 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를 넣어서 고유..

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

자바스크립트를 더욱 강력하게 만들어줄 타입스크립트 자바스크립트에서는 변수를 선얼할때 타입을 지정하지 않고 실행시점에 타입이 결정되는 언어이다. 이러한 특징 때문에 편한 부분도 있지만 예기치 못한 결과를 초례하기도 한다. 이러한 문제는 프로젝트가 커지면 커질수록 더욱 심각해졌다. 이러한 배경 때문에 타입스크립트가 등장했고 최근엔 많은 자바스크립트로 된 프레임워크에선 타입스크립트를 권장한다. 개인 과제도 제출했고 강의도 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 제어하기 그리고..