본문 바로가기

분류 전체보기95

react-router v6 달라진 점들 1. Routes - exact를 작성할 필요가 없어졌고, component 대신 element로 사용한다. // 기존 // react-router v6 2. useNavigate() - 동적라우팅 시, useHistory가 사라지고 useNavigate로 대체되었다. // 기존 const history = useHistory(); history.push('/'); history.replace('/'); // react-router v6 const navigate = useNavigate(); navigate('/'); navigate('/', {replace: true}); 3. useLocation() - 현재 페이지 path 확인시, history객체가 아닌 useLocation을 활용한다. // .. 2021. 12. 21.
JavaScript 안드로이드 아이폰 구분 WebVIew기반의 앱을 만들다보면 Android 와 IOS를 구분해야하는 일이 생긴다. 웹으로 접속했을 때 앱을 다운받을 수 있도록 유도하는 마케팅을 위해 원링크, 딥링크 등의 개념이나 Appflyers의 제로플랜 등을 찾아볼 수도 있지만, 자바스크립트로 기기를 구분하여 해당 앱스토어로 링크로 연결될 수 있는 로직을 찾아보았다. 자바스크립트에서 접속자의 브라우저 정보 및 디바이스 정보를 가지고있는 User-Agent라는 객체를 사용하여 Android와 IOS를 구분할 수 있다. 다음은 User-Agent를 통해 얻어낸 Android, IOS 각 기기의 정보이다. Android Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) Ap.. 2021. 10. 28.
불변객체에 대하여.. 기본적으로 객체의 프로퍼티를 변경 시에는 불변객체가 지켜지지 않고 객체 자체를 변경 할 때 불변객체가 지켜진다. 해당 코드로 보자! 1. 객체 프로퍼티 변경 (불변객체 X) let obj1 = { a: 10, b: 'bbb'}; let obj2 = obj1; obj2.a = 20; //프로퍼티 변경 console.log(obj1 === obj2); // true console.log("obj1", obj1); // 'obj1' { a: 20, b: 'bbb' } console.log("obj2", obj2); // 'obj2' { a: 20, b: 'bbb' } obj2.a 프로퍼티만 변경했는데 원본 객체 obj1.a 또한 변경된 것을 볼 수 있다. 이처럼 객체의 프로퍼티 변경은 원본객체를 유지하지 않는.. 2021. 10. 3.
react-router-dom의 Link 컴포넌트와 a 태그 페이지 전환 차이점 React 에서는 일반적으로 react-router-dom 패키지를 이용하여 페이지 전환을 하지만 jsp혹은 일반 html에서는 태그를 이용해서 페이지 전환을 한다. 1. 태그 - 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려버린다. - 렌더링된 컴포넌트들도 모두 사라지고 다시 처음부터 렌더링! - 따라서 상태 값이 유지되지 못하고 속도도 저하된다. - 해당 이유로 페이지를 새로 불러오게 되면 앱이 지니고 있는 상태가 초기화되고, 렌더링 된 컴포넌트도 모두 사라지고 새로 렌더링을 해야 한다. 상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다. // 렌더링을 초기화 하고 싶을때 2. Link 컴포넌트 .. 2021. 9. 29.
비동기 병렬처리( Promise.all ) 비동기 처리를 위해서 Promise, Async-await등을 사용하는데 순차적인 처리와 병렬 처리는 구현하려는 목적에 맞게 사용하면 될 것 같다. Async-await을 이용한 순차적인 처리는 "유저를 조회하고, 거기서 얻은 유저 아이디를 통해 장바구니 상품을 가져온다"와 같은 상황에 적합한 처리가 되지만 하나씩 순서대로 처리하는 만큼 절대적인 시간이 소모된다. 반대로 순서가 보장되지 않더라도 "일괄적으로 모든 데이터를 업데이트"를 하는 상황 같은 경우에는 Promise.all과 같은 병렬적인 처리가 적합하다. 모든 데이터가 한번에 처리되므로 시간 또한 절반 정도 절약된다! 1. 비동기 순차적인 처리 const sequenceFunc = async (number) => { return new Promi.. 2021. 9. 28.
for문 vs for...in문 vs forEach 인덱스 타입 다음 구문은 자바스크립트에서는 값이 나올지 몰라도 엄격한 타입스크립트에서는 Type Error를 뱉어낸다. // Typescript const myArray = [1, 2, 3]; for(var index in myArray) console.log(index * 2); // TS compiler error. The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362) 이유는 간단하다. for...in 문의 index 타입은 string이기 때문! for...in문, 고전 for문, forEach문의 인덱스 타입을 정리해보았다. var myArray = [1, 2, .. 2021. 9. 23.
반응형 CSS 어떤걸 사용할까 ? 1. 부모요소에 사이즈가 반응한다면? (페이지 어디에서 사용되느냐에 따라 사이즈가 변경되야 한다면) 👉 %, em 2. 부모요소가 아닌 Browser 사이즈에 반응한다면? (페이지 어디에서 사용되어져도 사이즈가 고정되야 한다면) 👉 v*, rem 박스 사이즈를 결정한다면? 👉 %, v* Font-size에 비례해서 변경 👉 em, rem 이렇게 사용해보자 !! 1. Font-size는 rem (em은 상위 부모때메 복잡할 수 있음) 2. Margin,padding은 위아래 em, 좌우정렬 rem (폰트 사이즈 변경에 따라) 3. width는 % // 예시 @media screen and (max-width: 48rem) .first-component { padding: 0.5em; // 부모 font-s.. 2021. 8. 15.
commit 안하고 브랜치 변경하기(git stash) 한창 개발 브랜치(dev-loadingCharge)에서 작업중이었는데 master 브랜치의 즉각적인 수정 요청이 들어왔다 !! 작업중인 브랜치를 add , commit하고 넘어가기가 애매한 상황이라면 ?? 🤔 임시 저장 후 브랜치를 변경하는 git stash를 활용하자. 현재 브랜치(dev-loadingCharge)를 임시 저장한 후 $git stash 요청이 들어온 브랜치로 이동이 가능하다! $git checkout master // 수정 요청이 들어온 master 브랜치 열나게 요청 작업을 마무리 한 후 다시 작업하던 브랜치로 돌아오자. $git checkout dev-loadingCharge 임시 저장했던 내용 불러오기! $git stash pop 브랜치에 수정중이라는 *표시가 다시 나타날 것이다 .. 2021. 8. 11.
반응형 CSS 단위 정리 html의 기본 font-size는 16px이다. 즉, 최상위 요소에서 font-size: 100% 는 16px를 뜻하는 것! %와 em은 같은 개념이다 !!! 1. % relative to "parent" .parent { font-size: 800%; // 16px * 8 = 128px } .child { font-size: 50%; // 128px * 0.5 = 64px } 2. em relative to "parent" font-size 해당 단위가 사용되고 있는 요소의 font-size 속성값 기준 .parent { font-size: 8em; // 16px * 8 = 128px } .child { font-size: 0.5em; // 128px * 0.5 = 64px } html { font-.. 2021. 8. 10.

티스토리툴바