본문 바로가기

전체 글

 (220)
20210815 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit30 : 댓글 관련 컴포넌트 스타일링, 컴포넌트에 Comment Read, Create 연결 하기, Comment delete 구현하기 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit30 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..
20210814 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit29 : 댓글 기능을 위한 Component 및 페이지 Component 설계, Comments DB 설계, Redux Comment Slice 설계 및 Read, Create 구현 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit29 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..
20210813 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit28 : 랜덤 유저 추천 개선(useRandom 구현), 스크롤 위치 기억(useScroll 구현), useLayoutEffect 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit28 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..
20210811 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit27 : 무한스크롤 구현, IntersectionObserver, 불필요한 데이터 요청 제거 및 데이터 요청 시기 조정, 코드 중복 제거를 위한 통합에 대한 고찰 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit27 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..
20210809 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit26 : 본인을 제외한 랜덤 유저 추천 기능 구현, side 컴포넌트 스타일링 (회원 추천 + 푸터) 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit26 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..
20210808 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit25 : Post Detail View로 이동시 해당 글의 scrollTop 위치로 이동 구현하기 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit25 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..
20210715 JavaSciprt DeepDive 13 : Set, Map, 브라우저 렌더링 과정 JavaScript Deep Dive 13 📄 용어 및 중요사항 정리 Set Set 중복되지 않는 유일한 값들의 집합 객체 수학적 집합을 구현하기 위한 자료구조 임 JS의 모든 값을 요소로 지정할 수 있음 set 객체는 이터러블 임 for...of, 스프레드 문법, 배열 디스트럭처링 가능 배열 vs Set 객체 구분 배열 Set 객체 동일한 값을 중복 O X 요소 순서 의미 O X 인덱스로 요소 접근 O X Set 객체 생성 new Set(이터러블) Set 생성자 함수로 생성 이터러블을 인수로 전달받아 Set 객체 생성 인수가 없으면, 빈 Set 객체 생성됨 이터러블의 중복된 값은 Set 객체에 요소로 저장 되지 않음 Set 프로퍼티, 메서드 Set.prototype.size 프로퍼티 Set 객체의 요소..
20210806 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit24 : Profile 수정 페이지 스타일링 및 website, subName 추가, domain과 path 정규표현식 포맷팅, 게시글 개수 표현 구현, 한글과 영문 font-weight 차이(Not.. 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit24 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..
20210805 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit23 : invalid form control error 해결, input 값 존재 확인 및 알림 구현(대략적인 Validation), 재사용 높이기(Profile 페이지와 User 페이지 통합, PostUpdate와.. 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit23 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..
20210804 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit22 : 인스타그램의 Image Table 구현하기, SCSS '/' (나누기 연산자) 기능 Deprecated 경고, useWindowSize, a 태그 클릭시 새탭으로 열기(target: '_blank'), Profi.. 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit22 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 스타일링 완료 로그인 화면 : 기본 Email ..
20210803 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit21 : Material UI findDOMNode Error, Drop Menu UI 구현 (드롭 메뉴), Modal UI 재구현, Confirm UI 구현 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit21 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 스타일링 완료 로그인 화면 : 기본 Email ..
20210802 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit20 : Home 페이지 스타일링 수정, Write 페이지 스타일링 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit20 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 스타일링 완료 로그인 화면 : 기본 Email ..
20210801 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit19 : Taget container is not a Dom element 에러 해결, React 렌더링에 대한 고찰 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit19 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 스타일링 완료 로그인 화면 : 기본 Email ..
20210730 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit18 : material ui 도입, 로그인, 회원가입 창 스타일링 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit18 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 스타일링 완료 로그인 화면 : 기본 Email ..
20210729 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit17 : 스타일링 작업 방식 선택, SCSS 스타일링을 위한 디렉 구조, Load, Navigation 컴포넌트, 폴더 구조 확인 CLI command 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit17 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 스타일링 완료 로그인 화면 : 기본 Email ..
20210729 React style 01: REACT CSS(classnames 라이브러리), SCSS(open-color, include-media 라이브러리), CSS Module, Styled-components 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 선택자) : ..

티스토리툴바