본문 바로가기

분류 전체보기361

React(80) 객체 값을 동적으로 할당하기 나는 if 문과 switch 문의 신봉자였다. 하지만 조건문을 사용(남발)하게 되면, - 조건문이 속한 함수가 매번 렌더된다. - 조건에 맞는지 일일이 검사를 해야한다. 얼마전 사수님과 이야기하다 조건문을 최소화하여 객체의 키값으로 바로 해결할 수 있는 방법을 사용해보게 되었다. - 객체는 첫 렌더시에 이미 메모리에 저장되있고, 키값만 넣어주면 바로 가져올 수 있다. - 객체는 순서를 보장하지 않는다. (즉, 순서대로 검사한다는 개념 자체가 없다 원샷원킬) React(80) 객체 값을 동적으로 할당하기 원하는 자동차 회사를 알려주면, 회사별로 판매하는 차 가격에 대한 정보를 알려주는 코드라고 해보자. 일단 자동차 회사 타입을 정해주고, 차 가격 정보를 알려주는 객체도 만들어 보았다. (🐣 "흠 나는 신입.. 2022. 8. 18.
React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 입력창에서 기본중의 기본! 숫자입력시 세자리마다 콤마를 붙여보자. toLocaleString() 을 붙이면 해결 ! ....?? 이 안되기도 한다. (우리가 사는 세상은 그렇게 호락호락하지 않다 🥲) 숫자를 string 형으로 입력받아야만 하는 경우가 있다. 이럴 때 onChange 메소드 안에서 string → number 로 형변환을 해서 toLocaleString() 을 사용해도 콤마( , ) 가 추가되는 순간 문자열로 인식되기 때문에 제대로 동작을 안하는 이슈가 생겨 버린다. 이런 경우 내장함수보다는 정규식을 사용하는 것이 더 좋다! 그럼 이런 까탈스런 경우를 해결하러 가봅시다 결과화면 미리보기 React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 여기서 관건은 onCha.. 2022. 8. 13.
Network - CDN 이란 (Content Delivery Network) 요즘 CDN 을 이용하여 정적인 파일들 처리를 하고 있다. AWS cloud front 를 통해 url 을 받아 보내주긴 하는데 도대체 이녀석이 무엇을 하는 친군지 어떻게 동작하는지 원리가 궁금해졌다. Network - CDN 이란 (Content Delivery Network) 인터넷 통신을 할 때는, 웹사이트(서버) - 사용자(클라이언트) 간의 물리적 거리가 영향을 받는다. 콘텐츠 전송을 받을 때, 서버와 먼 지역의 사람들은 로딩이 길고, 가까운 지역의 사람들은 로딩이 짧다. 지리적 제약 없는 전송 퀄리티 유지를 위해 cdn 이라는 기술이 등장하였다. cdn 은 지리적으로 분산된 여러개의 서버(캐시서버 / PoP) 이다. 여러 지리적 위치에 접속 지점(POP) 또는 CDN 엣지 서버 그룹을 세팅해 놓.. 2022. 8. 8.
JavaScript - 정규식 Regular expression updated 06/28/23 오늘은 정규식의 날이었다 정규식이 나를 애먹였지만 덕분에 생동감있게 배웠다. 아래 내용은 내가 편하게 이해하려고 정리해놓은 규칙들이다. 서서히 늘려나갈 계획이다. JavaScript - 정규식 Regular expression 💡 기본 규칙 / _____ / 일단 정규식은 요런 형식을 사용한다. 슬래시로 감싸진 형태이다. / _____ / g 전체 문자열을 몽땅 검색한다 / _____ / i 대소문자를 구분하지 않는다 / _____ / gi 전체 문자열 몽땅 검색 + 대소문자를 가리지 않는다 / ^[0-9] / 여기서 ^ 는 시작을 의미한다. → 한마디로 0-9 인 숫자로 시작되는 문자를 의미한다. / [^0-9] / 괄호 안의 ^ 는 not 을 의미한다. → 한마디로 0-.. 2022. 7. 29.
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.
반응형

티스토리툴바