FrontEnd11 리액트 프로젝트 기초 세팅 기본 세팅1. 런타임 도구 선택NodeJS vs Bun 2. 프로젝트 세팅 방식 선택CRA vs Vite 3. 언어 선택Js vs Ts ✅ CRA (Create React App)무엇?React 팀이 공식 제공하던 React 앱 보일러플레이트 생성 도구.내부적으로 Webpack 기반.npx create-react-app my-app 으로 시작.특징한때 React 입문 표준.설정 숨겨져 있어 커스터마이즈 어려움 (eject 필요).지금은 거의 레거시로 취급 → React 공식 문서도 Vite나 Next.js 권장.✅ Vite무엇?Evan You(Vue.js 만든 사람)이 만든 프론트엔드 빌드 도구 & 개발 서버.개발 서버: esbuild 기반 → 기동/핫리로드 속도 빠름.프로덕션 빌드: Rollup 기반... 2025. 9. 7. 5/19 - JQuery, Ajax 목차Ajax (Asynchronous Javascript And Xml)비동기비동기로 Ajax 요청 값 주고받기 let req = new XMLHttpRequest(); req.open('get','https://jsonplaceholder.typicode.com/posts>') req.send(); console.log(req.response) req.onreadystatechange = function() { console.log('ready State 상태값 = ' + this.readyState) console.log('status 상태값 = ' + this.status) if(this.readyState === 4){ .. 2025. 6. 1. 5/16 - DOM 요소 접근, JQuery 목차DOM 요소 접근기본형documnet.getElementById(”id명”)document.getElementsByclassName(”class명”)document.getElementsByTagName(”태그명”)TagName과 class는 여러 개를 가져올 수 있으므로, Element뒤에 s를 붙여야 한다.하나만 가저오는 메서드document.querySelector(선택자)모든 요소를 가져오는 메서드document.querySelectorAll(선택자)웹 요소의 내용에 접근하기요소.innerText하나만 가져옴요소.innerHtml요소.textContent다 가져옴text 관련은 내용 바꿀 때html 관련은 html태그가 포함된 내용을 바꿀 때이벤트preventDefault()이벤트를 취소할 수 .. 2025. 5. 17. 5/15 - JavaScript 문법 목차변수let변수를 선언하고 값을 할당할 수 있음const상수를 선언, 값 재 할당 불가능자료형Number숫자문자열작은 따옴표나 큰 따옴표로 나타냄배열객체undefined자료형이 지정되지 않았을 때의 상태변수를 선언만 한 후 값을 할당하지 않은 변수null값이 유효하지 않은 경우템플릿 리터럴문자열과 변수 식을 섞어서 하나의 문자열을 만드는 표현 형식논리형Boolean 유형참 / 거짓자료 형 변환자바 스크립트는 느슨한 자료형 체크**typeof 변수**를 통해 자료형 체크 가능자료형 변환 함수Number()parseInt()parseFloat()String()Boolean()비교 함수 VAR권장하지 않는 이유함수 스코프함수 레벨빠뜨리면 전역으로 실행재 선언이 가능하여 위험함수 내 전역 변수 사용은 지양le.. 2025. 5. 17. 5/14 - flex, 반응형 웹 속성, CSS 그리드 레이아웃, 자바 스크립트 목차마진과 갭의 차이마진인접한 요소가 없어도 적용갭인접한 요소가 있어야만 적용플렉스 박스화면 크기가 달라지면 그에 맞춰 플렉스 항목을 늘리거나 줄일 수 있는 유연한 상자를 활용해 레이아웃을 만듬CSS 그리드 레이아웃가로와 세로 방향 모두 사용항목은 1차원(flex), 그리드는 2차원부모 컨테이너로 묶어주어야 함정적으로 만들어진 행의 높이를 지정 1 2 3 4 5 6 동적으로 만들어진 행의 높이 지정 1 2 3 4 5 6 repeat와 함께 사용하여 원하는만큼의 열을 채울 수 있음자동 채우기auto-fit남은 공간 .. 2025. 5. 17. 5/13 - CSS, BOX, 이미지와 그라데이션, 반응형 웹 목차웹 문서의 레이아웃 만들기블록 레벨과 인라인 레벨을 바꾸는 display 속성종류block블록 레벨 요소로 표시 (한 줄 뛰어넘음)inline인 라인 레벨 요소로 표시 (한 줄)inline-block인 라인 레벨처럼 나란히 배치하지만 블록 레벨처럼 너비와 높이 지정 가능none해당 요소를 화면에 표시하지 않음영역도 사라짐hidden영역은 남아 있음 안녕하세요 반갑습니다 저는 홍길동 입니다.왼쪽이나 오른쪽에 배치하는 float 속성좌/우 차례대로 나열예를 들어, 그림 옆에 글이 나열 됨 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero nisi, culpa excepturi id laborum dolores! Expli.. 2025. 5. 17. 이전 1 2 다음 728x90 반응형
