rosie

❓정의 방식 - 클래스형: ES6의 클래스를 사용하여 컴포넌트를 정의함 - 함수형: 일반 함수 또는 화살표 함수를 사용하여 컴포넌트를 정의함 ❓상태관리 - 클래스형: this.state와 this.setState()를 사용하여 상태를 관리합니다. - 함수형: useState 훅을 사용하여 상태 관리함 ❓생명주기 메서드 - 클래스형: 생명주기 메서드(componentDidMount, shouldComponentUpdate 등)를 사용할 수 있음 - 함수형: useEffect 훅을 사용하여 생명주기와 유사한 동작을 수행합니다. ❓this키워드 - 클래스형: this 키워드를 사용하여 클래스 인스턴스에 접근함. 이 때문에 메서드에 대한 바인딩 문제가 발생할 수 있음' - 함수형: this 키워드가 없으며, 클..

리액트의 라이프사이클 메서드는 컴포넌트의 생명 주기 동안 발생하는 여러 이벤트를 다루기 위해 정의된 메서드들 이 메서드들은 특정한 시점에 자동응로 호출되며, 이를 통해 개발자는 컴포넌트의 동작을 미세 조정하거나, 특정 작업을 수행할 수 있음 리액트의 라이프사이클 메서드는 3개의 단계로 분류될 수 있음 ❓Mounting(마운팅) - 이 단계는 컴포넌트가 처음 생성되어 DOM에 삽입될 때 발생함 - constructor: 컴포넌트의 생성자 메서드로, 컴포넌트의 초기 상태를 설정하는 데 사용됨 - static getDerivedStateFromProps: props를 받아서 state를 업데이트할 때 사용됨 - render: 컴포넌트 UI를 렌더링하는 메서드임 - componentDidMount: 컴포넌트가 ..

❓리액트 라이프 사이클이 의미하는 바 리액트의 라이프사이클은 리액트 컴포넌트가 경험하는 여러 단계를 나타냅니다. 이 단계들은 컴포넌트의 생성부터 소멸까지의 전체 과정을 포함하며, 각 단계마다 특정 시점에 호출되는 메서드들로 구성됩니다. 이 메서드들은 컴포넌트의 동작과 상태 변화에 따라 적절한 반응이나 조치를 취하는 데 필수적입니다. 컴포넌트가 페이지에 처음 로드되면, 그것은 "마운팅" 단계를 거칩니다. 이 단계는 컴포넌트 인스턴스가 생성되고, DOM에 삽입되는 과정을 포함합니다. 컴포넌트의 상태나 속성(props)이 변경되면 "업데이팅" 단계가 발생하며, 이는 컴포넌트가 재렌더링 되는 것을 의미합니다. 마지막으로, 컴포넌트가 페이지에서 제거될 때, "언마운팅" 단계가 발생하고, 이는 컴포넌트가 메모리에서..

HTTP(HyperText Transfer Protocol)와 HTTPS(HyperText Transfer Protocol Secure)는 웹에서 데이터를 전송하는 데 사용되는 두 가지 주요 프로토콜임 ❓보안 HTTP - 암호화되지 않은 텍스트 형식으로 데이터를 전송함 - 이로 인해 중간자 공격(Man-in-the-Middle Attack)이나 데이터 도청(eavesdropping)에 취약함 HTTPS - SSL/TLS 프로토콜을 사용하여 데이터를 암호화하고 전송함 - 이로 인해 데이터의 기밀성과 무결성이 보장됨 ❓포토 번호 HTTP - 기본 포트 번호는 80임 HTTPS - 기본 포트 번호는 443임 ❓SSL/TLS 인증서 HTTP - 인증서를 필요로 하지 않음 HTTPS - SSL/TLS 인증서를 필..

❓TCP(Transmission Control Protocol) - 연결 지향적 TCP는 데이터 전송 전에 연결을 설정하고, 데이터 전송 후 연결을 종료함 이렇게 하는 것은 신뢰성 있는 데이터 전송을 보장하기 위함 - 신뢰성 TCP는 패킷의 손실, 순서 변경, 중복 등의 문제를 처리하기 위한 메커니즘이 있음 손실된 패킷은 재전송됨 - 흐름 제어 수신자의 버퍼 오버플로우를 방지하기위해 흐름 제어 메커니즘을 제공함 - 혼잡 제어 네트워크 내의 혼잡을 관리하고 효율적인 데이터 전송을 위해 메커니즘을 제공함 - 사용 사례 웹 브라우징, 이메일 전송, 파일 전송 등 신뢰성이 중요한 애플리케이션에서 주로 사용됨 ❓UDP(User Datagram Protocol) - 연결 비지향적 UDP는 연결 설정 없이 데이터를 ..

