Note
-
서버 사이드 렌더링, 클라이언트 사이드 렌더링Note 2020. 12. 6. 19:54
렌더링 웹 페이지 접속 시, 그 내용을 브라우저 화면에 표시하는 것 서버 사이드 렌더링(SSR) 요청 시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식 (서버 측에서 HTML, View를 생성하여 응답하는 방식) - View를 서버에서 렌더링 하여 가져오기 때문에 첫 로딩이 매우 짧음 - 인터랙션(상호작용) 바로 가능하지 않음(view만 가져온 상태, 자바스크립트까지 모두 적용된 상태는 아니므로) - View 변경할 때마다 서버에 계속 요청하게 되므로 서버에 부담이 커짐 - 검색 엔진 최적화에 유리 클라이언트 사이드 렌더링(CSR) 처음에 하나의 페이지만 서버에서 제공하고, View에 대해서는 클라이언트에서 자바스크립트를 통해 렌더링 하는 방식 (클라이언트 측에서 View 생성하는..
-
React Router(v4)Note 2020. 12. 6. 19:10
www.youtube.com/watch?v=o6j8zi5mFIg 라우터: url 주소나 특정 상태에 따라서 뷰를 나누기 위해 사용된다. 리액트 라우터는 하나의 라이브러리, 유일한 대안은 아니지만 거의 공식이라고 할 정도로 많이 사용되고 있다. 준비물 yarn, 에디터(vscode) yarn 설치 brew install yarn create-react-app(global) 설치 yarn global add create-react-app 작업할 디렉토리로 이동 후에 create-react-app '프로젝트이름' cd '프로젝트이름' yarn start 서버가 열린 것을 확인 후에, 에디터(vscode)를 사용하여 방금 만든 디렉토리를 연다. App.js 기존에 있던 코드를 삭제하고 rsc import Rea..
-
SQLNote 2020. 12. 2. 12:59
Database & SQL - SQL: Structured Query Language, 구조화된 Query 언어 - Qurery : "질의문", 가장 친숙한 예시로는 검색창에 적는 검색어도 쿼리의 일종, 저장되어있는 정보를 필터 하기 위한 질문 - SQL: 데이터베이스 용 프로그래밍 언어, 데이터베이스에 쿼리를 보내 원하는 데이터를 뽑아올 수 있다. SQL 키워드는 대소 문자를 구분하지 않고 select는 SELECT와 동일하고, 일부 데이터베이스 시스템에서는 각 SQL 문 끝에 세미콜론이 필요하다. 세미콜론은 서버에 대한 동일한 호출에서 둘 이상의 SQL 문을 실행할 수 있도록 데이터베이스 시스템에서 각 SQL 문을 분리하는 표준 방법이다. 중요한 SQL 명령 중 일부 SELECT 데이터베이스에서 데이..
-
MVC, FluxNote 2020. 11. 23. 16:28
MVC, MVVM 같은 키워드는 소프트웨어 설계와 관련된 디자인 패턴으로, 소프트웨어 공학에서의 "흔히 사용되는" 설계 패턴을 의미한다. React에 단방향 데이터 흐름, Redux에 Flux 패턴 역시 일종의 디자인 패턴이다. MVC(Model-View-Controller) MVC 패턴은 Model + View + Controller를 합친 용어 구조 Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분 View : 사용자에서 보여지는 UI 부분 Controller : 사용자의 입력(Action)을 받고 처리하는 부분 동작 MVC 패턴의 동작 순서는 아래와 같다. 사용자의 Action들은 Controller에 들어옴 Controller는 사용자의 Action를 확인하고, Model..
-
CSS basic box modelNote 2020. 11. 21. 12:55
문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다. 하나의 박스는 네 부분(영역)으로 이루어집니다. 각 영역을 content(콘텐츠), padding(안쪽 여백) 영역, border(테두리 영역), 그리고 margin(바깥 여백) 영역이라고 부릅니다. Content 콘텐츠 경계(content edge)가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다. 콘텐츠 영역의 크기는 콘텐츠 너비(콘텐츠 박스 너비)와 콘텐츠 높이(콘텐츠 박스 높이)입니다. 배경색과 배경 이미지를 가지고 있기도 합니다. box-sizing 속성의 값..
-
JSX 조건부 렌더링Note 2020. 11. 20. 15:00
JSX 내부의 자바스크립트에서 if 문을 사용할 수가 없다. 하지만 조건에 따라 다른 내용을 렌더링 해야 하는 경우에는 JSX 밖에서 if 문을 사용해 사전에 값을 설정하거나, 조건부 연산자를 사용하면 된다. 조건부 연산자 function App () { const check = '체크'; return ( {check === '체크' ? ( 체크남방 입니다 ) : ( 체크남방 아닙니다 )} ) } 이렇게 삼항 연산자를 이용하여 코드를 작성하면 브라우저에서 아래와 같은 문구를 볼 수 있다. 하지만 check 값을 변경하면, 브라우저에 나타나는 문구가 변경된다. const check = '제크' 개발을 하다 보면 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때는 아예 아무것도 렌더링하지 않아야 ..