배꼽파지 않도록 잘 개발해요

◆ 데이터베이스 준비하기 ◆ 정규화(Normalization) ◆ 뷰(View)◆ 데이터베이스 준비하기데이터베이스관계형 데이터베이스 (RDB)비관계형 데이터베이스 (NoSQL) MySQL, MariaDB, postgreSQLJSON각 테이블 간 관계 O각 테이블 간 관계 X스키마 O스키마 X구조적으로 안정적이나 유연하지 못함유연성을 가지고 있으나 구조 결정이 어려움상황과 조건에 맞춰 적절한 데이터베이스를 선택하는 것이 중요함. 데이터모델링데이터모델링 효율적으로 데이터베이스를 구축하기 위해 데이터베이스의 뼈대를 세우는 작업요구 사항 정리 : 데이터가 어떠한 형태, 어떤 목적을 가지고 있는지 정리개념적 데이터 모델 설계 : 핵심 개체를 찾고, 각 개체 간의 관계를 정리논리적 데이터 모델 설계 : 실제 데..

◆  SQL 시작하기 ◆  데이터를 제어하는 DML ◆  SQL과 함수 ◆  다수의 테이블 제어하기 ◆  서브쿼리 ◆ SQL 시작하기SQL이란? 데이터베이스여러 사람이 공유해 사용할 목적으로 통합하여 관리되는 데이터의 모음Maria DB, Amazon Redshift, Oracle DB 등 많은 종류가 존재 데이터베이스의 종류에 따라 사용 방법이 조금씩 다르지만, 데이터베이스에서 검색과 분석에 사용되는 기본 사용 방법은 데이터베이스 종류와 상관없이 동일함. SQLStructured Query Language의 약자데이터베이스에 접근하고 조작하기 위한 표준 언어데이터 검색, 삽입, 수정, 삭제, 데이터베이스 생성, 테이블 생성, 이외 많은 것들 ...테이블에서 데이터 검색하기가장 많이 사용되는 종류관계형 ..

◆ MongoDB 개요 ◆ CRUD ◆ 쿼리 연산자 ◆ 고급 활용 기능 ◆ MongoDB 개요 MongoDB 명령어 DB 접속 use myDatabase 정보 저장 db.initialCollection.insertOne({hello: "world"}) 정보 확인 db.initialCollection.find() NoSQL NoSQL의 특징 · 질의 명령어가 SQL이 아니다 · 정보의 형식을 미리 정하지 않는다 NoSQL DBMS · NoSQL (Not Only SQL) : - 전통적인 관계형 데이터베이스보다 덜 제한적인 일관성 모델을 제공하는 DB - 기존 RDBMS가 일관성 모델 때문에 가질 수 없었던 확장성, 유연성, 고성능, 고기능성을 확보함. · DBMS (Database Management Sy..

◆ 배열 렌더링하기 ◆ 데이터 가져오기 ◆ 입력 폼 다루기 배열 렌더링하기 mock 데이터 추가하기 ReviewList.js function ReviewList({ items }) { console.log(items); return ; } export default ReviewList; components/App.js import ReviewList from "./ReviewList"; import items from '../mock.json'; function App() { return } export default App; index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './comp..

◆ React Styling 방법론 소개 ◆ JavaScript template literal ◆ styled component 기본기 React Styling 방법론 소개 CSS module : CSS module CSS in JS library : CSS in JS library UI framework : UI framework CSS framework : w3.css CSS Module class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없음. 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능 스타일링을 직접 하나하나 해야 함. 하나의 스타일 sheet가 여러 컴포넌트에 영향을 미침. App.jsx import styles from "./app..

Server Side Rendering ◆ Server Side Rendering ◆ 성능 측정 키 메트릭 ◆ Server Side Rendering 이해 ◆ React를 활용한 Server Side Rendering ◆ SSR 구현하기 (실습) React 앱 빌드와 배포 ◆ React 앱 배포 ◆ 배포를 위한 React 앱 준비 ◆ Azure를 사용한 VM 배포 ◆ React 앱 배포를 위한 Azure VM 세팅 ◆ 앱 배포하기 (실습) Server Side Rendering Server Rendering Server Side Rendering (SSR) React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드. 클라이언트는 별도의 처..

◆ React 테스팅 ◆ jest ◆ jest 활용 ◆ react-testing-library ◆ 쿼리의 우선순위 ◆ 유저 이벤트 React 테스팅 코드 테스트가 필요한 경우 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 함. 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 함. 코드를 리팩토링하면, 원래대로 동작하는지 테스트함. 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아짐. 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있음. 테스팅 코드 작성의 이점 언급한 상황들에 대한 테스팅 코드를 작성하여, 미연의 에러를 방지. TDD(Test Driven Developtment) 등의 방법론을 적용하여 생산성을 향상..

◆ Redux 소개 ◆ Redux 구조 ◆ redux-toolkit 활용 ◆ Redux를 React에 연결하기 ◆ Redux를 이용한 비동기 처리 Redux 소개 앱 전체 상태를 쉽게 관리하기 위한 라이브러리 Redux의 많은 개념들이 Flux pattern에서 차용됨. 주로 React 앱과 같이 사용함. redux.js.org에서 수많은 문서를 참고할 수 있고, 웹상에 Redux를 활용한 앱 구축 사례가 많음. 언제 Rudux를 써야 하는가 앱 전체의 상태 관리가 필요할 때 복잡한 비동기 처리가 있는 상태 관리가 필요할 때 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을 때 logger, devtool 등을 활용하여 상태를 관리할 필요가..