Back Ground

React Project 생성 - 타입스크립트를 사용할 리액트 프레적트를 만들때 $ npx create-react-app [프로젝트 명] --typescript --typescript 가 있으면 타입스크립트 설정이 적용된 프로젝트가 생성된다. - 만약, 이미 만든 프로젝트에 타입스크립트를 적용하기 싶다면 타입 정의 파일을 다운받는다. $ npm install --save @types/react @types/react-dom 타입스크립트 코드를 작성하기 위해 typescript 패키지도 설치한다. $ npm install --save-dev typescript 다운로드한 typescript명령어를 이용하면 타입스크립트 설정 파일을 생성 할 수 있다. $ npx typescript --init 초기화를 의미..

Promise가 무엇인가? 프로미스는 자바스크립트 비동기처리에 사용되는 객체. 여기서 자바스크립트의 비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트 특성'을 위미한다. Promise 코드 - 기초 그럼 프로미스가 어떻게 동작하는지 이해하기 위해 예제 코드를 살펴본다. [간단한 ajax 통신코드 - Callback을 사용한 경우] function getData(callbackFunc) { $.get('url 주소/products/1', function (response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function (tabl..

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각한다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity속성을 이용한 경우라면 노출되진 않지만 해당영역의 이벤트에 응답하기 된다. 이를 강제로 제어하기 위해서는 pointer-events를 활용해야 한다. 숨김처리 속성에 따른 특성 요소를 숨길때 사용되는 CSS속성 숨김 속성과 값 공간 점유 이벤트 탭(Tab)접근 opacity: 0 점유 활성 가능 visibility: hidden 점유 비활성 불가능 visibility: collapse 테이블안에서만 비 점유 비활성 불가능 display: none 비점유 비활성 불가능 이벤트가 비활성되는 속성들을 사용하면 좋겠지만, 트랜지션(전환)이나 애니메이션 같이 프레임별..

노드JS란 NodeJS는 크롬 V8자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다. Node.js는 이벤트기반, 논블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js는 패키지 생태계인 npm은 세계에서 가장 큰 오픈소스 생태계이기도 합니다. 1) 서버 노트를 통해 다양한 애플리케이션을 실행 할 수 있지만, 노드는 서버 애플리케이션을 실행하는데 가장 많이 사용됩니다. 2)자바스크립트 런타임 NodeJS는 C언어와 C++로 만들어졌다. 런타임은 특정 언어로 만든 프로그램을 실행 할 수 있는 환경을 뜻한다. 따라서 노드는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 해준다. 기존에는 자바스크립트 프로그램은 인터넷 브라우저 위에서만 실행할 수 있었지만, 브라우저외의 환경에서 자바스크립트를..

Vue 라이프 사이클 인스턴스의 상태에 따라 호출 할 수 있는 속성들을 Life Cycle(생명주기)라 한다. 라이프사이클에 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(Life Cycle Hook)이라고 한다. 뷰 인스턴스도 객체이기 때문에 생명주기를 가지는데 속성의 종류는 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 이렇게 8종으로 나뉜다. 1. Creation [컴포넌트 초기화 단계] Creation 단계에서 실행되는 훅(hook)들이 라이프 사이클 중에 가장 처음 실행된다. 이 단계는 컴포넌트가 돔에 추가되기 전인데 서버 렌더링에서도 지원하는 훅이다. beforeCreate -인스턴스가..

S3 (Amazon Simple Storage Service)는 인터넷 상에 있는 스토리지이다. Amazon S3를 사용하면 웹 통해 언제 어디서든 원하는 양의 데이터를 저장하고 검색할 수 있다. 간편하고 직관적인 웹 인터페이스인 AWS Management콘솔을 사용하여 이러한 작업을 수행할 수 있다. S3 문서

Nest는 Node.js 프레임워크인데 Angular에서 많은 영감을 받았다고 한다. 장점 Nest는 Express를 사용하지만 Fastify와 같은 다양한 라이브러리와 호환성을 제공하므로 사용 가능한 외부 플러그인을 쉽게 사용 할 수 있다. 제공 TypeScript(바닐라 JavaScript와의 호환성 유지 ) 객체지향 프로그램 [ OPP (Object Oriented Programming) ] 기능적 프로그램 [ FP (Functional Programming) ] FRP (Functional Reactive Programming) Fastify는 속도와 오버헤드를 가능한 줄이는데 초점을 둔 Node.js 웹 프레임워크이다. Connect/Express와 Restify와의 호환 가능한 미들웨어를 지원..

Vue에서 데이터와 UI를 건드려야 하는 상황에 DOM을 못 찾는 상황이 생긴다. 데이터를 통해 만들어진 DOM이 완성되기 전 호출을 하려고 하는 상황인데 어떤 데이터를 vue._data에 삽입하자마자 삽입 후 갱신 될 DOM을 찾아 처리하려고 하면 DOM을 찾지 못한다는 에러 문구만 나올 뿐이다. 모든 데이터처리가 비동기로 처리되는 Javascript의 특성 때문에 DOM이 갱신되기 전 탐색하는 상황이 나오게된다. 오류 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 new Vue({ el: '#app', data: function() { return { list: [] }; }, created:..