rosie

❓SSG(Static Site Generator)란? - 정적 웹사이트를 생성하기 위해 사용되는 도구 - 정적 웹사이투는 서버 사이드에서 동적으로 콘텐츠를 생성하고 데이터베이스 호출을 하지 않는 대신, 사전에 빌드 과정을 거쳐 HTML, CSS, JavaScript 같은 정적 파일들로 변환됨 - 이 파일들은 CDN(Content Delivery Network)과 같은 정적 파일 서버에 호스팅 되어 사용자에게 전달됨 ❓SSG 장점 ⅰ) 보안 -> 데이터베이스나 서버 사이드 코드가 없기 때문에 보안 취약점이 상대적으로 적음 ⅱ) 속도 -> 모든 페이지가 사전에 생성되어 있으므로, 서버 사이드 처리가 필요 없어 로딩 시간이 빠름 ⅲ) 확장성 -> 트래픽이 증가하더라도, 장적 파일을 제공하는 것은 동적 콘텐츠를..

❓이벤트 버블링(Event Bubbling) - DOM 요소들의 이벤트 전파방식 중 하나로, 특정 요소에서 이벤트가 발생했을 때 해당 요소의 부모 요소로 이벤트가 순차적으로 전파되는 현상 => ex) 버튼을 클릭하면 해당 버튼의 클릭 이벤트 뿐만 아니라 그 버튼을 감싸고 있는 부모 요소들의 클릭 이벤트도 순차적으로 실행됨 - React는 실제 DOM 이벤트와는 약간 다른 방식으로 이벤트를 처리함 - React는 합성이벤트(Synthetic Event)라는 자체 이벤트 시스템을 사용하여 크로스 브라우징 이슈를 해결하고, 성능을 최적화 함 => but!, 이 합성 이벤트도 실제 DOM의 이벤트 버블링과 캡처링 방식을 따름 - React에서 이벤트를 처리할 때, 일반적으로 이벤트 핸들러를 특정 컴포넌트의 특정..

❓관계형 데이터베이스(Relational Database) - 관계형 데이터베이스는 테이블 형태로 데이터를 구조화함 - 각 테이블은 열(column)과 행(row)으로 구성되며, 각 행은 고유한 키로 식별됨 - 이러한 테이블들은 서로 관계를 맺을 수 있으며, 이 관계를 통해 데이터간이 연결과 조작이 가능함 ❓관계형 데이터베이스 특징 - 정형 데이터 저장 : 주로 정형화된 데이터를 저장하는데 사용 - SQL 사용: Structured Query Language(SQL)을 사용하여 데이터를 조회하고 조작함 - ACID 속성 : 데이터의 무결성을 유지하기 위해 Atomicity, Consistency, Isolation, Durability의 원칙을 따름 - 스키마 기반 : 데이터는 미리 정의된 스키마에 따라..

❓동기(Synchronous) - 순서에 맞추어 진행되기 때문에 제어하기 쉽고 직관적입니다. - 여러가지 요청을 동시에 처리 할 수 없어 효율이 낮고 작업 속도가 느릴 수 있습니다. - 동기방식의 예시로는 콜센터 종업원이 일을 처리하는 방식이 될 수 있습니다. -> 콜센터의 직원은 한 손님의 전화 응대가 끝난 후에 다음 손님의 응대를 진행 ❓비동기 (Asynchronous) - 작업이 완료되는 시간을 기다릴 필요가 없어, 자원을 효율적으로 사용 할 수 있습니다. - 다른 작업의 응답에 상관없이 진행되므로, 작업이 완료된 결과를 제어하기 어렵습니다. - 비동기 방식의 예제로는 이메일이 있습니다. -> 누군가에게 이메일을 보냈을 때 답변을 받지 않아도 이메일을 다시 보낼 수 있음 동기 방식은 작업을 순서대로..

