본문 바로가기

전체 글

(220)
20210728 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit16 : Container 구조 리팩토링, 이미지 리사이징 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit16 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210727 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit15 : 리덕스 store state 구조 개편, useSelector에 대한 렌더링에 대한 고민, history를 활용한 정보 전달 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit15 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210726 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit14 : Post detail view 만들기, 보일러 플레이트 코드에 대한 고민 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit14 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210724 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit13 : firebase 보안 규칙 수정, react 이벤트 버블링(stopPropagation 작동 에러), displayName 고유화를 위한 userName 중복 check 구현 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit13 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210723 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit12 : 현재 유저&다른 유저 profile Posts, Info 구현, 뒤로가기 제한을 위한 history관리 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit12 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210722 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit11 : imageUrl에 대한 에러(디테일) 처리, file타입 input 에러 처리, 모달 HOC 구현, Post 수정&제거 접근 제한 구현 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit11 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210722 JavaSciprt DeepDive 18 : 모듈, Babel, Webpack JavaScript Deep Dive 18 📄 용어 및 중요사항 정리 모듈 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 개별 파일, 모듈 스코프 기능이 있어야 함 export : 모듈을 필요한 자산에 선택적으로 공개 하는 것 import : 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용 가능 CommonJS : 자바스크립트 모듈 시스템의 표준 Node.js 환경에서는 모듈 시스템을 지원 ESM : 클라이언드 사이드 JS에서 지원하는 모듈 시스템 script 태그의 type 어트리뷰트에 module 값을 주면 동작함 ESM을 사용하면 파일 확장자 mjs 사용 권장 모듈 스코프 : 전역에서 선언해도 전역 변수가 되지 않음, 모듈내 선언한 식별..
20210721 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit10 : 최초 소셜 로그인 및 가입 이후의 users 데이터 베이스 관리, Profile Update 구현(userIntro 포함, users 활용), falsy한 프로퍼티 값에 따른 선택적 .. 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit10 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210720 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit09 : 현재 유저의 profile 보여주기 구현 ,users database 구현, profile update시 users db로 관리 구현 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit09 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210719 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit08 : 전체적인 redux state 관리 구조 개편, common slice 생성 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit08 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210715 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit07 : profile 이미지 url 삭제에 관한 에러 처리 문제 해결 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit07 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..
20210721 JavaSciprt DeepDive 17 : 프로미스, fetch, 제너레이터, async/await, 에러 처리 JavaScript Deep Dive 17 📄 용어 및 중요사항 정리 프로미스 비동기 함수 : 함수 내부에 비동기로 동작하는 코드를 포함한 함수 비동기 함수 내부의 비동기 동작 코드는 비동기 함수가 종료된 이후에 완료됨 비동기 동작 코드에서 처리 결과를 외부로 반환하거나, 상위 스코프의 변수에 할당 하면 기대한 대로 동작하지 않음 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 외부에서 콜백 함수를 받아 수행해야 함 -> 콜백 헬 발생 콜백 헬 에러 처리 한계 : 에러는 호출자 방향으로 전파되지만, 비동기 함수의 콜백은 비동기 함수가 호출하지 않음 -> 콜백에 대한 에러는 catch 되지 않음 프로미스 : 콜백 헬을 극복하기 위해 도입됨 표준 빌트인 객체 비동기 처리 상태와 철리 결과를..
20210720 JavaSciprt DeepDive 16 : 타이머, 디바운스, 스로틀, 비동기 프로그래밍(블로킹, 이벤트 루프, 태스크 큐, 콜 스택, 힙), Ajax, JSON, XMLHttpRequest, REST API JavaScript Deep Dive 16 📄 용어 및 중요사항 정리 타이머 호출 스케줄링(scheduling a call) : 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하는 것 타이머 함수 : 스케줄링을 구현하게 도와주는 함수로 전역 객체의 메서드인 호스트 객체 임 setTimeout, setInterval 비동기 처리 방식으로 동작 함 싱글 스레드(single thread) : JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두 가지 이상의 태스크를 동시에 실행 불가함 타이머 함수 setTimeout(callback[, delay, param1, param2, ...]) 두번째 인수로 전달받은 시간(delay)으로 단 한번 첫번째 인수로 전달 받은..
20210719 JavaSciprt DeepDive 15 : 이벤트 Event JavaScript Deep Dive 15 📄 용어 및 중요사항 정리 이벤트 브라우저는 특정 상황이 발생시 이를 감지하여 특정한 타입의 이벤트를 발생 시킴 이벤트 핸들러 : 이벤트 발생시 호출될 함수를 말함 이벤트 핸들러 등록 : 이벤트 발생시 브라우저에게 이벤트 핸들러(함수)의 호출을 위임하는 것 이벤트 핸들러 프로퍼티에 함수 할당하여 가능함 이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 이벤트 타입 : 이벤트의 종류를 나타내는 문자열 이벤트 타입 이벤트 타입 이벤트 발생 시점 마우스 이벤트 click 마우스 버튼을 클릭했을 때 dblclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 버튼을 눌렀을 때 mouseup 누르고 있던 마우스 버튼을 놓..
20210716 JavaSciprt DeepDive 14 : DOM, 요소 노드 취득, HTMLCollection, NodeList, 텍스트 노드, 노드 탐색, texContent, XXS, 노드 조작, 어트리뷰트, DOM 프로퍼티, 스타일, 클래스 조작 JavaScript Deep Dive 14 📄 용어 및 중요사항 정리 DOM DOM(Document Object Model): HTML 문서의 계층적 구조와 정보를 표현 HTML 요소를 제어할 수 있는 API로 프로퍼티와 메서드를 제공하는 노드 객체들로 구성된 트리 자료 구조 HTML 요소: HTML 문서를 구성하는 개별적인 요소 HTML 요소 -(JS엔진에 의한 파싱)-> 요소 노드 객체 HTML 어트리뷰트 -(파싱)-> 어트리뷰트 노드 HTML 요소의 콘텐츠 -(파싱)-> 텍스트 노드 시작태그 어트리뷰트 이름 어트리뷰트 값 콘텐츠 종료태그 HTML 요소의 중첩 관계 특성으로 다른 요소로 포함 가능함 -> 모든 노드들이 트리 자료 구조로 구성 트리 자료구조: 부모노드, 자식노드로 구성되어 노드들의 계층..
20210714 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit06 : 프로필 수정 구현, profile 이미지 url 처리에 관한 문제 발생과 고민 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit05 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..