❓클라이언트 사이드 렌더링(CSR) 개념 - 이 방식에서는 서버는 초기 페이지 로딩 시에 빈 페이지나 매우 기본적인 틀만 전송하며, 필요한 데이터나 나머지 페이지 내용은 클라이언트(브라우저)에서 JavaScript를 사용해 렌더링함 장점 - 동적 상호작용: CSR 방식은 사용자와의 상호작용에 반응적인 웹 애플리케이션을 만들기 좋음 - 서버 부하 감소: 서버는 렌더링에 관한 작업을 클라이언트에게 위임하기 때문에 부하가 줄어듬 - SPA(Single Page Application)에서 효과적임 단점 - 초기 로딩 시간: 전체 애플리케이션 코드와 데이터를 로드해야 하기 때문에 초기 로딩 시간이 길어질 수 있음 - SEO 문제: 크롤러가 JavaScript로 렌더링되는 페이지를 올바르게 인식하지 못할 경우, S..

❓쿠키(Cookie) 개념 - 클라이언트 측에 저장되는 작은 텍스트 파일로, 이름 - 값의 쌍으로 구성됨 용도 - 세션 관리, 사용자 선호 설정, 트래킹 등의 목적으로 사용됨 제한 - 크기 제한 (약 4KB), 보안에 취약, 쿠키가 너무 많거나 크기가 너무 크면 웹사이트의 성능에 영향을 줄 수 있음 만료 - 설정된 만료 기간이 잇으며, 만료 기간이 없는 경우 브라우저 세션 종료시 작제됨 ❓세션(Session) 개념 - 서버 측에 저장되는 사용자 정보로, 일반저긍로 브라우저가 종료되기 전까지 서버에 유지됨 용도 - 사용자 인증, 임시 데이터 저장 등에 사용됨 - 일반적으로 쿠키를 사용하여 세선 ID를 클라이언트에 저장하고, 이를 통해 서버에서 해당 사용자의 세션 데이터를 참조 제한 - 서버의 메모리를 사용..

❓GET 개념 - GET은 주로 서버에서 데이터를 조회하기 위해 사용됨 데이터 흐름 - 사용자(클라이언트)가 웹 브라우저 주소창에 URL과 함께 쿼리스트링 형태로 파라미터를 입력하거나, 웹 페이지의 링크를 클릭함 - 이 요청이 웹 서버에 도달하면, 서버는 해당 요청을 해석하여 필요한 데이터나 페이지를 찾음 - 서버는 이 데이터나 페이지 정보를 응답으로 클라이언트에게 전송 - 클라이언트는 받은 응답을 웹 브라우저에 렌더링하여 사용자에게 보여줌 ❓POST 개념 - POST는 서버에 데이터를 제출하기 위해 사용 ex) 웹 폼을 통한 회원가입이나 글 작성 시 사용됨 데이터 흐름 - 사용자가 웹 폼에 데이터를 입력하고 제출 버튼을 클릭하면 이 데이터는 요청 본문에 포함되어 서버로 전송됨 - 웹 브라우저는 이 데이..

❓목적 - GET 데이터를 가져와서 보여주는 것에 초점을 맞춤 주로 데이터를 조회할 때 사용 - POST 서버에 데이터를 제출하여 저장, 업데이트, 처리하는 데 사용함 ❓데이터 전송위치 - GET 데이터가 URL의일부로 전송됨 ex) http://example.com/page?name=rose&age=26 - POST 데이터가 요청 본문에 포함되어 전송됨 URL에 직접적으로 보이지 않음 ❓데이터 길이 - GET URL에 데이터가 첨부되므로, 길이에 제한이 있음 대부분의 웹 브라우저나 서버에서 URL길이에 제한을 둠 - POST 데이터 길이에 별다른 제한이 없음(서버의 설정에 따라선 제한이 될 수 있음) ❓보안 - GET URL에 데이터가 첨부되므로, 민감한 정보(비밀번호 등)를 전송하는 것은 안전하지 ..

ⅰ. 요청 및 응답 - 사용자가 URL을 입력하면 브라우저는 해당 웹 서버에 HTTP 요청을 보냄 - 서버는 요청을 처리하고, HTML, CSS, JavaScript, 이미지 등의 리소스를 포함한 응답을 브라우저에 전송함 ⅱ. HTML 파싱 - 브라우저는 받은 HTML문서를 파싱하여 DOM(Document Object Model)트리를 구축함 - 이 DOM 트리는 웹 페이지의 구조화된 표현 ⅲ. CSS 파싱 - CSS는 파싱되어 CSSOM (CSS Object Model)트리를 생성함 - CSSOM은 웹 페이지의 스타일 정보를 포함하고 있음 ⅳ. 렌더 트리 생성 - DOM과 CSSOM 트리는 결합되어 렌더 트리를 형성함 - 이 트리는 페이지의 시각적 표현을 나타내며, 화면에 표시될 요소와 그 요소의 스..