개발일지

Angular( 구글 ) Angular는 프레임워크이기 때문에 이미 앱을 만들기 시작할 모든 개발 도구들을 가지고 있습니다. RxJS의 가장 큰 장점은 이벤트를 독립적으로 동시에 처리 할 수 있다 Angular를 완전히 활용하려면 Rxjs를 배워야한다는 것 프레임 워크는 병렬적으로 컴포넌트를 실행하도록 분리시켜 재설정 하지 않아도 의존관계의 컴포넌트를 대체할 수 있습니다. Ivy renderer: Ivy는 차세대 Angular 렌더링 엔진으로 성능을 크게 향상시킵니다 Angular Universal는 서버 사이드 렌더링 기술입니다. 이것을 사용해 App의 첫페이지를 빠르게 렌더링할 수 있고 , 모바일 디바이스처럼 브라우저 렌더링 리소스가 부족한 디바이스에서 화면을 나타낼 수 있습니다. Aptana, We..

자바스크립트(JavaScript)의 단점을 보완하기 위해 만들어졌다. 모든 브라우저, 호스트, 운영체제에서 동작한다. 자바스크립트는 동적 타입 언어(dynamic type language)이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않는다. 타입스크립트는 정적 타입 언어(static type language)이기 때문에 컴파일 시 시간이 조금 걸리더라도 안정성을 보장한다는 점이 장점이다. 타입스크립트는 타입을 선언한다. 이것은 자바스크립트에서 모호하게 사용되던 타입을 제어할 수 있게 되어 훨씬 더 간편하게 에러를 잡을 수 있게 한다 타입이란, 한글로 자료형입니다. int형, short형, float형, bool형, 객체 등이 있습니다. 타임스크립트는 ES7이하의 표준을 포함한다. 그렇기에 ..

클래스형 : state, lifeCycle 관련 기능사용 가능하다. 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다. 임의 메서드를 정의할 수 있다. 함수형 : state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨] 메모리 자원을 함수형 컴포넌트보다 덜 사용한다. 컴포넌트 선언이 편하다. state 사용차이 클래스 형 constructor 안에서 this.state 초기 값 설정 가능 constructor 없이 바로 state 초기값을 설정할 수 있다. 클래스형 컴포넌트의 state는 객체 형식 this.setState 함수로 state의 값을 변경할 수 있다. 함수 형 함수형 컴포넌트에서는 useState 함수로 state를 사용한다. useState 함수를 호출하면 배열이..

LifeCycle Method = "생명주기 메서드" 라고 부릅니다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다. 생명주기 메서드는 클래스형 컴포넌트에서만 사용, 우리가 기존에 배웠었던 useEffect 랑 은근히 비슷하다고 생각하시면 됩니다. 마운트 먼저 마운트될 때 발생하는 생명주기들을 알아봅시다. constructor getDerivedStateFromProps render componentDidMount constructor constructor 는 컴포넌트의 생성자 메서드입니다. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드입니다. getDerivedStateFr..

사용자가 다음 페이지, 또는 다음 정보를 불러올려고 요청을할떄 한번만 불러와줄수 있도록 컨디션을 줘야 한다. 예를 들어) 액션을 일으키면 로딩이라는 상태값을 True로 주고, 로딩인 상태라면 액션을 취할수가 없다. 정보가 불러와 진다면, 로딩이라는 상태를 False 로 바꾸고, 액션을 다시 요청할수 있개 만들어주면 좋을거 같다. 서버쪽에서는 너무 한번에 큰 용량을 주면 클라이언트쪽에서 로딩시간이 길어짐으로, 적절한 용량을 정해야 된다고 생각한다. 왜냐하면, 로딩시간이 2초 이상이 된다면 사용자가 흥미를 잃는다라고 결과가 나왔기 떄문. 그리고 무한스크롤이기 떄문에, 모든 불러온 데이터들은 위에 싸이기 떄문에, 만약 데이터가 많이 불러져 있고, 다시 맨위 정보를 보고 싶을떄가 있으니 모바일 환경일때는 버튼이..

에러 핸들링 Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다 코드 가독성 Promise의 .then() 지옥의 가능성 코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다. async/await 은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해 하기 쉽다. Promise 사용 예시 const condition = true; const promise = new Promise((resolve, reject) => { if (condition) { resolve('resolved'); } else { reject('reject..

변수 순서: 변수 선언 >> 초기화 (null // undefined) >> 할당 var 은 재할당과 스코프가 함수 레벨 스코프. 중복 선언이 가능하다 const 는 재할당이 불가능하지만, let 은 재할당이 가능하다. 또한 const 와 let 의 스코프는 블락 레벨 스코프 결론: 변수는 const 로 만들자. 만약 재할당할 변수이면 let 으로 만들자.

useEffect 란? component가 마운트 / 언마운트 / 업데이트될 때, 할 작업을 선택하도록 하는 Hook함수 (외부 API를 요청하거나, 반복작업 / 작업예약 등에 쓰임) 기존의 class형에서는 세 가지의 각 상태들을 따로 관리해야 하는 불편함이 있었는데, useEffect를 사용하면 한 번에 관리할 수 있어 편리하다! 세 가지의 상태들을 기존의 메서드와 매칭하여 좀 더 알아보자면, mount : component가 처음 화면에서 보여질 때 (새로고침 시) (componentDidMount 메서드) unmount : component가 화면에서 사라질 때 (componentWillUnmount 메서드) update : 특정 props가 바뀌어 component가 업데이트될 때 (compon..

useRef 란? 특정 DOM을 가리킬 때 사용하는 Hook 함수. Ex. 포커스 설정, 특정 엘리먼트의 크기/색상 변경 등.. ref : ref는 JS의 getElementById()처럼, component의 어떤 부분을 선택할 수 있게 해주는 방법이다. 리액트에 있는 모든 component는 reference element를 가지고 있어서, 어떤 component에 ref={변수명} 을 넣어주면, 해당 component를 참조하게 된다. useRef 사용하기 3초 뒤에 input창에 포커싱이 되도록 설정해보자. import React, { useRef } from "react"; const App = () => { // 1. Ref객체 만들기 const here = useRef(); 2. focus(..

돔(DOM)이란? DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. 가상 돔(Virtual DOM) 이란? Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용 1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함 2. 이전 Virtual DOM에 있던 내용과 현..