rosie

1.create-react-app 주요 개념 설명Create React App한번에 React 개발 환경을 구성해주는 환경meta에서 만든 보일러플레이트로 공식적으로 지원되는 Single Page React Application을 만드는 방법 중 하나따로 React 환경을 구성할 필요없이 최신의 빌드설정을 제공하고 React의 개발 초기에 필요한 여러 라이브러리 및 패키지등을 세팅해줌굉장히 간편하다는 장점이 있음장점하나의 명령어로 react 프로젝트를 손쉽게 세팅 가능초기 개발 시간 단축, 개발 생산성 향상React 앱 개발에만 집중할 수 있음(babel, webpack 등 심화된 관리 x)단점빌드 설정을 커스터마이징하기 어려움, 따로 추가적인 수정이 필요함리액트 앱 구조에 대해서 이해하기 어려울 수 있..

📌 SCSS SCSS는 Sass3 버전부터 새롭게 등장 SCSS는 Sass의 모든 기능을 지원하는 Superset SCSS는 CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있어서 편리함 📚 CSS의 단점 CSS는 복잡한 언어는 아니지만 작업이 커지거나 코드가 많아지면 불편함이 생김 -> 유지보수가 어려워진다는 단점이 있음 선택자(Selector)를 만들때 매번 불필요한 부모요소 선택자를 적어야 함 funtion같은게 없으니, 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 함 결국에는 중복되는 코드가 많아 코드 줄수가 길어져 유지보수에 마이너스적인 요소가 됨 📚 SASS(Synthetically Awesome StyleSheets) Sass는 코드의 재활용성을 올리고..

📌 가상 요소(Pseudo-elements)란? - CSS 가상 요소는 선택자에 추가하는 키워드로 선택한 요소(elements)의 일부에만 스타일을 적용할 수 있고 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용할 수 있음!! - HTML에 새로운 엘리먼트를 추가한 것처럼 동작함 - 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함 📕 가상 요소 문법 선택자::의사요소이름 {속성: 속성값;} - 하나의 HTML 요소에 여러개의 의사 요소를 동시에 적용 가능함 ❗❗ 주의점 - CSS1과 CSS2에서는 하나의 콜론(:)으로 가상 요소를 나타내어 CSS3를 지원하지 않는 브라우저에서는 적용되지 않을 수 있음 - CSS3에서는 가상 클래스는 하나의 ..

❓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를 진행하는 방법 - 키워드 연구: 타겟이 되는 키워드를 연구하여 어떤 키워드가 가장 중요하고 효과적인지를 판단함 - 콘텐츠 최적화: 키워드를 바탕으로 유용하고 고질적인 콘텐츠를 작성. 키워드를 자연스럽게 포함시키는 것이 중요. - 메타 태그 최적화: 페이지의 제목, 설명, 키워드 등의 메타 태그를 최적화하여 검색 엔진에 콘텐츠를 잘 이해시킴..

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