클라우드 지망생의 공부 블로그

왜 Next.JS를 사용해야만 하는가?React 프레임워크의 한계 => 원칙적으로 CSR만 가능.CSR은 서버에서 핵심 HTML을 받은 뒤 이를 기반으로 렌더링을 하기 때문에, 서버가 렌더링을 전담하는 SSR에 비해 SEO(검색 엔진 최적화)의 효과를 볼 수가 없다.SEO의 효과를 보려면 서버에서 렌더링을 해야 한다 => SSR이 되면 클라이언트 쪽에서 HTML 페이지를 다운받아 표시한다 => JS 다운로드까지 완료되면 사용자 상호작용도 가능해진다.웹 페이지를 렌더링하는 2가지 방식: 서버 사이드 렌더링 vs 클라이언트 사이드 렌더링. SSR이란 무엇인가? 고전적인 웹페이지 렌더링 방식. 1) 서버를 향해, 클라이언트가 페이지를 요청한다. 2) 그러면 서버는 요청/Request를 수락한 후, 전체 HTM..

1. 컴포넌트란 무엇인가?컴포넌트란 다시 사용할 수 있는 코드 블록을 말한다.크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘며, 함수형 컴포넌트가 더 자주 쓰인다. import React from 'react'; const Greeting = (props) => {   return Hello, {props.name}!; }; export default Greeting; 위의 코드에서, Greeting이라는 함수를 만들었다.인사를 위한 서식은 이 함수로 만들어졌으므로, 다른 컴포넌트에서는 이 인사를 하는 대상이 누구인지만 지정하면 된다.2. API란 무엇인가?이번 4주차에서 사용한 API는 웹 서비스 연동의 기능을 갖는다.Tmdb 사이트에의 영화 목록을 제공하는 API를 이용하여, 클론 넷플릭스의 fron..

과제 목록1. SPA란 무엇인가?2. React란 무엇인가? + 컴포넌트란 무엇인가?3. JSX란 무엇인가?1. SPA = Single Page Application.SPA는 네이버 연관검색어 확인이나 언론사 뉴스 스탠드 조작 등을 포함한 웹과 사용자의 상호작용에 걸리는 대기시간을 최소화시켜 준다. 이 최소화 작업에 요구되는 두 가지 요소가 1)AJAX, 2)XML(과거)/JSON(현재)이다.AJAX를 통해, 웹페이지를 새로고침하지 않고 필요한 데이터만 갱신할 수 있게 한다.=> 비동기성 연결. 상대의 답변과 무관하게, 나의 요청 및 다른 행동이 가능하다.JSON은 XML 대비 보다 빠르고 효율적인 데이터 표현 방식이다.2. React란 무엇인가? + 컴포넌트란 무엇인가?React는 UI를 만들 때 사용..

보호되어 있는 글입니다.

