라쿤의 끄적끄적

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit19 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 스타일링 완료 로그인 화면 : 기본 Email ..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit18 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 스타일링 완료 로그인 화면 : 기본 Email ..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit17 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 스타일링 완료 로그인 화면 : 기본 Email ..

React Style 01 📄 주요 사항 정리 리액트의 스타일 방식은 여러가지가 존재 한다. 일반적인 CSS Sass CSS Module styled-components CSS 작은 규모의 프로젝트의 경우에는 기존의 CSS 스타일링을 고수하여 사용하여도 좋음 CSS 클래스를 중복되지 않게 만드는 것이 제일 중요함 REACT에서 추천하는 형태 : 컴포넌트 이름-클래스 형태 BEM : Block__Element--Modifier 형태 Block : 큰 독립적인 형태 (화면을 구성하는 component 단위의 느낌) Element : Block을 구성하는 작은 단위 Modifier : Block 또는 Element의 속성(특성, 외관 상태를 변화시키는 것)을 담당함 CSS Selector(CSS 선택자) : ..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit16 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit15 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit14 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit13 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit12 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit11 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

JavaScript Deep Dive 18 📄 용어 및 중요사항 정리 모듈 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 개별 파일, 모듈 스코프 기능이 있어야 함 export : 모듈을 필요한 자산에 선택적으로 공개 하는 것 import : 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용 가능 CommonJS : 자바스크립트 모듈 시스템의 표준 Node.js 환경에서는 모듈 시스템을 지원 ESM : 클라이언드 사이드 JS에서 지원하는 모듈 시스템 script 태그의 type 어트리뷰트에 module 값을 주면 동작함 ESM을 사용하면 파일 확장자 mjs 사용 권장 모듈 스코프 : 전역에서 선언해도 전역 변수가 되지 않음, 모듈내 선언한 식별..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit10 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit09 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit08 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit07 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

JavaScript Deep Dive 17 📄 용어 및 중요사항 정리 프로미스 비동기 함수 : 함수 내부에 비동기로 동작하는 코드를 포함한 함수 비동기 함수 내부의 비동기 동작 코드는 비동기 함수가 종료된 이후에 완료됨 비동기 동작 코드에서 처리 결과를 외부로 반환하거나, 상위 스코프의 변수에 할당 하면 기대한 대로 동작하지 않음 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 외부에서 콜백 함수를 받아 수행해야 함 -> 콜백 헬 발생 콜백 헬 에러 처리 한계 : 에러는 호출자 방향으로 전파되지만, 비동기 함수의 콜백은 비동기 함수가 호출하지 않음 -> 콜백에 대한 에러는 catch 되지 않음 프로미스 : 콜백 헬을 극복하기 위해 도입됨 표준 빌트인 객체 비동기 처리 상태와 철리 결과를..