본문 바로가기

전체 글

(220)
20210713 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit05 : 글 수정, 글 삭제 (Update, Delete) 구현 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit05 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210714 JavaSciprt DeepDive 12 : Symbol, 이터러블(Iterable), 스프레드 문법, 디스트럭처링 할당(구조 분해 할당) JavaScript Deep Dive 12 📄 용어 및 중요사항 정리 Symbol 심벌 변경 불가능한 원시 타입의 값 다른 값과 중복되지 않는 유일무이한 값 이름 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용함 심벌 값의 생성 Symbol 함수 : Symbol 함수를 호출하여 심벌을 생성함 (다른 원시값의 경우 리터럴 표기법을 통해 값 생성) new 연산자와 함께 호출하지 않음 (인스턴스가 아니라 원시값을 생성하는 것임) 생성된 심벌 값은 외부로 노출되지 않아 확인 불가함 Symbol(description) : Symbol 함수의 인수로는 생성된 심벌값에 대한 설명인 문자열을 전달 가능함 설명 문자열이 같더라도 언제나 Symbol은 변경 불가한 유일무이한 값을 줌으로서 다름 생성된 심벌 값에 ..
20210713 JavaSciprt DeepDive 11 : Number, Math, Date, RegExp, String (생성자 함수, 프로퍼티, 메서드 등...) JavaScript Deep Dive 11 📄 용어 및 중요사항 정리 Number Number 생성자 함수 new Number(인수) : [[NumberData]] 내부 슬롯에 숫자인 인수를 할당한 Number 래퍼 객체 생성 숫자 인수 없이 호출시, 기본으로 내부 슬롯에는 0을 할당 [[PrimitiveValue]]와 [[NumberData]]는 같음 인수가 숫자가 아닌 값 전달시, 숫자로 강제 변환후 내부슬롯에 할당 문자열 숫자 -> 숫자로 변환되어 할당 문자열 문자 -> NaN으로 변환되어 할당 Number(인수) : 인스턴스가 아닌, 숫자를 반환(명시적 타입변환) 문자열 숫자 -> 숫자 불리언 -> 숫자 Number 프로퍼티 Number.EPSILON : 1과 1보다 큰 숫자 중에서 가장 작은 숫..
20210712 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit04 : Navigation, 글 작성, 글 가져오기 구현 (Create, Read 구현) 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit04 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210712 JavaSciprt DeepDive 10 : 배열 고차 함수, sort, forEach, map, filter, reduce, some, every, find, findIndex, flatMap JavaScript Deep Dive 10 용어 및 중요사항 정리 배열 고차 함수 표시 Callback return sort Array.prototype.sort(comparisonCallback) 음수(첫 인수), 양수(두번째 인수), 0(정렬X) 정렬된 배열을 반환 forEach Array.prototype.forEach(Callback, bindThis) Callback(value, index, array) undefined map Array.prototype.map(Callback, bindThis) Callback(value, index, array 새로운 배열을 반환 filter Array.prototype.filter(Callback, bindThis) Callback(value, index..
20210711 JavaSciprt DeepDive 09 : 배열, JS배열, 배열 생성, CRUD, 배열 메서드, 스택(stack) 구현, 큐(queue) 구현 JavaScript Deep Dive 09 용어 및 중요사항 정리 배열 메서드 내용 return new Array() 배열 생성 (생성자 함수) Instance Array.of(itemValue) 배열 생성 전달된 요소로 구성된 배열 Array.from((유사배열, 이터러블 객체), Callback) 배열 변환 및 가공 객체를 배열로 만들고 callback 반환값으로 구성된 배열을 반환 Array.isArray(인수) 전달된 인수가 배열인지 아닌지 확인 true, false Array.prototype.indexOf(searchValue, startSearchIndex) 요소검색 첫번째로 검색된 요소의 인덱스 Array.prototype.includes(searchValue, searchStartInde..
20210710 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit03 : Auth 재편성, 회원가입 구현, Auth 관련 사항 마무리 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit03 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Social 로그..
20210709 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit02 : 로그인 옵저버(리스너), 로그인 구현(Social, Email 로그인) 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit02 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Social 로그..
20210708 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit01 : 프로젝트 시작, 기본 환경설정, 필요한 폴더 구조 및 파일 Template 작업, Router 연결 구현 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit01 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Social 로그..
20210709 JavaSciprt DeepDive 08 : ES6 메서드(축약표현), 화살표 함수, Rest 파라미터, 매개변수 기본값 JavaScript Deep Dive 08 용어 및 중요사항 정리 ES6 함수의 추가 기능 자바스크립트에서 ES6 이전 함수는 다양한 방식으로 호출이 가능함 -> 함수의 구분이 없음, 대부분이 프로토타입 객체를 생성함 -> 실수 유발, 성능 저하 일반 함수 호출 생성자 함수 호출 메서드로서 호출 callble(호출할 수 있는 함수 객체) 이면서 contructor(인스턴스를 생성할 수 있는 함수 객체) 임 함수 구분 constructor prototype super arguments 일반함수 (함수 선언문, 표현식) O O X O 메서드 X X O O 화살표 함수 X X X X ES6 메서드 (메서드 축약 표현) 메서드 : 과거 : 객체에 바인딩된 함수를 일컫는 의미 ES6 : 메서드 축약 표현으로 정의..
20210708 JavaSciprt DeepDive 07 : 클래스, 클래스 필드, private, static 필드 정의 제안, 클래스 상속, super, 상속 클래스의 인스턴스 생성과정, 표준빌트인 생성자 함수 확장 JavaScript Deep Dive 07 용어 및 중요사항 정리 클래스 자바스크립트는 프로토타입 기반의 객체지향 언어지만, 클래스를 제공함 그렇다고 클래스를 제공한다고 해서 새로운 클래스 기반 객체지향 모델을 제공하려는 것은 아님 단지 새로운 객체 생성의 매커니즘일 뿐임 클래스와 생성자 함수 모두 프로토타입 기반의 인스턴스를 생성하지만, 정확히 동일하게 동작하지는 않고 클래스만 제공하는 기능도 있음 클래스 vs 생성자 함수 클래스 생성자 함수 new 연산자 없이 호출시 에러 발생 new 연산자 없이 호출시 일반 함수로 호출 extends와 super 키워드 제공 O extends와 super 키워드 제공 X 호이스팅 발생하지 않는 것 처럼 동작 함수선언문(함수 호이스팅), 함수표현식(변수 호이스팅) 암..
20210707 JavaSciprt DeepDive 06 : 실행 컨텍스트(동작방식), 소스코드, 렉시컬 환경, 클로저, 클로저 활용, 캡슐화, 정보은닉, 접근제한자 JavaScript Deep Dive 06 용어 및 중요사항 정리 실행 컨텍스트 실행 컨텍스트의 구조를 이해하려면 해당 책의 그림을 보는게 빠름 소스코드: 실행 가능한 코드로 실행 컨텍스트를 생성하는 역할 소스코드의 타입 전역 코드 : 전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등의 내부코드는 포함되지 않음 전역 코드에서 실행 컨텍스트 역할 전역 스코프 생성 : 전역 변수 관리 전역 객체와 연결 : 전역 변수, 전역 함수를 전역 객체와 연결 함수 코드 : 함수 내부에 존재하는 소스코드, 함수 내부 중첩함수, 클래스 등의 내부 코드는 포함 되지 않음 함수 코드에서 실행 컨텍스트 역할 지역 스코프 생성 : 지역변수, 매개변수, arguments 객체 관리 전역 스코프와 연결 : 스코프 체인을 연..
20210706 JavaSciprt DeepDive 05 : Strict mode, 암묵적 전역, 표준 빌트인 객체, 래퍼객체, 전역객체, 빌트인 전역 프로퍼티, 빌트인 전역 함수, this 키워드, this 바인딩, apply, call, bind JavaScript Deep Dive 05 용어 및 중요사항 정리 Strict mode 암묵적 전역 : 변수 키워드 선언 없이 변수에 값을 할당하는 경우, 스코프 체인에 변수가 없음에도, 암묵적으로 전역객체에 해당 변수 식별자를 프로퍼티로 동적으로 생성함 암묵적 전역에 의해 전역 객체에 추가된 프로퍼티는 변수가 아니며, 호이스팅이 발생하지 않고, delete연산자로 삭제가 가능하다 (전역변수는 delete 연산자로 삭제 불가함) Strict mode : 자바스크립트 언어의 문법을 좀더 엄격하게 적용하여 오류를 발생시킬 가능성이 높거나, js엔진의 최적화 작업에 문제를 일으킬수 있는 코드에 대해 명시적인 에러를 발생시킴 'use strict;'를 전역 선두 또는 함수 몸체의 선두에 추가하여 ..
20210706 JavaSciprt DeepDive 04 : 프로토타입 객체, 생성시점, 생성방식, 교체, 체인, 프로퍼티 섀도잉, 교체, instanceof 연산자, 직접상속, 정적 프로퍼티/메서드, 프로퍼티 존재 확인(in 연산자, hasOwnPrope.. JavaScript Deep Dive 04 용어 및 중요사항 정리 프로토타입 멀티 패러다임 프로그래밍 언어 : 자바스크립트는 명령형, 함수형, 프로토 타입기반 객체지향 프로그래밍을 지원하는 언어임 객체지향 프로그래밍 : 독립적인 객체의 집합으로 객체의 상태 데이터(프로퍼티), 상태를 조작하는 동작(메서드)을 하나의 논리적 단위로 묶어 프로그램을 표현하려는 프로그래밍 패러다임 추상화 : 필요한 속성만 간추려 내어 표현하는 것 객체 : 속성을 통해 여러개의 값을 하나의 단위로 구성한 복합적인 자료구조 상속 : 어떤 객체의 프로퍼터, 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것 자바스크립트는 프로토 타입을 기반으로 상속을 구현 생성자 함수의 prototype이 인스턴스들의 부모 객체 역할을 하게 ..
20210705 JavaSciprt DeepDive 03 : 스코프(전역, 지역, 함수, 블록, 동적, 정적), 변수 생명주기, 멤버, var, let, const, 프로퍼티 어트리뷰트, 생성자 함수, 함수객체, 일급객체, 함수객체 프로퍼티 JavaScript Deep Dive 03 용어 및 중요사항 정리 스코프 스코프 : 식별자가 유효한 범위, 식별자를 검색(식별자 결정)할 때 사용하는 규칙 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨 변수의 이름이 동일한 식별자여도, 스코프가 다르면 별개의 변수임 식별자인 변수 이름의 충돌 방지하여 같은 이름의 변수를 사용할 수 있게 함 같은 스코프에서 식별자는 유일해야 하지만 다른 스코프에는 식별자를 동일하게 사용가능함으로 스코프는 네임스페이스임 var 키워드의 경우 같은 스코프내 중복 식별자 선언이 허용됨(덮어 씌워짐), let은 중복 식별자 선언 허용하지 않음 전역 : 코드의 가장 바깥 영역, 전역 스코프 : 전역에서 만들어진 스코프 전역 ..
20210704 JavaSciprt DeepDive 02 : 타입 변환, 단축평가, 옵셔널 체이닝(?.), null 병합 연산자(??), 객체 리터럴, 프로퍼티, 원시값 vs 객체, 복사, 함수(즉시 실행 함수, 재귀함수, 중첩함수, 콜백함수, 고차.. JavaScript Deep Dive 02 용어 및 중요사항 정리 타입 변환 타입 변환 : 기존 원시 값을 사용해 다른 타입의 새로운 원시값을 생성하는 것 명시적 타입변환, 암묵적 타입 변환 둘다, 원시값은 변경 불가능한 값(imutable value)이라서 기존 원시값을 직접 변경하는 것은 아님 (부수 효과X, 재할당X) 암묵적 타입 변환(implicit coercion), 타입 강제 변환(type coercion) : 표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 변환되는 것 문자열 타입으로 암묵적 변환 문자열 연결 연산자로 (+)가 작용 하는 경우, 문자열 이외의 것들 문자열 타입으로 변환 Type + '' -> 'Type' Symbol 타입의 경우에만 타입..