함수 컴포넌트가 어떤 순서로 업데이트 되는지(재렌더링 되는지) 보면import { useState } from 'react';function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( Clicked {count} times );} count = 0 인 상태로 버튼이 보이고,버튼을 클릭했을 때 handleClick 함수를 호출하면, setCount함수에 count + 1을 넘겨주며 실행이때, 리액트는 업데이트 해야 하는 것을 알아차리고 다시 렌더링 한다.setCount함수에 count + 1을 넘겨주며, 실행되는 ..

https : 프로토콜www : 서브도메인myservice.com/ : 도메인users/room : 경로(path)웹 서버의 디렉토리 경로대부분 가짜경로 (없는데 있는 것 처럼 보이는 경로)? 이후에 쿼리 파라메타가 옴id=3 : 쿼리파라메타(키=값 형태, 공백안됨)여기에서, 이 값을 웹서버의 디렉토리 경로(users/room)로 줄 것이다 & : 쿼리파라메타 구분자s=sw : 쿼리파라메타# : 해시mainpos : 해시값서버로 전송되지 않는 값클라이언트(브라우저)의 자바스크립트 안에서만 사용되는 데이터현재 #(해시)라우팅은 사용하지 않음(서버에서 알 길이 없음)

리액트의 함수형 컴포넌트에서 상태를 사용하는 방법 : Hooks가상 돔의 메커니즘을 이용하여 setState()처럼 내가 제공한 함수(Hooks)를 이용해서 상태를 관리함수(Hooks)를 다시 호출하여 재렌더링 할 수 있음 useState(): 리액트가 제공하는 상태관리 로직 함수항상 2개의 값을 가지는 배열을 반환(2)[값, 함수]첫번째 인자: useState()를 호출할 때 주는 값이 들어감두번째 인자: useState()를 호출 할 때 주었던 값을 바꾸고 싶을 때 사용하는 함수클래스 컴포넌트에서의 setState()와 같은 역할을 함두번째 함수가 호출되면, 상태를 바꾸려고 한다는 것을 리액트가 알게 되고리액트의 재 랜더링 로직이 돌아갈 수 있도록 함import { useState } from 're..

React 버전 16.8 이전(리액트 훅 기능이 추가되기 전) 기준 리액트 안에서 상태를 다루기 위해서, 클래스형 컴포넌트를 사용함수로는 상태의 변화를 감지하여 브라우저를 다시 렌더링 할 수 있는 방법이 없었음 클래스는 생성자 함수로 인스턴스 객체를 만들 수 있고,객체는 값을 계속 유지하려는 성질이 있으므로,export class CounterClass extends React.Component { constructor(props) { // 1. constructor에 props를 주고, React.Component에 그 값을 넘겨야 함 super(props); // 2.명시적으로 props를 넘김 this.state = { count: 1, // 상태의 초기값 }; } o..

웹 서버는 1대의 서버에서 멀티도메인으로 웹사이트를 실행하거나, 중계서버를 두어 통신 중 효율을 올릴 수 있다. 가상호스트하나의 HTTP서버에 여러개의 웹 사이트 실행 가능(HTTP/1.1) - 가상호스트 기능가상호스트 기능: 물리적으로 서버는 1대, 가상으로 여러 대 있는 것 처럼 설정 통신 중계 프로그램통신 중계 프로그램과 서버는 그 다음에 있는 다른 서버에 리퀘스트 중계그 서버로부터 받은 리스폰스를 클라이언트에 반환하는 역할을 담당 프록시서버와 클라이언트 양쪽 역할 중계클라이언트로부터 서버에 리퀘스트 전송클라이언트의 리퀘스트 URI를 변경하지 않고 서버에 전송서버로부터 클라이언트에 리스폰스 전송프록시 서버를 사용하는 이유캐시를 사용해서 네트워크 대역 등 효율적 사용을 위해조직 내 특정 웹 사이트에 ..

1. 이슈 상황Vite 번들러 사용HTML, CSS, Vanilla JavaScript로 SPA 개발프로필 사진 컴포넌트를 헤더 메뉴링크에 붙여 테스트 중이었다구현된 라우팅 함수를 통해 해당 링크로 이동 시 화면전환 되고,HistoryAPI를 이용해 직접 주소창 입력을 통한 화면전환이 가능했다. 그런데 새로고침을 하고보니, 프로필이미지를 붙인 페이지의 css가 깨져버림  해당 에러(사파리 브라우저 콘솔)밑에 빨간 에러를 보면 저기 경로로 css파일을 찾지 못했다고 나옴(해당 파일을 지워서 이미 존재하지 않음)Did not parse stylesheet at 'http://localhost:5173/src/pages/clara-shin/css/ProfileImage.css' because non CSS M..

HTTP 엔티티웹 브라우저와 웹 서버가 주고받는 실제 데이터예, 웹페이지를 방문할 때, 그 웹페이지의 내용이 HTTP 엔티티HTTP 요청과 응답에서의 엔티티HTTP 요청(Request)클라이언트(웹 브라우저)가 서버에 요청을 보낼 때 사용요청의 엔티티는 주로 서버로 데이터를 전송할 때 사용HTTP 응답(Response)서버가 클라이언트(웹 브라우저)에 응답을 보낼 때 사용응답의 엔티티는 주로 웹 페이지나 API 데이터를 클라이언트로 보낼 때 사용합니다.엔티티의 구성 요소엔티티 헤더(Entity Headers)메타데이터를 포함. 메타데이터는 데이터에 대한 정보. 예를 들어, 데이터의 종류, 크기 등을 설명중요한 엔티티 헤더:Content-Type: 데이터의 형식을 나타냅니다. 예를 들어, HTML은 tex..

상태코드 클래스클라이언트가 보낸 요청에 대한 서버의 응답을 나타내는 세 자리 숫자요청이 성공했는지, 실패했는지, 또는 추가 작업이 필요한지를 나타냄 클래스설명1xxInformational리퀘스트를 받아들여 처리 중2xxSuccess리퀘스트를 정상적으로 처리 했음3xxRedirection리퀘스트를 완료하기 위해 추가 동작이 필요함4xxClient Error서버는 리퀘스트 이해 불가능5xxServer Error서버는 리퀘스트 처리 실패함  100 Continue: 클라이언트가 요청을 계속할 수 있음. 서버는 요청의 일부를 받았고 클라이언트가 나머지를 보내기를 기다리고 있음101 Switching Protocols: 서버가 클라이언트의 요청에 따라 프로토콜을 변경하고 있음 200 OK: 요청이 성공적으로 처리..

1. HTTP 메시지메시지 구조 = 메시지 헤더 + 개행문자 + 메시지 바디메시지 헤더: 서버와 클라이언트가 꼭 처리해야 하는 리퀘스트와 리스폰스 내용과 속성 등개행문자[CR+LF] : Carrage Return(CR) + Line Feed(LF)메시지 바디: 꼭 전송되는 데이터 그 자체 2. 리퀘스트 메시지와 리스폰스 메시지의 구조리퀘스트 메시지메시지헤더리퀘스트라인 = 메소드 + 리퀘스트 URI + HTTP버전리퀘스트 헤더필드일반 헤더필드엔티티 헤더필드그 외 헤더필드 (쿠키 등)개행문자메시지바디리스폰스 메시지메시지헤더상태라인 = 상태코드 + 상태코드설명 + HTTP버전리스폰스 헤더필드일반 헤더필드엔티티 헤더필드그 외 헤더필드 (쿠키 등)개행문자메시지바디그 외 헤더필드: HTTP의 RFC 문서에는 정의되..