문제 기존의 JavaScript에서는 toLocaleString() 메서드를 사용하면 가격에 천 단위마다 쉼표를 쉽게 넣을 수 있다. 하지만 안드로이드에서는 JavaScript의 최신 버전을 지원해주지 않으므로 직접 function을 만들거나 변환해주는 작업이 필요하다. 사용 코드 (변환을 원하는 숫자).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); Object.prototype.toString() 문자열을 반환하는 object의 대표적인 방법 정규식을 사용하기 위해 그리고 구분자가 포함된 새로운 문자열을 얻기 위해 사용 1️⃣ 정규식 생성 방법 2가지 정규식 리터럴(/로 감싸는 패턴)을 사용하는 방법 📌 RegExp 객체의 생성자 함수를 호출하는 방법 2️⃣ ..

replace() 메서드 1️⃣ 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환 2️⃣ 첫 번째 문자열만 치환이 되며 원래 문자열은 변경되지 ❌ const str = '안녕하세요! 이성호 입니다.'; console.log(str.replace('', '').replace('', '')); // expected output: "안녕하세요! 이성호 입니다." ''와 ''의 모든 문자를 치환하고 싶었던 나는 replace() 메서드의 한계를 느꼈다. 다른 방법도 많이 있겠지만 나는 split(), join() 메서드를 사용하여 이를 해결하였다. split() 메서드 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눔 Join() 메서드 각 요소 또는 멤버 사이에 지정..

CSS Units 1️⃣ Absolute length units 2️⃣ Relative length units Absolute length units 어떤 상황에서든 항상 고정된 길이를 나타내는 단위 여러가지가 존재하지만 주로 px(모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위)이 사용된다. Absolute length units의 문제점이 무엇일까? 컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 동일한 크기로 간주! 반응형 ❌ Relative length units 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위 주로 사용되는 5가지에는 em, rem, vw, vh, %가 존재한다. em - (동일 요소의 글꼴 크기)❌ → 부모 요소의 글꼴 크기 선택된 폰트 패밀..

Expo CLI 설치 $ npm install --global expo-cli Expo Go 앱 설치 Android Play Store https://play.google.com/store/apps/details?id=host.exp.exponent Expo 프로젝트 생성 $ expo init 앱이름 📌 Choose a template → blank - a minimal app as clean as an empty canvas 선택 Expo 로그인(VS code 터미널) expo login Expo 프로젝트 실행(VS code 터미널) expo start --tunnel

SPA 기법을 그대로 유지한 상태로 REACT에서 페이지 이동 처리하는 방법으로 React Router가 사용된다. 라우팅이란? - 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각하면 쉽다. - 리액트에는 라우팅 관련 라이브러리가 존재하는데, 그 중 리액트 라우터(React Router)를 사용해보려고 한다. React Router(리액트 라우터)란 무엇인가? - 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다. 종류 - BrowserRouter: HTML5를 지원하는 브라우저의 주소를 감지한다. - HashRouter: 해시 주소를 감지한다. React Router(리액트 라우터) 사용해보기! (❗ ..

SPA를 설명하기 전 SPA를 왜 사용하는지? 전통적인 웹 사이트는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링 하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않으며, 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하므로 굉장히 비효율적이다. 웹 사이트의 규모가 커질수록 서버쪽에선 과부하가 걸릴 수 밖에 없다. 그 만큼 속도적인 측면에서 사용자는 불편함을 그대로 느끼게 된다. 틀릴확률이 높은 개인적인 지식(수정 가능성 높음❗) Traditional Page Lifecycle HTML → CSS → DOM → Web browser SPA Lifecycle HTML → CSS → Virtual Dom → DOM(필요 요소만 변경) → Web browser..

PureComponent & memo Component에 state나 props에 변화가 없다면 render 함수가 호출되지 ❌ React.PureComponent React.PureComponent는 React.Component와 비슷하다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교(레퍼런스만 비교해서 안에 데이터가 달라져도 동일한 오브젝트)를 구현한다는 차이점만이 존재한다. 참조값이 동일하면 업데이트 ❌ => ShouldComponentUpdate 함수는 false를 리턴 React 컴포넌트의 render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌..

React 앱 만들기 $ yarn create react-app 폴더 이름 ❗ 폴더 이름에 공백이 들어 있지 않도록 해야한다. 템플릿 폴더 ⇒ 새로운 폴더 $ cp -R [템플릿 폴더] [새로운 폴더] ❗ 템플릿 폴더가 들어있는 경로로 설정해야 한다. fontawesome 사용하기 cmder $ yarn add @fortawesome/fontawesome-free index.js import '@fortawesome/fontawesome-free/js/all.js'; 컴포넌트 골격 생성 // Class Component rcc + Tab // function Component rsi + Tab axios 라이브러리 추가 // $ yarn add 라이브러리 $ yarn add axios