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

◆ 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..

◆ 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 등을 활용하여 상태를 관리할 필요가..

◆ 상태 관리 ◆ 상태 관리 기술이 해결하는 문제들 ◆ Flux Pattern ◆ useState, useRef, useContext, useReducer ◆ useState를 활용한 상태관리 ◆ useContext를 활용한 상태관리 상태 관리 상태 관리 상태 관리 기술이란 앱 상에서의 데이터를 메모리(localStorage, JS memory) 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함함. MPA와 SPA에서의 상태 관리 MPA에서는 서버의 데이터를 이용해 페이지를 렌더링하므로, 클라리언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않음. SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가..

◆ 자바스크립트 비동기 ◆ Promise ◆ async/await ◆ POSTMAN, Open API, CORS 자바스크립트 비동기 자바스크립트 비동기의 등장 초기 웹 환경에서는, 서버에서 모든 데이터를 로드하여 페이지를 빌드했으므로 자바스크립트에는 별도의 비동기 처리가 필요하지 않았음. Ajax(Asynchronous JavaScript and XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨. XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨. 자바스크립트와 비동기 자바스크립트는 single-threaded language이므로, 만일 서버 요청을 기다려야 한다면 유저는 멈춰있는 브라우저를 보게 될 것 → 동..

◆ SPA와 라우팅 ◆ react-router 소개 ◆ react-router 컴포넌트 ◆ react-router로 페이지 구성하기 ◆ react-router 응용 SPA와 라우팅 Single Page Application SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낌. Multi Page Application MPA(Multi Page Application)은 서버에 미리 여러 페이지를 두고, 유저가 네비게이션 시 요청에 적합한 페이지를 전달함. 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송됨. 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리함. 페이지 요청마다 모든..

◆ React 스타일링 Overview ◆ React 앱에서의 스타일링 방법 ◆ CSS, Sass ◆ CSS Flexbox ◆ styled-components React 스타일링 Overview 좋은 앱을 만들려면? 번들 사이즈에 대한 고려 : CSS 코드가 차지하는 사이즈는 매우 중요한 요소 앱 성능에 대한 고려 : animation, transition 등 유저와의 상호작용에서 스타일 코드의 성능이 중요 요소 사용자에게 유리한 UI/UX를 고려 : 스타일링에 대한 지식으로, 고급 테크닉을 적용하여 더 나은 UI/UX를 반영 자바스크립트를 이용한 다양한 스타일 기법 : UI 토글링, 애니메이션, 다크모드, 복잡한 UI 컴포넌트 등은 자바스크립트에 대한 지식만으로 구현하기 힘듦. 유지보수가 용이하고 확장..

◆ Hooks ◆ 종합 실습 / 유용한 팁들 Hooks Hook이란? 컴포넌트에서 데이터를 관리(State)하고, 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. useState가 바로 State Hook이다. 기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트(Class Component)를 사용하여야 했다. 그러나 개발자가 느끼기에 다소 복잡한 클래스 컴포넌트(Class Component)를 보완하고 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8 버전에 추가된 것이 바로 Hook이다. 유의사항 Hook은 React 함수 (컴포넌트, Hook) 내에서만 사용이 가능하다. Hook의 이름은 반드시 'use'로 시작해야 한..