1. JSON(javascirpt object notation) 1) 정의 : 자바스크립트 객체 표기법 ! 2) 특징 - 서버와 웹페이지간의 데이터를 주고받을 때 많이 사용 - key와 value의 쌍으로 이루어진 데이터 객체를 전달하기 위해 만들어진 포맷 - 예전에 쓰던 xml을 대체하여 만들어졌다.(xml을 굉장히 복잡하다 !) - 계층적인 구조를 가지며 간결하고 짧다 * xml과 json 비교 > xml : 엔드태그를 사용하여 데이터 표현 Izzy Siamese 6 yes no Izz138bod Colin Wilcox > json : 엔드태그가 필요없다 3) 구조 let people = [ {"firstName" : "길동", "lastName":"홍"}, {"firstName" : "순신", "l..

https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 1. Side Effect란? - 애플리케이션에서 일어나는 모든 것 - 리액트에서는 state값이 변하는 등의 작업이 일어날 때 리렌더링 됨 - 만약 사이드 이펙트가 계속 리액트에 관여하게 된다면 무한 루프에 빠질 가능성이 크다. - 이것을 해결하기 위한 방법으로 useEffect 가 있다. 1) useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook useEff..

https://www.udemy.com/course/best-react/ 1. jsx 제한 사항 및 해결 방법 - 루트 요소는 1개여야만 한다 - 그 이유는 자바스크립트 자체가 원래 하나의 요소만 반환하기 때문 // 자바스크립트에서 아래 문법은 불가능 하다 return ( React.createElement('h2',{}, 'hi'); React.createElement('h2',{}, 'hi'); ); 1) 해결 방법 ⓐ 여러개의 요소를 하나의 태그(아무태그)로 감싼다. => div soup 발생, 불필요한 렌더링 과정 실행 * div soup : div태그가 중첩되어 스타일링이 깨질 수도 있고, 속도가 느려질 수도 있다. ⓑ 배열형태로 반환한다. => 경고 발생 키가 필요하기 때문 그래서 이상적인 해..

https://www.udemy.com/course/best-react/ * css 파일로 빼서 jsx파일에 import하는 방식 : 파일 내 모든 컴포넌트 요소에 영향을 미침 1. 동적 스타일 1) 인라인 스타일 hi - 라벨의 색상을 state 값에 따라서 동적으로 적용 가능 - 인라인 style은 최우선순위기 때문에 css파일을 오버라이드 함 2) css 클래스 .className1.className2 { color: black; } - 템플릿 리터럴을 이용하여 동적으로 클래스 이름 추가 가능 - css 파일에서 클래스 이름에 따른 css를 설정해주면됨 2. styled components - 컴포넌트 별 스타일을 지정할 수 있는 패키지 npm install --save styled-componen..

【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 배열 동적으로 렌더링 - 상위 컴포넌트에서 동적으로 변화하는 배열을 props로 받았을 때, 하위 컴포넌트에서 동적으로 렌더링 할 수 있다. - map함수를 이용하여, jsx를 리턴하도록 하면 된다. - key를 지정하지 않으면, 웹페이지에서 경고가 난다. (오류는 안남) * 경고가 나오는 이유는 새로운 아이템이 추가될 때, 어느 인덱스에 추가가 될지 리액트가 모름 그래서 리액트가 추가될 배열의 모든 상태를 확인하는 작업이 생겨서 비효율적임 const Expense = (props) => { return( {props.items.map((expense) => ( //props.items..

【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 이벤트 핸들러 작성(클릭 시 이벤트) const clickHandler = () => { console.log("Clicked!"); // 클릭 시 실행되는 함수 작성 }; return( Change! // clickHandler() xxx ); ⭐ 함수를 호출할 때 이름만 작성해야한다. 함수 뒤에 괄호를 붙이면 jsx 코드가 리턴될 때 함수가 실행된다. 2. State ! ⭐⭐⭐⭐⭐ - state를 사용하기 위해선 react의 useState를 가져와야 한다. import React, {useState} from "react"; 1) state 사용 방법 - 컴포넌트 함수 내에서만 사..

【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 리액트를 사용하는 이유? - 리액트는 모든 요소들이 컴포넌트로 이루어져 있음 * 컴포넌트 : 재사용이 가능하고, 우려사항을 분리할 수 있음(=반복이 없고, 코드를 작고 관리할 수 있는 규모로 유지) 👉 생산성과 유지보수가 용이하다 👉 복잡하고 동적인 웹 어플리케이션에서 ui를 동적으로 나타내기 위해서는 많은 상태를 관리해야하는 부담이 생기는데 react가 이것을 해결해 준다. 👉 virtual DOM을 이용한 빠른 렌더링이 가능하다. * react/vue/angular중 선택해야하는 경우 [React] 내가 React를 선택한 이유 (tistory.com) [React] 내가 React..

【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. let과 const 1) let : es6 이전에 쓰던 var과 같음, 변수 2) const : 상수(처음 할당한 후 다시는 재할당 불가능) 2. 화살표 함수 : es6부터 쓰는 새로운 함수 선언 방식 const/let 함수이름 = (매개변수) => { // 함수 내용 } 함수이름(); // 함수 호출 아래와 같은 방식으로 리턴문을 생략가능하다 const mutiply = (number) => number*2 // number*2가 리턴됨 3. Exports, Imports 1) Exports : 다른 js파일로 내보내기 export default person; // default ex..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 연결 선택자 1. 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 - 특정요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 함 - 기준 요소를 기준으로 한 단계 아래 요소는 자식요소, 그 요소의 한 단계 요소는 손자요소 1) 하위 선택자 - 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택함 section p { ..... } 상위요소 하위요소 2) 자식 선택자 - 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자 section > p { .... } 부모요소 > 자식요소 2. 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자 1) 인접 형제 선택자 - ..