목록CodeStates/learning contents (74)
Jieunny의 블로그
S2) Unit 7. [HTTP/네트워크] 브라우저의 작동 원리(보이지 않는 곳)
📣 Client Server Architecture (2-tier Architecture) ✔️ Client Server Architecture(2-tier Architecture) : 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것 ✔️ 클라이언트 : 리소스를 사용하는 앱 ✔️ 서버 : 리소스를 제공하는 곳 ✔️ 클라이언트 서버 : 요청과 응답을 주고받는 관계 ✔️ 데이터베이스 : 리소스를 저장하는 별도의 공간 ✔️ 3-tier Architecture : 2-tier Architecture + 데이터베이스 📣 클라이언트와 서버의 통신 ✔️ 요청과 응답으로 구성되며, 요청이 있어야 응답이 온다. ✔️ 프로토콜(통신규약) : 클라이언트와 서버가 통신하는 방식 ✔️ API(Application P..
S2) Unit 7. [HTTP/네트워크] HTTP
📣 HTTP 1️⃣ HTTP Message : 클라이언트와 서버 사이에서 데이터가 교환되는 방식 ➰ 요청과 응답이 있다. ➰ HTTP Message는 몇 줄의 텍스트 정보로 구성된다. ➰ start line : 요청이나 응답의 상태를 나타내며 항상 첫 번째 줄에 위치한다. 응답에서는 status line 이라고 부른다. ➰ HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합 ➰ empty line : 헤더와 본문을 구분하는 빈 줄 ➰ body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함한다. 요청과 응답의 유형에 따라 선택적으로 사용된다. ➰ start line + HTTP headers = head ➰ Stateless(무상태성) : HTTP..
📣 State ✔️ 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값 ✔️ 내부에서 변화하는 값 📣 State hook, useState 사용법 ✔️ useState() 1️⃣ 불러오기 import { useState } from "react"; 2️⃣ 컴포넌트 안에서 호출하기 -> state라는 변수를 선언하는 것과 같다(state변수는 함수가 끝나도 사라지지 않는다) function CheckboxExample() { // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다. const [isChecked, setIsChecked] = useState(false); // useState의 리턴값을 구조 분해 할당 하고 있다. // setIsChecked함수는 is..
📣 SPA 란? ✔️ 등장배경 ➰ 전통적인 웹사이트 : 사용자가 웹사이트 내의 다른 페이지로 이동하면, 매번 HTML 파일로 된 페이지 '전체'를 불러와야 했다. ➰ 이때마다 header, navigation bar 등 중복되는 요소들을 매번 불러오는 것은 서어와의 불필요한 트래픽을 발생 시켰다. ➰ 사용자 입장에서는 느린 반응성을 갖게 되었다. ✔️ SPA? ➰ Single Page Application ➰ 서버로부터 완전히 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트하는 웹 어플리케이션이나 웹 사이트 ✔️ 장점 ➰ 부분 데이터만 받아서 화면을 업데이트 하기 때문에 사용자의 행동에 빠르게 반응한다. ➰ 서버에서는 요청받은 데이터만 넘겨주..
S2) Unit 4. [React] 기초
📣 리액트 ✔️ 프론트엔드 개발을 위한 JS 오픈소스 라이브러리 ✔️ 반드시 JSX를 사용해야 하는 건 아니다. 다만 문법적으로 가독성이 떨어지고 복잡해지는 단점이 있다. 📣 리액트의 특징 1️⃣ 선언형(Declarative) ➰ 한 페이지를 보여주기 위해 하나의 파일에 명시적으로 작성할 수 있게 JSX(HTML + JS)를 활용한 선언형 프로그래밍을 지향 ➰ HTML/ CSS/ JS 로 나눠 적을 필요가 없다. 2️⃣ 컴포넌트 기반(Component-Based) ➰ 컴포넌트 : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 것 (구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋) ➰ 컴포넌트는 서로 독립적이고, 재사용이 가능하므로 기능 자체에 집중하여 개발 가능하고 유지보수가 용이하다. 3️⃣ 범..
📣 fetch API ✔️ 동적으로 데이터를 받아야 하는 경우 사용한다. ✔️ 특정 URL로부터 정보를 받아오는 역할을 한다. ✔️ 과정이 비동기로 이루어지기 때문에 시간이 소요되는 작업을 요구할 경우에는 blocking이 발생하면 안되므로 특정 DOM에 정보가 표시될 떄까지 로딩 창을 대신 띄우는 경우도 있다. let url = "https://koreanjson.com/posts/1"; fetch(url) .then((response) => response.json()) .then((json) => console.log(json)) .catch((error) => console.log(error)); //{id: 1, title: '정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는 정부는 헌법재..