Ella 프론트엔드일지

0. 배경설명 인터넷을 통해 데이터를 보내려면 TCP/IP 프토토콜로 보내는 IP주소, 받는 IP주소, 순서, 검증 등의 정보로 데이터를 한번 감싸고 그안에 데이터는 HTTP 프로토콜이라는 규약으로 묶어서 데이터를 주고 받게 된다. 여기서 HTTP 프로토콜은 특징들이 있다. 🔸HTTP 프로토콜 특징 1) 무상태성 - HTTP는 각 요청과 응답이 독립적이며 서로 연결되어 있지 않다. 서버는 이전에 했던 요청에 대한 정보를 저장하고 있지 않다. - HTTP 상태 정보를 기억하고 있지 않기 때문에 동일한 클라이언트가 재요청할 때마다 모든 정보를 다시 보내줘야한다. 2) 비연결성 - 클라이언트가 서버에 요청을 보내면 서버는 클라이언트에 응답을 보낸 후 연결을 종료한다. - HTTP/1.1 부터는 "Keep-Al..

0. useParams undefined|string 반환 - useParams 는 undefined|string 을 반환한다. - useParams 가 어째서 undefined를 반환하는지 궁금해졌다. 챗지피티 선생님께 여쭤봤다. 1) 매개변수가 경로에 없는 경우: 예를 들어, 경로가 /products/:productId로 정의되어 있지만 사용자가 /products만 방문한 경우, productId는 undefined가 됩니다. 2) 잘못된 경로 정의: 경로 정의를 잘못하여 매개변수를 포함하지 않는 경로에서 useParams를 호출하면, 해당 매개변수는 undefined가 됩니다. 3) TypeScript 타입 정의의 문제: useParams의 반환 타입을 정의하는 TypeScript 타입이 올바르게 ..

0. Origin (출처) Protocol + Host + Port 3가지가 같으면 동일 출처(Origin)라고 한다. 프로토콜의 HTTP는 80번, HTTPS는 443번 포트를 사용하는데, 80번과 443번 포트는 생략이 가능하다. URL 구조 더 보고 싶으면 더보기 누르기 더보기 Protocol(Scheme) : http, https Host : 사이트 도메인 Port : 포트 번호 Path : 사이트 내부 경로 Query string : 요청의 key와 value값 Fragment : 해시 태크 *동일 출처 예시 http://example.com:80 http://example.com HTTP 기본 Port인 80번이 생략되어있으므로 동일 출처입니다 http://example.com/app1/ind..

1. 브라우저 캐시 체크 - 사용자가 웹 브라우저를 통해 google.com 을 입력하면 브라우저는 로컬 캐시에서 해당 URL 에 대한 최근 저장된 IP 주소가 있는지 확인한다. 2. DNS 조회 - 요청한 URL 이 캐시에 없으면, ISP 의 DNS 서버에 google.com(도메인)의 IP 주소를 찾기위해 DNS query를 날린다. 3. TCP 연결 - IP 주소를 확인한 후 브라우저는 해당 IP 주소의 서버와 TCP 연결을 시작한다. 3-way-handshake 방식으로 수행되며, 클라이언트와 서버간의 안정적인 연결을 확립한다. 4. HTTP 요청 - TCP 연결이 확립되면, 브라우저는 HTTP 프로토콜을 사용하여 요청 메시지를 생성해서 웹서버에 HTTP 요청을 한다. 요청은 필요한 리소스 (HT..

0. 변수 - 변수(Variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. - 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다. - 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다. - 식별자(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 - 변수 값 : 변수에 저장된 값 - 할당 : 변수에 값을 저장 - 참조 : 변수에 저장된 값을 읽어들이는 것 1. 변수 선언 (변수를 생성하는 것) -..

0. 버그 현황 - 공유하기 버튼을 누르면 내가 한 일들만 필터링이 돼서 목록이 뜬다. 이 목록들을 친구에게 카톡으로 공유할 수 있다. - 하지만, 뒤로가기 버튼을 누르고 안 한 일들 나머지를 다시 체크하고 공유버튼을 눌렀더니 상태가 그대로 되어있다.. - 상태값이 바로바로 변경되어서 렌더링이 되지 않고있다. 1. 문제 코드 - todo 컴포넌트에서 todoItem 을 리코일을 이용해서 전역상태로 관리했다. - todoItem 빈 배열에서 get API 를 불러와서 setTodoItem 으로 상태를 업데이트 해주었다. function Todo() { const [todoItem, setTodoItem] = useRecoilState(todoItemState); const [isLoading, setIsL..