SPA 하나의 페이지로 만들어진 어플리케이션 작은 규모 만드는게 특화되어 있음 SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 이용(비동기)해서 처리 브라우저에서 사용자가 상호작용 하면 필요한 부분만 업데이트 해서 처리 ▶ 기존은 전체 렌더링 멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됨 SPA의 단점 앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래걸리게 됨 브라우저에서 렌더링이 완료되기까지 비어있는 화면이 나오게 됨 그래서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리함 (웹팩 설정 필요) vs 리액트는 클라이언트 = CSR 라우팅 브라우저의 주소상태에 따라 다양한 화면을 보여주도록 처리하는 것 사용이..

react의 css 리액트 스타일링 태그에 직접 지정하기 일반 css파일로 적용하기 css모듈로 적용하기 css 적용순서 1. 파일 만들기 컴포넌트 파일명과 똑같이 만들어줘야 함 EX) App.js - App.css style={ {css속성: 값, css속성: 값} } 안녕하세요!! 2. 일반 CSS 문법으로 디자인 후 import로 가져오기 App.css .app_header { height: 50px; line-height: 50px; background-color: #000; margin: 0; padding: 0; } App.js import './css/App.css'; //일반css파일로 디자인 ......생략 3. CSS모듈 사용 파일은 컴포넌트명.module.css 형식으로 만듦 css파..

Component 반복 목록 요소들을 반복처리 할 때는 map 함수 이용 반드시 key props를 전달해야 함 전달하지 않으면? 1.함수형에서는 error 2.클래스형에서는 안 나옴 map의 사용 callback의 return에 실린 값(연산 결과를 처리해서)으로 새로운 배열을 만들 때 사용 map ( item => item * 10 (조건) ) ↘ func 매개변수 1개 map ( (item, index) => item * 10 (조건) ) ↘ func 매개변수 2개 2023.01.12 - [클라이언트/React] - [React] ES6 문법(let, const), spread operator, Destructuring assignment, for of문, Backtick, Arrow Functio..

state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미 state가 체인지 되면 변화를 감지하여 리렌더링을 수행 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다름 함수형 컴포넌트에서는 훅 Hook 개념을 이용해서 더욱 쉽게 사용 가능 state는 어떤 타입이건 상관x (str, number, object) state는 여러개 가능 state는 직접 수정x (setter 사용) 강제로 수정하면 리렌더링이 들어가지 X useState(초기값) - 함수형 컴포넌트 const [data(데이터), setData(함수)] = useState('초기값') 배열 반환 첫번쨰 배열 요소: 현재값=데이터값 두번째 배열 요소: 상태를 변경하는 (setter) 반환 useState: 데이터의 초기값..

React 자바스크립트 라이브러리 API는 라이브러리의 사용방법 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리 라이브러리들이 하나씩 합쳐져서 뼈대를 이루고 있는게 프레임워크 첫페이지만 가져와서 수정이 있으면 그 부분만 change 해줌 = 이런것을 react의 virtual dom이 해줌 React git에서 가져오기 node.js 설치하고 설치하고, git으로 pull 당긴 후, npm install - node.js 만들기 npm start - node start로 시작 SPA Single Page Application - 화면 하나만 가지고 처리하는 구조 어떻게? 번들러(Webpack)가 해줌 node.js를 통해 직접 설정할 수 있음. 그러나 리액..

class class 구조 일반HTML에서는 굳이 class를 사용하진 않습니다. React의 class컴포넌트를 사용한다면 알아두세요. 객체변수 멤버변수: let, var 안써도 됨, 멤버변수는 선언하지 않아도 this.변수명 사용하면 자동생성 됨 생성자: 자바스크립트 생성자는 반드시 1개 constructor(a) { this.a = a; } 함수: 변수 타입 안 적음 constructor(a) { this.a = a; } class 상속 super로 반드시 연결 프로그래머가 생성자를 만들어주면 부모의 생성자와 반드시 연결 필요 set, get, static 같은 키워드로 함수를 설정 가능 set - 값을 저장하는 용도의 메서드 get - 값을 조회해서 가지고 나오는 메서드 module export ..

JS ES6 문법 기본문법 - 리액트 쓰려면 사용 let { } 스코프, 중복 선언x var 대신 사용 - var는 함수 스코프 (차이 알기) 더보기 1. let 변수는 { } 스코프 2. var 변수는 함수 스코프 목록1 목록2 목록3 목록4 예제에서 { }라서(함수 스코프가 아니어서) i를 기억하고 있음 var 변수 console.log(i); //4가 나옴 3. var 변수는 함수 스코프 - 즉시 실행 함수로 묶어서 var i를 함수 스코프로 바꿈 목록1 목록2 목록3 목록4 즉시 실행 함수로 묶으면서 함수 안에서만 기억되므로 = var 변수를 지역변수로 만들어 줘서 제대로 된 결과값 나옴 4. let 변수는 { } 스코프 - { } 안에서만 기억함 목록1 목록2 목록3 목록4 제대로 된 결과값 나..

ES5 ▶ XMLHttpRequest, fetch(), ajax(), Axois 등 XMLHttpRequest: ajax 프로그램에 사용할 수 있는 객체 AJAX (비동기 통신) Asynchronous Javascript ans XML 웹페이지의 이동 없이 필요한 데이터만 전송하는 기술 ex) 구글맵에서 특정 지역을 클릭하면, 주소는 변하지만 화면이 reload 되지는 않음 비동기: 순차적으로 진행하지 않음 = 함수가 끝날때까지 기다리지 않음 ↔ 동기: 순차적으로 실행 (지금까지 배웠던 함수) API Application Programming Interface 기능을 사용할 때 너무 어렵고, 많은 것을 해야 하기 때문에 사용방법을 정의해서 줄테니 너는 그대로만 사용해라~~ fetch API 비동기 방식을..