시도한 과제: 타이핑 게임(타자연습 게임)과제 현황   피드백 사항 정리1. 의사 코드 작성하는 연습 반복하자. 코드를 쓰는 것에 집중할 필요는 현재로서는 없다.코딩보다도 그 코딩의 결과까지 이어지는 논리를 만들어라.2. 비동기 함수는 원래 이해하기 힘들다.한 번에 30분의 제한시간을 두고, 30분 내로 이해할 수 없거든 도움을 요청하라.3. 의사 코드를 바꿀 때는, 목적을 명확히 하고 과정을 세분화하라.  3 예시 - 과제 1, '남은 시간이 0이 되면 입력 칸을 disable 시킨다' 3-1. '남은 시간' value = time left.'남은 시간이 0이 된다' = 2가지 의미.1) time left = 0이 된다.2) 0이 된 값은 음수로 떨어지지 않는다 = clearInterval(timeIn..

19강. IP 주소의 클래스란 무엇인가? 한줄 요약: 네트워크의 규모/크기를 나타내는 단위. 기본적으로 IP 주소는 8비트/1옥텟 4개, 32비트로 이루어졌다.  그러나 네트워크의 크기는 다양하다. 네트워크를 이용하는 호스트의 수가 많으면 많을수록, 네트워크의 크기는 크다고 할 수 있다. (네트워크는 통신망, 호스트는 통신망을 이용하는 인원) 그렇다면, 더 큰 네트워크일수록 더 많은 호스트를 가질 수 있게 해야 한다. 그것을 위해, 32비트 4옥텟으로 이루어진 IP 주소를 기준으로 네트워크 ID에 할당하는 옥텟의 개수를 변경할 수 있다. 네트워크 ID가 1옥텟이라면, 3옥텟을 호스트 ID로 쓸 수 있다. 따라서, 해당 네트워크를 사용 가능한 호스트의 인원 수는 2의 24제곱개(-2개)가 된다. 네트워크 ..

1. Semantic 태그란 무엇인가?2. CSS의 Selector/선택자란 무엇인가?3. CSS에서 position, display, grid, flex란 무엇인가?답 1. Semantic 태그란, 보다 분명하고 확실한 의미가 부여된 태그를 말한다.위의 예시에서, 좌측 div는 Container/구획이라는 의미만 갖는다.굉장히 넓은 의미를 가졌기에 어떤 용도로든 사용할 수 있지만, 그런 만큼 좌측 이미지처럼 한 눈에 봤을 때 "그래서 이 div 모음은 무엇인가? 무슨 일을 하기 위해 만들어졌나?" 를 알 수가 없다. 반면, 우측 이미지는 div 대신 header, footer 등의 보다 알기 쉽고 직관적인 태그를 사용한다.HTML에 대해 잘 모르더라도, Head라는 단어로부터 header란 단어의 뜻을..

단원 - OSI 계층 중 3계층(아래에서), 네트워크 계층.17강. 네트워크 계층의 역할한줄 요약: 데이터 링크 계층이 커버할 수 없는 원거리간의 통신을 지원한다.2계층 데이터 링크의 한계: 같은 네트워크로 연결되어 있다면, 이더넷을 사용해서 통신할 수 있다. 그러나, 네트워크가 아예 다르다면 데이터 링크로는 통신할 수 없다. (실생활 예시: 같은 집 안에서라면, 가족끼리 육성으로 소통할 수 있다. 그러나 가족이 대전과 서울에 나눠져 산다면, 두 공간 사이에는 육성 소통이 불가능하다. 통신을 하려면, 별도로 두 집을 연결할 수단-전화, 메시지 등-이 반드시 필요하다.)이 문제를 해결하는 것이 네트워크 계층의 역할이며, '"라우터"/'Router"가 반드시 필요하다. 라우터의 기능: 목적지 정보가 존재할 ..

12강. 데이터 링크 계층의 역할 + 이더넷한줄 요약: 데이터 링크 계층에 한해, 통신시 가장 대표적인 규칙을 이더넷이라고 한다. 데이터 링크 계층: 네트워크 장비 사이에 신호를 주고받을 때, 이 신호의 규칙을 정하는 역할. LAN으로 데이터를 주고받기 위해서는 규칙이 필요하다. 이 규칙 중 대표적인 것이 이더넷/Ethernet이다. (=이더넷은 LAN선 통신의 규칙이다.) 규칙의 예시: 1) 허브의 한계로 인해, 1번 컴퓨터에서 전송된 정보는 허브로 연결된 모든 컴퓨터들에게 전송된다. 이를 막기 위해, 1번 컴퓨터에서 최초 송신 시 '목적지' 정보를 설정한다. 이 경우, 정보가 모든 컴퓨터에게 전달되는 것은 동일하지만 '목적지' 외의 컴퓨터는 해당 정보를 무시한다. (예시: 5명이 모인 방 안에서 2명..

9강. 물리 계층/1계층의 역할과 랜 카드의 구조.한줄 요약: 물리 계층은 문자 그대로, 물리적 기계어를 통신이 가능한 비물리적 전기 신호로 번역하는 계층이다. 컴퓨터는 0과 1만을 사용해 소통한다. 0과 1을 사용해서 통신하려면, 0과 1의 집합을 전기 신호로 번역해야 한다.전기 신호는 크게 아날로그 신호와 디지털 신호의 두 가지로 나뉘며, 컴퓨터는 디지털 신호로 통신한다. 0과 1로만 통신하는 특성상, 디지털 신호로 인한 정보 전달은 모스 부호와 유사하게 진행된다. SOS를 모스 부호로 표현할 때 짧게 3번, 길게 3번, 짧게 3번 신호하는 것과 비슷하다. 1) 0 = 신호 OFF(끄다), 1 = 신호 ON(켜다)으로 정의한다. 2) 신호의 ON/OFF의 빈도, 신호의 길고 짧음 등을 통해 신호의 내..