본 글은 『Learning JavaScript Design Patterns』  책을 기반으로 작성한 글 입니다.https://www.yes24.com/Product/Goods/129374961 자바스크립트 + 리액트 디자인 패턴 - 예스2420가지 이상의 디자인 패턴으로 배우는 최신 웹 개발유지보수가 쉬운 구조적인 코드를 만들고 싶은가? 최신 웹 개발 모범 사례를 참고하고 싶은가? 그렇다면 『자바스크립트 + 리액트 디자인 패www.yes24.com  Chapter 01 - 디자인 패턴 소개 "좋은 코드는 후임 개발자에게 보내는 러브레터와도 같다!" 디자인 패턴은 코드를 체계화 하기 위한 공통적인 패턴을 제공하여 코드를 쉽게 이해하도록  도와준다.  Chapter 02 - 패턴성 검증, 프로토 패턴 그리고..

13장 스코프  1. 스코프란: 식별자의 유효한 범위 식별자란, 변수나 함수의 이름 등을 의미한다.식별자는 어떠한 값을 구별할 수 있어야 하므로 유일해야 한다. 즉 중복될 수 없다.자바스크립트에서는 스코프라는 개념을 통해 식별자의 중복을 방지한다.렉시컬 환경 : 스코프를 구분하여 식별자를 등록/관리하는 저장소(상위 스코프에 대한 참조를 관리함)실행 컨텍스트 : 현재 실행중인 코드에 대한 데이터 구조를 담고있는 동적인 데이터 구조스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에서는 다른 이름의 식별자를 사용할 수 있다즉, 스코프는 네임스페이스다 👍 2. 스코프의 종류1) 전역 스코프- 전역에서 선언된 변수는 전역 스코프를 가진다.- 전역 변수는 어디서든지 참조할 수 있다. 2) 지역 스코프- 함수 ..

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

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만큼 차지하고있다... 일단 내가 겪었던 문제의 해결방법은 위와 같은데, 혹시나 도저히 모르겠다 !!! 하는 분들을 위해 노가다 방법이있다. 모든 요소를 일단 주석처리하고.. 하나하나 주석 풀어보면서 뭐가 여백을 만들어내는지 찾아내는 것이다. 보통 하다보면 뭐땜에 이상한 여백이 생기..