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() - 새 창을 띄워주는 ..