본문 바로가기

전체 글351

React - TypeScript 실행오류 Cannot add property, object is not extensible 타입스크립트 에러가 났다. readonly 객체는 수정할수 없기 때문에 에러가 난것이다. 나의 경우는 redux 객체를 수정하려고 했기 때문에 에러가 나버렸다. React - TypeScript 실행오류 Cannot add property, object is not extensible 리덕스 값(객체)는 직접 수정할 수 없다. 그 이유는 상태 값은 불변 객체이다. 상태 값은 순수 함수에 의해서만 변경되어야 한다. 하지만 리덕스 객체를 직접 수정하려고 하니 당연히 나게된 에러였던 것이다. 객체를 직접 수정할 수 없다면 ? 복사해서 값을 고쳐주면 된다. (feat. 참조에 의한 복사) ** 참조에 의한 복사란 (더보기클릭) 더보기 객체를 만들면 객체 자체는 메모리에 저장되고, 변수에는 참조값만 저장이 된다... 2022. 7. 27.
Git(38) 삭제한 stash 복구 하기 git stash 는 다들 많이 알 것이다. 어느날 stash 를 하다가 실수로 drop 해버렸다. 이럴때 drop 해버린 stash 에 담긴 파일들을 복구해보자. Git(38) 삭제한 stash 복구 하기 1. 아래 명령어를 치면 내가 삭제한 commit 들이 나온다 $ git fsck --unreachable | grep commit | cut -d ' ' -f3 | xargs git log --merges --no-walk 하나하나씩 살펴보자면, $ git fsck // file system check 의 약자이다. database 의 connectivity 와 validity 를검사한다. $ --unreachable // Print out objects that exist but that aren.. 2022. 7. 19.
React(78) useEffect 에서 스크롤 이벤트 동작원리(feat. addEventListener) 요즘 모아놓은 스크롤 이벤트를 포스팅하다보니 개념정리도 함께 되고 있다. 예전에 급히 사용했던 퍼즐(코드) 조각들이 하나씩 모여 동작원리까지 공부하며 완성 되어 가는 것 같아 매우 뿌듯하다. 스크롤 이벤트는 워낙 다양한 사용법이 있지만 응용이 가능한 가장 기본적인 코드로 정리해보았다. React(78) useEffect 에서 스크롤 이벤트 동작원리(feat. addEventListener) 웹페이지에서 일어나는 모든 사건을 이벤트라고 한다. 이벤트는 특정 동작이 벌어지는 사건이 일어난 것이다. 스크롤 이벤트는 스크롤이 움직이는 순간!! 을 감지한다. 엘레멘트 사이즈 ( Element Size ) 스크롤 이벤트에서 많이 사용되는 수치들이다. 이 수치들을 기본적으로 알고 있어야 스크롤 맨아래까지 내리면 OO.. 2022. 7. 18.
React(77) 스크롤 시, 하위메뉴를 헤더 아래로 고정하기 상단이 고정된 헤더가 있다. 스크롤 하다가 페이지 중간에서 하위메뉴를 만나면 헤더 바로 아래로 고정되는 기능을 구현하려고 한다. 구글링을 해보니 자바스크립트로 하위메뉴까지의 스크롤의 높이를 구한 뒤, 고정시키는 로직이 대다수였다. 고민고민하다가 CSS 만으로도 구현할 수 있다는 사실을 알아냈다. 많은 분들에게 도움이 될지는 모르겠지만 그래도 공유해보려고 한다. 결과화면 미리보기 페이지 중간에 하위 메뉴 탭이 있다. 스크롤을 내려보자 스크롤을 내리다가 헤더가 하위탭을 만나자 고정되고, 그 아래의 내용들만 스크롤되기 시작한다. React(77) 스크롤 시, 하위메뉴를 헤더 아래로 고정하기 Product.tsx 첫번째 useEffect 를 통해, 첫 렌더시 스크롤을 0으로 잡아주고, 두번째 useEffect .. 2022. 7. 12.
CSS - 이미지 자르기(crop) Updated 09/21/22 crop 은 그림판에서 1초컷이지만, css 로는 로 영역을 한번더 감싸줘야 한다. 자, 여기 귀여운 고양이가 있다. CSS 로 고양이 얼굴만 잘라보도록 하자. 결과화면 미리보기 HTML CSS .bg-crop { position: relative; width: 100px; // 자를 사이즈를 명시해준다. height: 50px; overflow: hidden; .bg-cat { position: absolute; // 포지션을 주고, top: 0; // 보이기 원하는 위치를 지정 left: 0; width: 300px; // 오리지널 사이즈 height: 200px; } } **styled-component 기준입니다. 2022. 7. 7.
CSS - <li 태그> dot 스타일 변경하기 + 들여쓰기 기본적인 리스트를 정렬중인 새발자 기초를 탄탄히 다지기 위해 열심히 포스팅을 정리해보았다. 들을 사용해보았는데 오랜만에 사용해보니 부족한 것들이 눈에 들어왔다. 그럼 에 대해 좀 더 알아보러 가보자 CSS - dot 스타일 변경하기 + 들여쓰기 일단 타이틀과 정렬이 맞지 않고, 하위메뉴들도 정렬이 안되있다. 그리고 dot 크기도 마음에 안든다. 테스트 타이틀 1. 커피류 • 아메리카노 • 카페라떼 • 에스프레소 2. 테스트 입니다. 3. 테스트 입니다. 아래와 같이 수정을 해보자. 테스트 타이틀 1. 커피류 • 아메리카노 • 카페라떼 • 에스프레소 2. 테스트 입니다. 3. 테스트 입니다. HTML 커피류 아메리카노 카페라떼 에스프레소 테스트 입니다. 테스트 입니다. CSS .list { list-sty.. 2022. 7. 5.
반응형

티스토리툴바