css를 작성하다보면 왜인지 모르게 안잡히는 여백들이 몇가지 있다. 1. flex로 레이아웃 설정 안했을 경우! - div사이에 font-size만큼의 빈 여백이 생긴다. font-size : 0 해주면 해결은 된다. 2. 전체 요소 중 이미지들 크기 확인해보기 ! 이미지 크기 width랑 hight를 둘다 설정해 줘야 한다. width만 설정했을때 height도 줄어든것처럼 보이는데 원인을 찾다보면 이미지가 원래 height만큼 차지하고있다... 일단 내가 겪었던 문제의 해결방법은 위와 같은데, 혹시나 도저히 모르겠다 !!! 하는 분들을 위해 노가다 방법이있다. 모든 요소를 일단 주석처리하고.. 하나하나 주석 풀어보면서 뭐가 여백을 만들어내는지 찾아내는 것이다. 보통 하다보면 뭐땜에 이상한 여백이 생기..

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..