뉴히의 개발 로그

Javascript 호이스팅이란? 함수가 실행 되기 전에 안에 있는 변수들을 모두 범위에 최상단에 올리는 개념입니다. 이 호이스팅이라는 개념으로 인해서 var의 경우는 변수를 선언, 할당하기 전에 불러와도 에러가 나지 않고 아래 선언되어 있다면 undefined라고 뜨게 됩니다. 호이스팅시 변수의 선언과 초기화를 같이 해버리기 때문에 선언은 되어있는걸 알지만 값은 할당 전이기 때문입며 값 할당 후에 선언을 해도 undefined라고 뜹니다. 같은 변수명으로 재선언도 가능합합니다. 함수만 지역변수로 호이스팅 되고 나머지는 함수안에 변수도 다 전역변수로 상단으로 올려버려 block scope밖에서도 접근이 가능합니다. 이러한 문제들로 ES6업데이트시 나온게 let이고 let 또한 호이스팅이 되지만, 선언/할..

버츄얼 돔과 리얼 돔의 차이가 무엇인가? 리얼돔은 자바스크립트로 DOM에 직접 접근하여 웹페이지 요소를 선택하여 변경할 수 있습니다. 리얼 DOM구조 자체를 변경하여 리렌더링 시키기 때문에 많은 요소가 자주 업데이트 되는 경우 브라우저 리플로우와 리페인트가 발생하여 화면이 지연되거나 깜빡이는 현상이 발 생할 수 있습니다. 반면 가상돔은 메모리에 상에만 존재하는 가벼운 복사본으로 리얼돔과 동기화되는 방식으로 동작하며 리액트는 가상돔을 활용해 효율적인 UI 업데이트를 관리합니다. 가상돔 업데이트는 리얼돔조작을 최소화 하여 성능을 향상시킵니다. 참고 답변 : 리얼 돔(Real DOM)은 웹 페이지의 실제 구조를 나타내는 HTML 요소들의 트리 구조를 의미합니다.버츄얼 돔(Virtual DOM)은 리액트(Rea..

Async/Await와 Promise의 차이 Async/Await와 Promise는 비동기 작업을 다루는 방식입니다. Async/Await는 async 함수 안에 await키워드를 사용해 비동기작업의 결과를 기다렸다가 동기적으로 실행할 수 있습니다. 이로써 비동기 코드를 동기적으로 보이게 합니다. promise는 비동기 함수 호출 또는 비동기 연산이 완료되었을 때, 이후에 처리할 함수나 에러를 처리하기 위한 함수를 설정하는 모듈입니다. promise는 콜백 지옥(callback hell)을 해결하기 위해 Promise 체인을 사용하여 가독성을 향상시키는데 많이 사용됩니다. 둘 다 비동기 작업을 처리하기 위한 유용한 도구로, 상황에 따라 어떤 것을 선택할지는 코드의 구조와 목적에 따라 달라질 수 있습니다.

http, https 차이점에 대해 설명해주세요 답변HTTP와 HTTPS의 유일한 차이점은 HTTPS를 사용한 웹 페이지를 통해 전송되는 모든 데이터는 추가적인 보안 계층이 있습니다. 이를 TLS(전송 계층 보안) 프로토콜이라고 합니다. 모든 유형의 데이터는 변경되거나 손상될 수 없는 HTTPS 사이트를 통해 전달되며 제3자로부터 보호됩니다. HTTPS(https://)는 SSL(Secure Socket Layer) 인증서를 사용하는 HTTP(http://)입니다. SSL(또는 TLS) 인증서는 일반 HTTP 요청 및 응답을 암호화합니다. 따라서 HTTPS는 HTTP보다 더 안전한 보안용 프로토콜이라고 할 수 있습니다.

PWA의 핵심은 매니페스트(Manifest)와 서비스워커(service-worker)입니다. 그중에서 매니페스트(Manifest)는 인스톨 배너와 앱 아이콘에 대한 설정을 담당 웹앱 매니페스트(Manifest)는 PWA(Progressive Web Apps)의 설치와 앱의 구성 정보를 담고 있는 json 설정파일입니다. 이 설정은 크게 아래와 같은 작업을 합니다. App Icon : 설치 시 앱의 아이콘 이미지와 크기 설정 스플래시((splash screen) 화면 : 로딩화면 설정 Start URL : 웹앱이 실행될 때 가장 처음 보여질 URL 설정 Display Type : 웹 앱의 화면 형태 (browser, standalone, fullscreen) Display Orientation : 웹앱의 ..

비회원들은 북마크나 댓글등의 기능을 사용할 수 없도록 만들었는데 닫기 버튼을 누르면 로그인페이지로 연결해줘야하나 싶었다. useNavigate를 써서 signin페이지로 연결 그런데 오류 땃!!!! "useNavigate()는 컴포넌트의 context 내에서만 사용할 수 있습니다."라는 오류 메시지 react-router-dom 라이브러리의 useNavigate() 함수를 컴포넌트 외부에서 사용하려고 할 때 발생하는 오류 portal을 root와 같은 레벨에 위치시켯고 Router는 root의 하위에 있기 때문이다 로컬스토리지 또는 url에 변화를 줄 수있다. 변화를 감지하면 헤더나 레이아웃같은 공통 컴포넌트에서 인지하고 라우팅하도록? 이벤트리스너를 심어두는것도 방법일듯? popstate ?=으로 쿼리를..

TCP (Transmission Control Protocol)와 UDP (User Datagram Protocol)는 네트워크 통신에서 사용되는 두 가지 주요한 프로토콜입니다. 이들은 데이터를 패킷 형태로 전송하는 방법을 정의하고, 컴퓨터 간에 통신을 가능하게 합니다. 그러나 두 프로토콜은 서로 다른 방식으로 작동하며 각각의 장단점이 있습니다. 1. TCP(Transmission Control Protocol) TCP를 해석하면 전송을 제어하는 프로토콜(규약)이라는 뜻인데, 이는 아래의 정의와 별 다를바 없습니다. 인터넷상에서 데이터를 메세지의 형태로 보내기 위해 IP와 함께 사용하는 프로토콜 일반적으로 TCP와 IP를 함께 사용하는데, IP가 데이터의 배달을 처리한다면 TCP는 *패킷을 추적 및 관리..

쿠키(Cookie), 세션(Session), 웹 스토리지(Web Storage)는 모두 웹 브라우저에서 데이터를 저장하고 관리하기 위한 메커니즘입니다. 그러나 각각의 특징과 사용 용도에 차이가 있습니다. 쿠키 (Cookie): 클라이언트(브라우저)에 작은 데이터 조각을 저장하는 방식입니다. 서버에서 생성하고 클라이언트에 저장되며, 만료 기간을 설정할 수 있습니다. 주로 사용자 인증, 세션 관리, 사용자 기본 설정 등에 활용됩니다. 브라우저마다 저장 가능한 쿠키의 개수와 용량에 제한이 있습니다. 보안상 취약할 수 있으며, 민감한 정보를 저장하기에는 적절하지 않을 수 있습니다. 세션 (Session): 서버에 데이터를 저장하고 클라이언트는 세션 식별자를 쿠키 등으로 전달하여 식별하는 방식입니다. 서버에서 생..