렌더링(Renderinng) 이란? - 서버로부터 받은 내용을 브라우저 화면에 표시하는 것 SSR vs CSR SSR : Server Side Rendering 장점 - 전통적인 방식 - 검색엔진최적화(Search Engine Optimization, SEO) 가능 -> React에서 SSR사용하기 위해 Next.js 사용 Q. 검색엔진최적화란? 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업 단점 - 로딩속도가 많이 걸림 - React에서 서버사이드 렌더링 구현 할 경우 Router과 Redux 함께 사용 --> 복잡해짐 CSR : Client Side Rendering - Client에서 렌더링 하는 방식 - Reac..
[Node.js] 동기와 비동기 , 그리고 블로킹과 논 블로킹
1. 동기(Synchronous) vs 비동기(Asynchronous) Q. 동기와 비동기적으로 일을 처리? 빨래, 설거지, 청소를 해야한다. 일처리에 대해서 비유를 해보자 동기 -> 빨래를 한 뒤(1시간), 설거지 한 뒤(1시간), 청소를 해서 일을 끝내는 것(1시간) -> 약 3시간 비동기 -> 빨래 업체한테 맡기고 (1분), 설거지 업체에 맡기고(1분), 청소하는 업체 맡기고(1분) -> 약 3분 - 순서가 중요하지 않다면 비동기적으로 업무를 실행하는 것이 맞다. 동기와 비동기의 차이점은? 함수가 바로 return 되는지 여부 2. 블로킹(Blocking) vs 논 블로킹 (Non Blocking) 블로킹과 논 블로킹? 백그라운드 작업 완료 여부에 나뉘어짐 노드에서는 동기-블로킹방식과 비동기-논블로..
[DATABASE/MySQL] MySQL Install
1. 설치 - 윈도우 기반으로 설치 - https://dev.mysql.com/downloads/installer/dev.mysql.com/downloads/file/?id=501137 - default로 설치 - 계속 설치 - 비밀번호도 설치 2. Console 폴더 C:\Program Files\MySQL\MySQL Server 8.0\bin cmd 창으로 이동 $ mysql -h localhost -u root -p $ 비밀번호 입력 mysql> mysql>exit
[React] React Redux Middleware 미들웨어
Redux (복습) Redux 특징 1) Middleware 개념 존재 - Redux로 상태 관리를 할 때에는 useReducer를 사용해볼때 접했던 개념인 리듀서 함수 사용 - Middleware 비 동기 작업 처리할때 많이 사용 2) Redux의 Connet 함수 사용시 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props로 받아올 수 있음 - connect 함수 사용 및 useSelector, useDispatch, useStore 사용하여 상태 조회하거나 액션 디스패치 가능 3) 하나의 커다란 상태로 관리가 가능 Redux 사용시? 1) 프로젝트 규모가 크고, 비동기작업시? 리덕스 Redux -> 불변성 유지 필요 왜? 객체의 변화를 감지할때 겉핡기 식으로 비교하여 좋은 성능을 유지하는것이 ..
[React] 라우팅 부분 React-Router
Router이란? - 뷰 렌더링과 관련 - 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여줌 - Router? 다른 주소에 따라 다른 뷰를 보여주는것 - 리액트에는 Router 기능이 포함되지 않기 때문에 직접 브라우저의 API를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 함 React-Router이란? - 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해줌 - 서버 사이드 렌더링도 도와주는 도구들이 함께 딸려옴 - 공식적으로 지원하는 라이브러리는 아님 npm install react-router-dom --save npm create-react-app routing npm install react-router-dom..
[React] React 문법과 변수선언 , ESLint, Prettier
기본 헷갈리는 것 - (1)과 (2)는 똑같은 결과를 나타냄 (1) 함수형 ~ function App() { return ( CRUD APPLICATION ); } export default App; (2) 함수형 const const App =() => { return( CRUD APPLICATION ) } export default App; const & let const? - ES6 문법에서 새로 도입되었으며 한번 지정하고 나면 변경이 불가능한 상수를 선언할 떄 사용하는 키워드 import React, {Fragment} from 'react'; const App = () => { const name = "React Example"; return( Hello React {name} ) }; expo..
[React] 상태관리 Redux
Redux - React 생태계에서 가장 사용률이 높은 상태관리 라이브러리(다른 상태관리 Redux, MobX) - React만 사용해도 애플리케이션을 개발할 수 있지만 규모가 커지고 구조가 조금이라도 복잡해지면 컴포넌트의 props나 State를 관리하는게 어려움 -> 그래서 상태 관리 라이브러리 redux를 사용하여 상태를 단순하게 처리함 - Store안에 State가 저장함, store에는 reducer가 반드시 있어야 함 - Reducer(Handle Action, change state = 변화를 일으키는 함수 ) 는 state와 action을 받아 적절한 로직을 처리하여 새로운 state를 반환하고 그 값을 반영하여 새롭게 render를 그리도록함 Redux Data Flow - 엄격한 uni..
[React] React 기본(2) - React 기본구조
React 시작 하기 - 다음과 같이 명령어를 쓰면 webpack & babel을 한꺼번에 쓸 수 있음 - 마지막의 "." 의미? 현재 폴더 안에 react를 시작하겠다~ npx create-react-app . React 기본 구조 - return함수에 jsx문법(HTML처럼 생긴 ) 를 그대도 넣어주면 됨 - 태그에 class를 주고 싶을때는 App.js import React from 'react'; import './App.css'; function App() { let name = "React App" return ( {name} ); } export default App; (1) 만약에 css파일을 적용하고 싶다? ClassName 지정 App.css (className="App" in App..
[Node.js] Webpack
webpack이란? - 쪼개진 javascript 파일을 html이 실행할 수 있는 javascript로 합쳐준다 참고) npx create-react-app . 명령어 후 webpack이 실행될 수 있는 건 src 안에서만 실행 - public 폴더안에서는 실행되지 않는다. npx create-react-app . webpack를 쓰는 이유? - javascript를 실제로 쓸 수 있는데 실제로 component로 하나로 하는 경우가 없음 - 댓글 component, ... component마다 script를 하나씩 만든다고 하면 엄청 많음, 페이스북 component개수? 2만개 - component가 많기 때문에 유지보수가 안됨 - webpack을 하려면 node를 알아야함 - node는? java..