🔁 최근 특정 크롬 브라우저에서 navigator.share를 호출할 때, 공유 창이 열리지만 무한 로딩 상태에 빠지는 현상이 있었다.아래 콘솔로 확인해보면 navigator.share는 true로 나오니 API는 존재하는데 Object.keys(navigator.s

지금 내 프로젝트가 어떻게 빌드되고 있는지에 대해 알아보다가자주 듣던 컴파일, 번들링에 대해 좀 더 베이직한 의미에 대해 한번 찾아봤다. 대략적으로 이해했는데 실제로 직접 해보며 이해도를 높여가고 싶군..!예를들면 리액트에서 jsx, tsx로 작성한 코드 → javas

오늘 귓동냥으로 좀 더 알아봐야겠다고 생각한 부분은 빌드할 때 shell파일에 대한 전반적인 내용이다. 일을 하다보면 이미 세팅되어있던 방식대로 빌드하고 그때그때 에러만 수정하면서 배포하는 경우가 많아서 오늘은 기본적인 부분들부터 찾아보고 정리해보았다. 보충해야할 내용

대충 알고 있을 때 제대로 비교하기 위해선 ===를 사용해야한다 정도만 알고 있었던 것 같다. 가끔 쫌쫌따리로 스프링 코드를 볼 때 ==가 많이 나오길래 같은 의미이지만 스프링에선 이 연산자로도 비교가 가능한줄 알았다. 👉🏼 {} === {}: {} 객체 안에 들어

프론트엔드 개발자로 일하면서 지식의 부족함을 많이 느껴 짬이 날때마다 그 동안 궁금했던 단어들을 찾아보고자 한다. 그 중 어제 찾아봤던 부부은 CI/CD에 대한 부분이다. 사실 세팅까지 해서 적용해보는게 의미가 있는 부분이라고 생각하긴 하지만 현재 업무에는 이미 적용되

오늘 일하는 중 시간적 여유가 생겨 이때다 싶어 보기 불편했던 코드를 보다 간편하게 수정했다. 수정한 부분은 마이페이지의 프로필 변경 함수이다. 새로운 제품들이 들어오고 UI도 함께 리뉴얼 시키면서 프로필이미지를 설정하는 부분들의 UI도 함께 수정되었다. 그러면서 이번

Failed to read a named property 'toJSON' from 'Window': Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.c

이제 막 1년이 넘어 2년차 프론트엔드 개발자가 되었다. 점점 더 궁금한 부분들이 많아 찾아보게되는데 대부분 일을 관리하는 개인 노션에 적다보니 아쉽다는 생각이 들어 블로그에도 적어보려 한다. 타입을 정의할 때 같은 string이더라도 어떻게 정의하는지 다르다. typ

이벤트는 웹 브라우저의 히스토리 스택에서 상태가 변경될 때 발생하는 이벤트입니다. 이 이벤트는 주로 브라우저의 뒤로 가기 및 앞으로 가기 버튼을 사용하여 페이지를 탐색하거나 JavaScript를 사용하여 브라우저 히스토리를 조작할 때 유용하게 활용됩니다.popstate

다른 환경에서도 작동할 수 있도록, 즉 aos에서만 되던 기능을 ios에서도 작동할 수 있도록 하는 것텍스트A를 B에서도 이용할 수 있도록 사용하는 언어를 바꿔주는 것, 즉 리액트가 사용된 코드를 뷰로 바꿔주는 것

안드로이드 빌드하다가 ctrl+c, enter 뭘해도 나오던 문구... 사라지지 않아서 nbsp를 잘못 쓴 곳이 있나 찾아봐도 찾지 못하다가 zshrc를 통해 원인을 찾고 해결해서 기록해둔다 😇(사실 너무 별거 아니라서 어이없지만... ㅎㅎ )🚨 prompt_con

react-signature-canvas 라이브러리를 통해 유저의 서명을 받아야하는 화면을 개발하였다참고) 보안상 이유도 있다보니 코드는 축약하거나 단순화해서 기록하였다!https://www.npmjs.com/package/react-signature-canv

성능 최적화를 위해 사용되는 리액트 훅React 컴포넌트가 렌더링될 때마다 해당 컴포넌트 내부의 함수들도 새로 생성되는데 컴포넌트 구조가 복잡해지고 하위 컴포넌트들이 불필요하게 리렌더링될 때 성능 문제가 발생할 수 있음 특히 함수형 컴포넌트 내부에서 정의된 함수들은

요청받은 버그를 해결하기 위해 안드로이드 빌드를 해서 dev에서 수정하고 STG에서 확인해서 최종 완료 처리를 해야했다. 😅 aos 개발 경험이 별로 없어 걱정 되는 마음으로 빌드를 진행했다. env파일의 이름은 다를 수 있으나 난 로컬에서 확인할 때는 .env.de

로그인 여부 확인 isAuthenticatedemotion code에 따라 좋아요 여부 등록emotion code : 400101 (좋아요), 400102 (싫어요)myEmotionCd.code가 400101일 경우 좋아요 삭제myEmotionCd.code가 4001

(리뷰작성 시 총점을 표시를 5개의 별로 표시할 경우 )왼쪽인 i <= index는 i가 index보다 작거나 같은지를 평가하는 조건starStates 배열의 인덱스가 index보다 작거나 같은 경우에 대해 true를 할당하고, 그 외의 경우에는 false\*\*

\- 성능 최적화를 위해 사용되는 리액트 훅React 컴포넌트가 렌더링될 때마다 해당 컴포넌트 내부의 함수들도 새로 생성되는데 컴포넌트 구조가 복잡해지고 하위 컴포넌트들이 불필요하게 리렌더링될 때 성능 문제가 발생할 수 있음 특히 함수형 컴포넌트 내부에서 정의된 함수

https://www.npmjs.com/package/cheeriocheerio는 HTML에서 document.querySelector()처럼 HTML 요소를 골라낼 수 있는 라이브러리이다.

drag와 onClick 기능이 함께 있을 경우 drag를 하나의 스테이트에 따로 관리하여 제어하였다

버튼 disable처리된 상태일 때 클릭 이벤트 버그가 있어 수정했다.버튼이 항상 bottom:0으로 하단에 있다보니 버튼이 diabled되어있는 상태에서 스크롤을 내리다가 클릭이벤트가 있는 요소와 겹칠 경우 겹쳐있는 아래 요소의 클릭이벤트가 진행되는 문제였다. dis