❓이미지 최적화란? 이미지 최적화는 웹페이지의 로딩 시간을 줄이고, 사용자 경험을 향상시키며, 데이터 사용량을 감소시키기 위해 이미지 파일의 크기를 줄이는 과정을 의미함 웹 페이지의 대부분의 데이터는 이미지에서 오기 때문에, 이미지를 최적화하는 것은 성능 향상에 큰 영향을 미침 ❓이미지 최적화 방법 - 적절한 파일 형식 선택 JPG는 사진이나 풍부한 색성을 가진 이미지에 적합함 PNG는 배경이 투명한 이미지나 고해상도의 이미지에 적합함 GIF는 간단한 애니메이션에 사용됨 SVG는 로고나 아이콘 같은 벡터 기반 그래픽에 사용됨 WebP는 최신 이미지 포맷으로 JPEG, PNG보다 더 좋은 압축률을 제공하면서도 높은 품질 유지 - 압축 여러 온라인 도구나 라이브러리를 사용해 이미지 크기를 줄일수 있음 - R..

SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹사이트나 웹 페이지를 검색 엔진에서 더 높은 순위로 표시되도록 최적화하는 작업을 의미함. 즉 사용자가 특정 키워드로 검색을 했을 때 해당 사이트나 페이지가 상위로 노출되는 것을 목표로 함 높은 순위의 노출은 사이트 방문자 수를 증가시키고, 이는 다시 비지니스 성장을 도울 수 있음 ❓SEO를 진행하는 방법 - 키워드 연구: 타겟이 되는 키워드를 연구하여 어떤 키워드가 가장 중요하고 효과적인지를 판단함 - 콘텐츠 최적화: 키워드를 바탕으로 유용하고 고질적인 콘텐츠를 작성. 키워드를 자연스럽게 포함시키는 것이 중요. - 메타 태그 최적화: 페이지의 제목, 설명, 키워드 등의 메타 태그를 최적화하여 검색 엔진에 콘텐츠를 잘 이해시킴..

❓자바스크립트 - 정의 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어입니다. 웹 페이지의 동적인 특성을 구현하기 위해 널리 사용 - 장점 범용성 - 거이 모든 웹 브라우저에서 지원되므로 어디서든 실행될 수 있음 학습하기 쉬움 - 다른 프로그래밍 언어들에 비해 상대적으로 학습하기 쉬움 유연성 - 동적 타입 언어이믈 개발 시 유연하게 변수 타입을 할당할 수 있음 - 단점 타입 오류 - 동적 타입 때문에 런타임 중에 타입 관련 오류가 발생할 수 있음 코드 복잡성 - 큰 프로젝트에서는 코드가 복잡해지기 쉬워 유지보수가 어려울 수 있음 ❓타입스크립트 - 정의 타입스트립트는 자바스크립트의 슈퍼셋으로 정적 타입을 지원하는 프로그래밍 언어 컴파일 시에 타입 검사를 수행하여 오류를 찾아냄 - 장점 타입 안정성 - ..

쓰로틀링(Throttling)과 디바운싱(Debouncing)은 주로 사용자 인터페이스에서 발생하는 이벤트에 대해 불필요한 연산을 줄이기 위한 기술로 사용 ❓쓰로틀링(Throttling) - 개념: 특정 함수가 일정 시간 동안 N번 이상 실행되지 않도록 제한하는 기술임 - ex) 사용자가 스크롤을 할 때마다 이벤트 핸드러가 실행되는 것을 막기 위해, 일정 시간 동안 한 번만 이벤트 핸들러가 실행되도록 제한하는 것을 의미함 - 사용하는 이유 빠른 연속적인 이벤트(ex. 스크롤, 윈도우 리사이징)에서 과도한 연산을 줄이기 위함 서버 API 호출의 빈도를 줄이기 위해 사용하기도 함. 이를 통해 서버의 부하를 감소시킬 수 있음 ❓디바운싱(Debouncing) - 개념; 연속된 이벤트가 발생할 경우, 마지막 이벤..

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

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