분류 전체보기 (13) 썸네일형 리스트형 Slack 클론 코딩 02 [React, Typescript] For Hot Reloading React나 Vue를 사용해서 개발할 때, 새로고침 필요없이 코드를 수정하면 알아서 reload 되게 하는 것을 hot reloading 이라고 합니다. Hot Reloading을 위해서 Webpack 데브서버를 설치해줍니다. npm i webpack-dev-server -D npm i webpack-cli npm i -D @types/webpack-dev-server npm i @pmmmwh/react-refresh-webpack-plugin npm i react-refresh npm i fork-ts-checker-webpack-plugin -D // 버전 에러나서 버전 수정 npm i @types/webpack-dev-server@3.11.1 -D 스위치 안에있는 여.. Slack 클론 코딩 01 [React, Typescript] React와 Typescript를 이용하여 슬랙 클론 코딩을 할 예정입니다. 아래와 같은 목표가 있습니다. - React(+typescript) 웹 개발 - CRA 없이 초기 세팅 - SWR 사용 - Emotion(스타일드 컴포넌트) - Socket.io 실시간 채팅 (+GraphQL) 오늘은 프로젝트 초기 설정을 하였습니다. // 프로젝트 시작 npm init // react install npm i react react-dom // typescript install npm i typescript // typescript와 react 연동 npm i @types/react @types/react-dom // 편한 코딩을 위해 eslint, prettier 설치 및 연동 npm i -D eslint np.. 물리 데이터 저장소 설계 물리 데이터 모델 설계 (1) 물리 데이터 모델링 개념 물리 데이터 모델링 : 논리모델을 적용하고자 하는 기술에 맞도록 상세화해가는 과정 (2) 물리 데이터 모델링 변환 절차 개체를 테이블로 변환 테이블명과 개체명을 동일하게 하는 것을 권고 속성을 컬럼으로 변환 표준화된 약어 사용 권고 SQL 예약어 사용 피해야 함 UID를 기본키로 변환 Not null, Unique 등 제약조건을 추가로 정의 관계에 의한 외래키가 기본키에 포함될 수 있음 관계를 외래키로 변환 외래키명은 기본키 이름을 그대로 사용하나 다른 의미를 가질 경우 변경가능 순환 관계에서 자신의 기본키는 외래키로 정의 컬럼 유형과 길이 정의 적절한 유형을 정의하고, 데이터의 최대 길이를 파악하여 길이를 설정 반 정규화 수행 시스템 성능 향상과 .. 논리 데이터 저장소 확인 데이터 모델 (1) 데이터 모델(Data Model)개념 - 데이터 모델은 현실 세계의 정보를 인간과 컴퓨터가 이해할 수 있도록 추상화하여 표현한 모델 - 데이터 모델에 표시해야 할 요소 : 논리적 데이터 구조, 연산, 제약조건 - 데이터 모델 절차 : 개념적 데이터 모델 -> 논리적 데이터 모델 -> 물리적 데이터 모델 (2) 데이터 모델 절차 개념적 데이터 모델 현실 세계에 대한 인식을 '추상적, 개념적으로 표현하여 개념적 구조를 도출'하는 데이터 모델 트랜잭션 모델링, View 통합방법 및 Attribute 합성 고려모델 - 트랜잭션모델링 : 트랜잭션을 개념적 시스템 독립적으로 정의, 트랜잭션의 입출력 기능, 형태만 정의 개념적 데이터 모델은 DB 종류와 관계 없음 주요 산출물로는 개체관계 다이어그.. Asynchronous Programming(비동기프로그래밍) Asynchronous Programming 동기 프로그래밍은 여러개의 작업이 있을 때 한 작업이 끝나기까지 기다렸다가 끝나면 다른 작업을 진행하는 방식이다. 비동기 프로그래밍은 한 작업이 완료되기 전에 다른 작업을 진행하는 방식이다. Web API ❤️ Asynchronous Callback : 아주 오래된 비동기 방식 Promise 비동기식 작업의 처리를 위한 객체 다음은 기본적인 promise를 사용한 예제이다. console.log('hello world!') setTimeout(() => { console.log('1초 뒤 실행') }, 1000) console.log('Bye world!') // Promise const promise = new Promise((resolve, reject) .. 이전 1 2 다음