BOM 브라우저 객체 모델(Browser Object Model) = 내장객체 window, location, history, document 등 포함 2022.12.29 - [클라이언트/JavaScript] - [JavaScript] 이벤트 핸들러, this, BOM, DOM [JavaScript] 이벤트 핸들러, this, BOM, DOM 이벤트 핸들러 화면에서 클릭이나, 동작시 발생하는 동적인 기능 이벤트: 사용자의 동작 / 핸들러: 함수 이벤트 앞에 on 붙음 태그 - 스크립트의 이벤트 연결 방식: 인라인 이벤트 모델 / 기본 이 j-won950101.tistory.com window 객체 웹브라우저에 대한 전반적인 정보 취득이나 제어에 관련된 객체 window.open() - 새 창을 띄워주는 ..

form 객체 document 객체의 하위 객체 중 하나이므로 유일하게 name 속성으로 선택 가능 document.폼name.요소명 document.body; = document.querySelector("body"); 속성값 설명 value input, textarea 요소의 value값 반환 checked checkbox, radio 체크되어 있으면 true, 아니면 false disabled 요소가 활성화 상태이면 false, 비활성화 상태이면 true length 요소의 개수 focus() 요소의 포커스 맞춤 blur() 요소의 포커스 없애줌 submit() form의 값을 전송 javascript로 form 전송 가능 reset() form의 값을 초기화 "input[ type='submit'..

이벤트 객체 모든 이벤트에서 이벤트 객체 사용 가능 (꼭 다중 이벤트 상황이 아니어도 가능) 이벤트 발생시 실행되는 함수의 (인자값, 첫번째 매개변수)로 현재 실행되는 event 객체를 넣어줌 이벤트 객체의 기능 stopPropagation() 이벤트 전파를 막음 (버블링 중단하기) 굳이 사용x target 이벤트를 적용한 타겟 속성 클릭한 대상, 선택한 것 currentTarget 실제 이벤트가 걸려있는 타겟 속성 부모의 위치 preventDefault() 태그의 고유 이벤트 제거 a, submit 태그 같은 경우 모달창 띄우고 싶을 때 새로운 페이지로 안 넘어가게끔 이벤트 전파 (a.k.a 상속) 부모에 하나의 이벤트만 걸어 놓으면, 모든 이벤트가 동일하게 자식으로 위임 li에 일일히 이..

Node element = node = tag(태그) console.dir(태그); ▶ 어떤 것을 사용할 수 있는지 나타냄 Element 들어간 키워드가 text제외 순수한 태그만 선택해줌 node(tag) 삭제 remove() removeChild(삭제할 자식 노드 선택) 자식 태그의 인덱스 번호를 지울 때 사용 더보기 step 1. 사용자 이름과 할일 목록 만들기 step1 input은 지우는게 아니라 display를 제어하세요 할일 목록 만들기 확인 확인 step 2. 할일 목록 삭제/전체삭제 및 위, 아래 이동 인라인 이벤트 - remove, up, down 함수를 만듦(매개변수 this 사용) 전체삭제시 ul을 지워버리면 다시 목록을 쓸 수 없으므로 .list li를 삭제해야 함 step1 in..