Ella 프론트엔드일지

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..

0. Transition 브라우저에서 렌더링이 시작되면 중단될 수 없으며 렌더링이 완료되기까지 화면은 block 상태가 된다고 할 수 있다. 이로 인하여 렌더링 도중에 발생하는 텍스트 입력과 마우스 클릭과 같은 액션이 지연되어 버벅거림을 느낀 적이 있을 것이다. 화면이 오래 멈춰있다면 사용자 경험은 악화되기 때문에, React 18에서는 렌더링 블록킹 문제를 해결하기 위해 동시성을 이용하게 되었다. 🔸startTransition 작업 단위를 잘게 나누어 실행하되, 우선순위가 높은 작업등을 먼저 렌더링하고 우선순위가 낮은 작업은 잘게 나누어진 단위에서 블록시킨다. 예를 들면 검색창에 검색을 할 경우 키보드 입력에 따라 추천 검색어가 뜬다. 키보드 입력이 한 번 발생할 때마다 입력된 키워드에 대해 관련된 단..