Frontend/Study

45장 Promise 1. 비동기 처리를 위한 콜백 패턴의 단점 1) 콜백 헬 어떠한 함수를 실행했을 때, 해당 함수 내부의 비동기 함수가 완료되지 않았다해도, 비동기 함수를 기다리지 않고 즉시 종료 된다. ex) setTimeout 비동기 함수 let g = 0; setTimeout(() => { g = 100; }, 0); console.log(g); // 0 ex) get요청 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { return JSON.parse(xhr.response); } }; const res = get('https://tis..

12장 함수 1. 함수란 ? 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정한 것 함수 정의를 통해 생성하고, 함수 호출로 실행한다. 2. 함수를 사용하는 이유 코드의 재사용성 유지보수의 편의성 코드의 신뢰성/가독성 3. 함수 리터럴 📌 구성 요소 : 함수 이름, 매개변수 목록, 함수 몸체 일반 객체는 호출할 수 없지만, 함수는 호출할 수 있으며 고유의 프로퍼티를 갖는다. 함수는 "객체" 이다. 4. 함수 정의 1) 함수 선언문 function add(x,y) { return x + y; } console.dir(add); // console.log와 다르게 객체의 프로퍼티까지 출력 console.log(add(2,3)); ✅ 함수 선언문은 표현식이 아닌 "문" 이다. (und..

09장 타입 변환과 단축 평가 1. 타입 변환 1) 명시적 타입 변환(explicit coercion) / 타입 캐스팅 : 개발자가 의도적으로 값의 타입을 변환 하는 것 var x = 10; var str = x.toString(); // 숫자를 문자열로 타입 캐스팅 2) 암묵적 타입 변환 : 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 var x = 10; var str = x + ''; // typeof str = string 👉 명시적/암묵적 타입 변환은 기존 원시 값을 직접 변경하는 것이 아니라, 새로운 원시 값을 생성하는 것! 2. 암묵적 타입 변환 1) 문자열 타입으로 변환 1 + '2' // "12" NaN + '' // "NaN" true + ''..

01장 - 프로그래밍 프로그래밍은 요구사항의 집합을 분석해 적절한 자료구조를 이용하여 흐름을 제어하는 것 02장 - 자바스크립트란? 1. 역사 넷스케이프 커뮤니케이션즈의 모카 👉 라이브스크립트 👉 자바스크립트 2. 표준화 ECMA 인터내셔널(컴퓨터 시스템 표준화 관리)에서 ES1 ~ ES6까지 발전해옴 3. 성장 초창기 자바스크립트는 웹페이지의 보조적 역할 Ajax : 서버와 브라우저가 비동기방식으로 데이터 교환 jQuery : DOM을 더욱 쉽게 제어 V8 자바스크립트 엔진 : 더욱 빠른 성능 Node.js : 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 SPA 프레임워크 : CBD방법론을 기반한 SPA가 대중화 되면서 여러 프레임워크/라이브러리 등장 4. ECMAScript 자바스크립트 표준..

https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 1. Redux 1) 개념 : 크로스 컴포넌트, 앱 와이드 상태를 위한 상태 관리 시스템 - 우리의 상태를 변경하고 화면에 표기하는 데이터를 관리하도록 도와주는 역할 2) State의 종류 ⓐ 로컬 state : 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 👉 useState를 이용하거나 더 복잡하다면 useReducer을 사용하여 관리할수 있음 ⓑ Cross-componen..

1. 클래스 컴포넌트 - 과거에 많이 사용한 컴포넌트 선언 방식 * React 16.8이전에는 사이드 이펙트(훅)를 다루기 위해서는 클래스 기반 컴포넌트를 사용했어야 했다. // 클래스 class User extends Component { render(){ return {this.props.name}; } } // 함수형 const User = (props) => { return {props.name}; }; - props는 this예약어를 사용해야하고, Component를 상속받아야 한다. - render() 를 사용한다. class Users extends Component { constructor(){ super(); this.state = { // 상태 조각과는 상관없이 state는 객체가 된다..

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