프론트엔드 (9) 썸네일형 리스트형 [React] Create React App으로 설치된 기본 구조 기본 폴더 구조 필수 파일이름이 변경되면 리액트 애플리케이션이 정상 작동하지 않으므로 주의가 필요합니다.public/index.html : 애플리케이션이 로드될 HTML 템플릿입니다. 모든 리액트 컴포넌트의 컨테이너 역할을 하며, 주로 div 요소에 id root를 통해 리액트가 렌더링됩니다.src/index.js : 리액트 앱의 자바스크립트 엔트리 포인트로, 모든 컴포넌트의 루트이며 ReactDOM.render() 메서드가 호출되는 시작 지점입니다. 주요 폴더 및 파일 설명1. public/ 폴더정적 파일들이 들어가는 폴더로, HTML 템플릿과 같은 리소스를 포함합니다. 이 폴더에 있는 파일들은 직접 URL로 접근할 수 있습니다.index.html: 애플리케이션이 로드될 때 사용되는 HTML 템플릿입.. [React] 리액트 컴포넌트 리액트에서 컴포넌트(Component)는 앱을 구성하는 기본적인 단위로, 재사용성과 독립성을 갖춘 UI 요소입니다. 이 컴포넌트들을 조합하여 더 큰 단위의 UI를 만들고, 페이지를 구성할 수 있습니다. 컴포넌트는 각각 독립적인 기능과 스타일을 포함할 수 있어, 유지보수성과 가독성을 높이며, 리액트 애플리케이션을 유연하게 구성할 수 있습니다.리액트 컴포넌트의 특징재사용 가능성: 컴포넌트는 독립적으로 구성되므로 여러 곳에서 재사용할 수 있습니다. 같은 컴포넌트를 다양한 곳에서 사용할 수 있어 코드의 일관성을 높이고, 반복 작업을 줄일 수 있습니다.분업 개발: 여러 개발자가 각각의 컴포넌트를 동시에 개발할 수 있습니다. 컴포넌트 단위로 작업하므로, 협업 시 서로 간섭 없이 병렬 작업이 가능합니다.상태와 생명주.. [JS] var, let, const 특징 JavaScript의 변수 선언: var, let, constJavaScript에서는 변수를 선언할 때 var, let, const를 사용할 수 있습니다. 이들은 각기 다른 스코프(범위)와 특성을 가지며 코드의 동작 방식에 영향을 미칩니다. 아래는 각각의 특징과 사용 방법을 정리한 내용입니다. varvar는 ES6 이전의 기본 변수 선언 방식입니다. 하지만 스코프 문제와 호이스팅(hoisting) 특성으로 인해 주의해서 사용해야 합니다. var의 스코프 (범위)var는 함수 스코프를 가집니다. 즉, 함수 내에서 선언된 변수는 해당 함수 안에서만 유효합니다.함수 외부에서 선언된 var 변수는 전역 변수가 되어 프로그램 전체에서 접근할 수 있습니다.var hello = 'hello'; // 전역 변수fu.. 상대 경로, 절대 경로 경로라는 것은 특정 파일의 위치를 말합니다이때 경로를 2가지로 나눌 수 있습니다상대경로 : 현재 위치를 기준으로 파일, 리소스의 위치를 나타냄절대경로 : 현재 위치가 어디에 있든 정확한 위치를 나타냄예시: 현재 위치가 남산타워 케이블카 승강장에 있을 때절대경로절대경로는 웹 사이트의 파일이 인터넷 상의 정확한 위치를 나타냅니다.서울특별시 용산구 남산공원길 105상대경로상대경로는 현재 파일의 위치를 기준으로 다른 파일이나 리소스의 위치를 나타냅니다.케이블카를 탑승 후 하차만약 현재 위치가 부산역일 때절대경로서울특별시 용산구 남산공원길 105상대경로기차 탑승서울역 하차서울역버스환승센터(5번승강장)까지 이동402번 버스 탑승보성여중고입구 정류장 하차남산서울타워까지 걷기이렇게 현재 위치에 따라 경로가 달라지는 것.. [HTML] head태그 안에 들어가는 태그 알아보기 이번 글은 head 태그(페이지의 정보) 안에 들어가는 태그들에 대해 알아보겠습니다.1. link 태그 특징단일 태그: 태그는 닫는 태그 없이 단독으로 사용됩니다.rel 속성: Relationship의 약자로, 해당 속성은 가져올 문서와의 관계를 의미합니다. (예: stylesheet, icon 등)href 속성: 가져올 문서의 경로를 의미합니다. 상대 경로 또는 절대 경로로 설정할 수 있습니다. 2. script 태그특징src(Source) 속성: 외부 JS 파일을 연결할 때 사용합니다.내부 스크립트 작성 가능: HTML 문서 내에서 직접 script를 작성할 수 있습니다.3. meta 태그메타 데이터라는 말을 들어보셨을 겁니다. 메타 데이터란 데이터의 정보, 즉 데이터에 대한 데이터를 의미합니다... [HTML] CSS, JS 연결하기 HTML 파일과 CSS 파일 연결하기index.html Hello World main.cssdiv { color: orange; font-size: 50px;} 현재 HTML 파일과 CSS 파일은 연결되지 않은 상태입니다. head 태그에 CSS 연결하기head 태그는 현재 HTML의 정보를 나타내는 태그입니다. HTML 파일에 외부 파일을 연결할 때는 head 태그를 주로 사용합니다.head 태그 안에 CSS 파일 연결하는 방법 Hello World 연결이 되지 않을 경우 확인할 사항파일명이 잘못되었을 때주소를 잘못 입력했을 때입력 후 저장하지 않았을 때파일 위치와 파일명을 꼭 확인해주세요. 연결이 되었을 때이렇게 출력이 되는 것을 확인하실 수 있습니다. 의 역할 태그는 외부에 있는 파일을 .. [HTML] HTML, HEAD, BODY 태그 HTML 문서의 기본 구조HTML 문서는 태그로 시작하여 태그로 끝납니다.시작 태그: 종료 태그: 이 태그는 HTML 문서의 전체 범위를 정의하며, 브라우저에 문서의 시작과 끝을 알려줍니다.HTML 문서의 구성문서의 전체 범위 ( 태그) 태그: HTML 문서의 시작과 끝을 정의합니다. 문서 전체를 감싸는 태그입니다.: HTML5 문서임을 선언합니다. 브라우저에 문서가 HTML5 표준을 따르도록 알려줍니다. 문서의 정보를 나타내는 : 문서의 문자 집합을 정의합니다. 보통 UTF-8을 사용하여 다양한 문자를 지원합니다.: 모바일 장치에서의 표시를 조정합니다.: 브라우저 탭에 표시될 문서의 제목을 정의합니다. 태그는 문서의 메타데이터를 포함합니다. 이 부분은 웹 페이지에서 직접 보이지 않으.. [HTML] <!DOCTYPE html> HTML의 태그 태그는 HTML 문서의 첫 번째 줄에 위치하며, 문서의 HTML 버전을 브라우저에 알리는 역할을 합니다. 이 태그는 문서가 어떤 HTML 표준에 따라 해석되어야 하는지를 브라우저에 지시합니다.HTML 버전HTML은 여러 버전이 있으며, 각각의 버전은 HTML의 문법과 기능을 정의합니다. 주요 HTML 버전은 다음과 같습니다:HTML 1.0: HTML의 첫 번째 버전, 기본적인 문서 구조를 정의합니다.HTML 2.0: 표준화된 HTML 문서 작성법을 제공하며, 폼과 테이블 같은 기능을 추가했습니다.HTML 3.2: 스타일 시트와 스크립트 지원을 포함하여 웹 페이지 디자인을 향상시켰습니다.HTML 4.01: 구조와 표현을 분리하고, XML 기반의 XHTML 문서로의 전환을 도왔습니다.XHT.. 이전 1 2 다음
