🍞 Front-End

브라우저는 아마도 가장 많이 사용하는 소프트웨어일 것이다. 이 글을 통해 브라우저가 어떻게 동작하는지 설명하려고 한다. 이 글을 읽고 나면, 어떤 과정을 거쳐 페이지가 화면에 보이게 되는지 알게 될 것이다. 브라우저의 주요 기능브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만, PDF나 이미지 또는 다른 형태일 수 있고, 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.예) 최근 종료된 인터넷 익스플로러부터 파이어폭스, 사파리, 크롬, 오페라 등 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Conso..

클로저란?클로저는 자신이 선언될 당시의 환경을 기억하는 함수다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 해당 함수의 생명 주기가 종료되더라도 함수의 반환된 값이 변수에 의해 참조되고 있다면 생명 주기가 종료되더라도 (실행 컨텍스트 스택에서 제거되어 pop 되더라도) 렉시컬 환경에 남아 참조가 가능하다. 클로저를 사용하면 뭐가 좋은 거지?클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다.다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 클로저를 어떻게 생성하나요?1. 내부(중첩) 함수가 익명 함수로 되어 외부 함수의 반환값으로 사용될 때2. 내부(중첩) 함수가 외부 함수의 스코프에서 실행될 때3. 내부 함수에서..

📌 이벤트 전파자바스크립트의 모든 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다.사용자의 다양한 입력을 통해 동적으로 생성되는 이벤트 객체는 이벤트를 발생시킨 타깃을 중심으로 DOM 트리를 통해 전파된다. 전파되는 방향에 따라서 3단계로 구분할 수 있다. - 캡처링 단계: 이벤트 상위 요소 -> 하위 요소로 전파- 타깃 단계: 이벤트가 이벤트 타깃에 도달- 버블링 단계: 이벤트가 하위 요소 -> 상위 요소로 전파 브라우저는 기본적으로 이벤트 버블링 단계에서 이벤트를 캐치한다. 📌 이벤트 버블링 - Event Bubbling이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.  아래 콘솔 창은 three cl..

스코프는 유효 범위라는 뜻으로, 식별자(변수)가 유효한 범위를 말한다.자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정한다.따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다. 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있다. var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다.function add(x, y) { //매개변수는 함수 몸체 내부에서만 참조할 수 있다. //즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부이다. console.log(x + y); // 2 5 return x + y;}add(2, 5);//매개변수는 함수 몸체 내부에서만 참조할 수 있다.co..

OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹 사이트 상의 자신들의 정보에 대해 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 산업 표준 프로토콜이다. OAuth는 이전의 인증방식들의 보안이 취약하다는 단점을 보완하여 탄생했으며 현재는 표준안으로 발표되어 널리 사용되고 있다. OAuth 2.0의 핵심은 구글, 페이스북, 카카오 등 다양한 클라이언트 환경에 적합한 인증 및 권한의 위임 방법을 제공하고, 그 결과로 클라이언트에게 access token을 발급한다. 그리고 발급받은 access token을 이용해 타사의 api 서비스를 이용할 수 있다.

NextJS에서는 13 버전이 업데이트되면서부터 모든 컴포넌트가 기본적으로 서버 컴포넌트다.서버 컴포넌트와 클라이언트 컴포넌트가 있으며, 이를 잘 이해하고 사용하고 것이 중요할 것 같아 정리하게 되었다. 웹 애플리케이션을 렌더링할 수 있는 환경은 클라리언트와 서버가 있다.   서버 컴포넌트 -> 클라이언트 컴포넌트서버 컴포넌트는 서버에서 실행되는 React 컴포넌트라고 볼 수 있다.  NextJS에서는 기본적으로 컴포넌트를 만들 때 서버 컴포넌트로 동작된다. 도입부에 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 설명한 공식문서에서 확인할 수 있듯, 서버 컴포넌트에서는 react lifeCycle을 가능하게 하는 useState, useEffect 같은 함수를 사용하지 못한다. 그렇기 때문에 클라이언트 컴..

1. 라이브러리와 프레임워크 차이점 - 라이브러리 우리가 갖다쓰는 것 (Ex React: 렌더링할때 ReactDOM.render() 불러오기) 사용자가 파일 이름이나 구조 등을 정하고 모든 결정을 내림 - 프레임워크 정해진 틀 안에서 커스터마이징 (Ex NextJS: 정해진 규칙에 따라 코드를 작성하면 렌더링) 는 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 2. 404 에러 페이지를 직접 만들지 않아도, 구현 가능 3. CSR와 SSR 차이 앱에 있는 페이지들이 미리 렌더링됨. 정적으로 생성된다. CRA는 CSR 클라이언트 사이드 렌더링 브라우저가 자바스크립트를 가져와 유저가 보는 UI를 만드는 모든 것을 한다. 유저가 흰화면을 보고 있을 땐, 브라우저가 자바스크립트를 요청하고 있다. 브라..

Websocket과 stompjs를 활용해 채팅 기능을 구현하던 중, client가 null이라는 오류가 발생했다. 채팅을 구현하려면 먼저 연결(connect)을 해야 되고, 구독(subscribe), 보내기(send) 순으로 진행이 되어야 한다. 처음 구현하는 거라서, 구글링으로 채팅 구현을 찾아봤다. 그러나, 찾아본 모든 구글링에서 하나의 함수에 모든 기능을 구현했었다. 나는 채팅을 시작하는 페이지에서 구독과 연결을 하고, 채팅 페이지에서 보내기 기능을 사용해야 해서, 여러 custom hook에 기능을 나눠서 구현하려고 했다. 그러나, 여기서 stompjs를 사용한 client는 recoil에 담아 전역상태로 관리를 하지 못한다는 문제가 발생했다. 하나의 페이지에서 connectHandler를 작동..

파일은 이미 흔히 Multipart/form-data로 주고 받고 있다. 관건은 JSON 데이터를 Multipart/form-data로 보내는 것이다. 파일 같은 경우, formData를 생성해 바로 append 해주면 되지만, JSON 데이터 같은 경우는 JSON.stringify를 사용해 string 형식으로 보내줘야 한다. FormData.append()의 파라미터 타입을 보면, value에는 string과 Blob(binary large object) 타입만 전달할 수 있다. 따라서 아래에서 uploader 객체를 append 할 때 바로 넣지 않고 JSON.stringify()로 문자열로 변환하여 전달했다. 아래처럼 파일을 업로드하여 요청을 보내면 서버에서 JSON 데이터를 함께 전달받을 수 있..

useQuery와 매우 유사하지만 많은 차이가 있다. ✅ useQuery와 useMutation차이 - 일회성이기 때문에 캐시 데이터가 없다. 페칭이나 리페칭 그리고 업데이트할 데이터가 있는 useQuery와 다르다. - 기본적으로 구성할 수는 있지만, 재시도가 없다. useQuery는 기본적으로 세 번 재시도한다. - 관련된 데이터가 없으므로 리페치도 없다. - 캐시 데이터가 없으므로 isLoading은 없고 isFetching만 있다. isLoading은 데이터가 없을 때 이루어지는 페칭이기 때문이다. - useMutation은 반환 객체에서 mutate 함수를 반환한다. 이것이 변이를 실행하는 데 사용된다. - onMutate 콜백도 있다. 이것을 낙관적 쿼리에 사용하는데 변이가 실패할 때 복원할 ..