슉슉슉 읽고 넘어가는 중... 22장. MongoDB 서버 개발 시 DB를 이용하면 웹 서비스에서 사용되는 데이터를 저장하고, 효율적으로 조회하거나 수정할 수 있다. 기존에는 대부분 MySPL, OracleDB, PostgreSQL 같은 관계형 데이터베이스를 사용했다. 하지만 요 녀석들의 단점은... 1. 데이터 스키마가 고정적 - DB에 들어갈 데이터 형식이 고정적이라 새로운 형식의 데이터가 추가되면 기존 데이터를 몽땅 수정해야 한다. 2. 확장성 - 저장, 처리할 데이터양이 늘어나면 여러 컴퓨터에 분산시키는 것이 아닌, DB 서버의 성능을 업그레이드하는 방식. MongoDB는 이런 한계를 극복한 문서 지향적 NoSQL DB! 즉 데이터의 구조가 자주 바뀐다면 문서 지향적 DB가, 까다로운 조건으로 데..

내게는 Django 뿐일 줄 알았는데... 21장. 백엔드 프로그래밍 : Node.js 웹 애플리케이션을 만들 때, React와 같은 프론트엔드 기술만으로 필요한 기능을 모두 구현할 순 없다. 왜? 데이터를 여러 사람과 공유하려면... 저장할 공간이 필요하니까! 이를 위해 우리는 서버를 만들어 데이터를 저장해 여러 사람과 공유한다. 그러나 서버에 데이터를 무작정 담는 것은 아니다! → 이러한 규칙을 지정하는 것이 백엔드(서버) 프로그래밍이라 생각하면 좋을 듯! 21-1) Node.js 알아보기 Node.js는? 웹 브라우저뿐만 아니라 서버에서도 JS를 사용할 수 있는 런타임! Node.js 환경에서 웹 서버를 구축할 때는 보통 Express, Hapi, Koa 등의 웹 프레임워크를 사용한다. 여기서는 K..

얼른 React로 돌아가고 싶다. 19장. 코드 스플리팅 리액트를 완성해서 배포할 때는 빌드 작업을 거쳐야 한다. 빌드 작업을 통해 JS 속 불필요한 요소들을 제거해 파일 크기를 최소화하거나, 브라우저에서 JSX 등 최근 JS 문법이 원활하게 실행되도록 코드 트랜스 파일 작업도 가능! 그리고 이러한 작업은 웹팩(webpack)이란 도구가 담당한다. (웹팩에서 별도 설정을 하지 않을 시? 프로젝트 속 모든 JS, CSS 파일이 하나로 합쳐지고 만다) Create React-App의 기본 웹팩 설정에는 SplitChunks란 기능이 적용되어, node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간 공유된 파일을 자동으로 따로 분리시켜준다! 즉 우리가 SPA를 개발할 때... 아무런 ..

월요일이라 피곤한 건지. 17장. 리덕스를 사용해 리액트 애플리케이션 상태 관리하기 React에서 Redux를 사용하면, 상태 업데이트에 관한 로직은 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다. 또한 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수도 있다. React에서는 store 내장함수(dispatch, subscribe 등)를 사용하기보다 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용한다! 설치는 이렇게! medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%..

이제 50% 다 와간다... 와우! 16장. 리덕스 라이브러리 이해하기 앞서 얼핏 들었던 리덕스! React 상태 관리에서 가장 많이 사용되는 녀석이다. 16-1) 개념 정의하기 난생처음 접하는 여러 키워드들이 등장한다..! 1. 액션 상태에 어떤 변화가 필요하면 액션(action)이란 것이 발생한다. 얘는 하나의 객체 형태며 { type: 'TOGGLE_VALUE' } 요런 형식으로 이뤄져 있다. 액션 객체는 type 필드를 반드시 가지고 있어야 하며(얘를 액션의 이름이라 생각하면 된다), 그 이외에는 이후 상태 업데이트를 할 때 참고해야 할 값들이 들어간다. (작성자 임의로 넣으면 됨!) { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } { type: ..

목요일은 역시 목요일이군. 15장. Context API Context API는 React 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능! (ex 로그인 정보, 애플리케이션 환경 설정, 테마 등) 여태 사용했던 stlyed-components, 리액트 라우터 등의 라이브러리도 Context API를 기반으로 구현되어 있다. 15-1) Context API를 사용한 전역 상태 관리 흐름 이해하기 그런데 전역 상태를 관리한다는 게 무슨 뜻? 지금껏 우리는 프로젝트 내에서 환경 설정, 사용자 정보와 같이 전역적으로 필요한 상태를 관리할 때 → 주로 최상위 컴포넌트인 App의 state에 넣어 관리했다! 왼쪽 그림에 해당하는 건데... App이 지닌 value를 F나 J에 전달하려면 여러 컴포넌트..

눈 깜짝하니 목요일이다. 14장. 외부 API를 연동하여 뉴스 뷰어 만들기 지금까지 배운 것을 바탕으로 뉴스 뷰어 프로젝트를 진행해 볼 예정! 전체 흐름은... 1. 비동기 작업의 이해 2. axios로 API 호출해서 데이터 받아오기 3. newsapi API 키 발급받기 4. 뉴스 뷰어 UI 만들기 5. 데이터 연동하기 6. 카테고리 기능 구현하기 7. 리액트 라우터 적용하기 출발! 14-1) 비동기 작업의 이해 동기적 처리 : 요청이 끝날 때까지 기다리는 동안 중지 상태 → 그동안 다른 작업 불가 비동기적 처리 : 웹 애플리케이션 멈추지 않음 → 동시에 여러 요청 처리 가능! 그런데 이미 비동기 작업을 사용해본 적이 있다! JS의 setTimeout 함수가 그 예. setTimeout이 사용되는 시..

5시쯤 되니 정신이 혼미해진다... 흠냐. 13장. 리액트 라우터로 SPA 개발하기 13-1) SPA란? React의 핵심! 꽃! 스파! SPA는 Single Page Application의 약자로, 한 개의 페이지로 이뤄진 애플리케이션이란 의미. React와 같은 라이브러리 or 프레임워크를 통해 우선 애플리케이션을 브라우저에 불러와 실행시킨 후, 사용자와의 상호작용이 발생하면 필요한 부분만 JS를 이용해 업데이트 해주는 방식! 그런데 한 개의 페이지라면... 이용자에게 보이는 화면도 하나뿐인 것 아닌가? → No! 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 JS와, 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. 이렇게 다른 주소에 다른 화면을..