new Date() 에 들어가는 날짜 형식은 브라우저마다 달라서 크로스브라우징 이슈가 있을 수 있다. 아래는 https://string.tistory.com/32 에서 가져온, 각 형식별 브라우저 지원 여부이다. // yyyy-mm-dd var a = new Date("2021-07-06"); console.log(a); // CHROME - Tue Jul 06 2021 09:00:00 GMT+0900 (대한민국 표준시) // SAFARI - Tue Jul 06 2021 09:00:00 GMT+0900 (KST) // IE11 - Tue Jul 06 2021 09:00:00 GMT+0900 (대한민국 표준시) // yyyy-mm-dd hh:mm:ss var b = new Date("2021-07-06 1..
기존 프로젝트를 리팩토링 하기 전에, 각 파일들의 의존성이 어떻게 연결이 되어있는지 시각화를 하기 위해 방법을 찾아보았다. 특히 타입스크립트의 경우, dependency가 어떻게 되는지 시스템에서 정확하게 파악을 하고 있으므로 분명히 tool이 있을것이라고 확신하고 찾기 시작했다. 우선 기록을 위해 여기 적어두고, 필요한 부분만 남기기로. 지금까지 입력한 명령어 모음 sudo npm -g install madge 비번입력, 설치 brew install graphviz yarn add -D dependency-cruiser yarn depcruise --init ✔ Where do your source files live? … src ✔ Do your test files live in a separate ..
좋아요 기능 useMutate로 변경 useMutate 활용해서 리팩토링 서버측 API 변경이 어려운 경우, 프론트에서 API를 호출할때 반대값이 오면 error를 던져주는 방식으로 바꿔준 뒤, useMutation의 에러핸들링을 활용하는 방법으로 리팩토링을 진행할 예정입니다. 그렇게 할 경우 좀더 코드가 간결하고 직관적이게 되며, 추후 서버 요청을 보낼때 에러핸들링이 내장되더라도 빠르게 수정을 할 수 있게 됩니다. [5분소요]라우터 코드스플리팅(성능측정하기) 이미 다 만들어 놓음 상세페이지 masonry 라이브러리 제거, CSS로 구현 성능 매우 개선될 예정 CSS에서 요소 갯수에 따른 속성 적용하기 활용 : https://shubamba.tistory.com/45 PWA적용 가능은 함. 모든 리소스는..
iOS 댓글 모달창 스크롤시 배경도 같이 스크롤되는 문제 iOS에서 모달창으로 댓글창이 있을때, 배경이 함께 스크롤 되는 이슈 윈도우에서도 댓글을 끝까지 내리면 그 이후엔 배경이 스크롤 되는 이슈 ✔️ 해결방안 댓글창이 열렸을때 댓글창 이외의 모든 스크롤을 막는 방법 도입 iOS 댓글창 배경부분 스크롤 막는 기능 커스텀훅 구현 (useLockScroll.tsx) body에 overflow:hidden을 주어서 모든 스크롤이벤트를 막음. classname으로 구분된 객체를 지정하여 overflow:auto 를 주어서 스크롤을 허용 import { useEffect } from 'react'; /** * useLockScroll * @param 첫번째 인자값 : 스크롤 막을지 말지 결정하는 boolean 값..
깃허브 링크 https://github.com/DongneMashil/dongnemashil-fe/blob/main/src/hooks/useUpdateUserInfo.tsx [유저정보 불러오기 방법에 대한 고민을 팀원들과 공유하기 위해 slack에 작성한 글입니다.] [글 아래 부분에 변경된 내용을 반영했습니다] 지금 프사가 각각 늦게뜨는 가장 큰 이유는, 매번 API를 호출해서 서버 응답을 기다리고 있기 때문입니다. 두가지 방법이 있습니다. 리엑트 쿼리 + Recoil에 유저정보 모두 저장 + 필요한 곳에서 Recoil 유저정보 업데이트하는 훅 호출 (원래 고민했던 방법) - 장점 - Recoil으로 상태만 가져오면 끝이라 코드가 짧음(필요한 곳에만 hook으로 상태 업데이트) const {nickNa..
ios에서 100vh를 정상적으로 인식하지 못하는 문제가 발생함. 자바스크립트로 높이를 다시 계산하는 방법으로 IOS는 해결했으나 안드로이드 크롬에서 주소창이 숨겨진것 기준으로 vh가 잡혀버리는 문제 발생 두개가 서로 상반된 원인이라 해결하려면 사용자 디바이스에 따라 코드를 2개를 짜서 해야하는데, 이 부분이 반응형 웹을 구현하면서 자연스럽게 해결될것으로 예상되어서, 우선 심각한 ios문제만 수정하였습니다 . 우선 아래 코드를 타입스크립트 부분에 추가하고 const setVH = () => { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); }; window.addEvent..
iOS에 기본으로 들어가있는, 가장 끝까지 스크롤하는 경우 발생하는 바운싱 애니메이션으로 인해 발생하는 오류로, 이 부분을 예외처리 할 필요가 있음. css overflow-y:scroll 가 있는곳에 아래 코드를 넣어서 일단 해결 overscroll-behavior-y: none; //아이폰 바운싱 효과 막음 (편집됨) 결과적으로는 commonLayout으로 감싸준 부분을 없애면서 다시 수정할 예정임.
프로젝트에서 나도 마주했었고, 동료분(경원님)이 마주했었던 업로드가 단계적으로 안되는 문제. - 일반 파일 업로드시 정상적으로 전송됨 - 파일 수정후 바로 업로드시 파일명 없음+확장자명앞에 점이 없음 (png만 있음->사실상 확장자가 없음) - 그 이후 다시 수정시 파일 가져오는거 자체가 막혀버림. 원인: 파일 명 생성 단계에서 파일명이 계속 누락되어 단계적으로 파일명이 사라지고, 파일명이 없는 경우 put요청을 못받아서 나는 415오류 파일 업로드 파일이름이 점점 사라지는걸 볼 수 있다.
몇번 코드를 넣었다가 뺐다가 해보니, 이 코드로 수정했을때 바로 오류가 사라지고, 되돌리니 바로 다시 CORS오류가 발생한다. 며칠동안 테스트를 한 결과 해당 오류가 다시 발생되지 않아서 이 방법으로 해결이 된것으로 판단된다. (아래 내용은 제가 프로젝트 트러블슈팅에 작성했던 내용입니다!) 추정 원인 아마 원인은 aws-chrome간 캐싱 버그로 의심됩니다. 브라우저가 우리가 이미 본 이미지의 URL은 캐싱을 하고있고, 이 부분에서 브라우저가 캐싱된 리소스의 CORS헤더를 기억하고 있고, 우리가 새로운 요청을 보내도 이전 캐싱된 리소스를 사용하게 되어 문제가 발생하는걸로 보입니다. 위 사진으로 보면 오른쪽이 캐싱된 원본 요청이고, 가운데가 캐싱된걸 요청하는것인데, cors관련 헤더가 아에 없어진 채로 요..
이미지 썸네일 픽셀화 현상 큰 이미지를 object-fit:cover로 할 경우 크롬에서는(사파리는 그렇지 않다고 함) 이렇게 픽셀화가 되며 이미지가 자글자글하게 보이는 현상이 있음 //css width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 0.875rem; 아래는 img태그의 object-fit:cover를 하지 않고, div태그에 background-image:url 이렇게 넣고 //css width: 100%; aspect-ratio: 1/1; overflow: hidden; border-radius: 0.875rem; background-image: url(${(props) => props.$imgUrl}); background..
Compiled with problems: × ERROR in src/pages/CommonLoginPage/CommonLoginPage.tsx:2:18 TS2305: Module '"components/common"' has no exported member 'AuthNavButton'. 1 | import React, { useState } from 'react'; > 2 | import { Button, AuthNavButton } from 'components/common'; | ^^^^^^^^^^^^^ 3 | import { AuthInputBox, AuthLogoBox, AuthErrorMsg } from 'components/common'; 4 | import { CommonLayout } ..
지금 진행중인 프로젝트는 모바일 기반으로, 추후 데스크톱 버전을 기획하고는 있지만, 우선은 모바일 우선으로 개발하고, 그 화면을 데스크톱에서 자연스럽게 보여주기 위해 전체 레이아웃을 만드는 작업이 필요했다. 위 사진에 나오는 배경 색상도 모두 지정된 색상으로, 해당 페이지를 이라는 공통컴포넌트로 감싸주면 바뀌게 되어있다. 아래는 CommonLayout코드 (개발 과정이라 리팩토링은 필요하다) 더보기 import React, { useEffect } from 'react'; import { StLayoutBody, StLayoutOuter, StLayoutSection, StSlidingHeader, } from './CommonLayout.styles'; import { FloatingFooter } f..
