vercel에서 가장 최근 내역인 사파리 브라우저 오류 관련 커밋을redeploy했고, 에러로 처리된 배포 결과를 받았는데요. 해당 기록은 Delete 했고, 일단 main에 머지를 한다면어떻게 보여질까 궁금해 깃허브의 PR을 통해 결과를 확인하니PR에서 체크가 완전히 이뤄지지 않아 문제가 되고 있었어요. conflict는 없었지만 이대로 합쳤을 때 100%어떤 문제가 발생할 것이라는 것은 확신했습니다.어떤 부분을 놓치고 있었을까redeploy할 때, 이전 cache를 유지하는 것에 체크를 안한 것이 문제였습니다.이전에 캐싱된 데이터와 redeploy 시도를 할 때 캐싱하는 데이터의 차이가 발생해문제가 일어난다고 예상했는데요.이유를 명확히 파악하지 못했지만 이유 파악 후, 나중에 업데이트를 하겠습니다.해..

1이 제일 많은 행과 1의 개수를 배열로 리턴하는 문제.1의 개수가 같은 행이 여러 개라면, 행 번호가 가장 작은 행을 선택해야 합니다.문제 접근행과 개수를 구하는 것이 목적이므로 해당 변수들에 값을 할당해 주면 됐습니다.1이 포함된 행을 찾기 위해 filter 메서드를 사용했고이전 배열의 1의 개수와 현재 배열의 1의 개수를 비교해개수가 동일하거나, 아니면 1을 더 많이 가지고 있는 배열을매번 비교를 통해 설정해 줄 필요가 있어 반복문을 사용했습니다.문제 해결/** * @param {number[][]} mat * @return {number[]} */var rowAndMaximumOnes = function(mat) { let count=0, row=0; for(let i=0; i ..

회원 가입 관련 form에서 동작하던 state와 통신 함수를커스텀 훅으로 분리해 운영했을 때,클릭 이벤트 핸들러에서는 state와 통신이 정상 동작했지만키보드 이벤트 핸들러에서는 통신이 이뤄지고 state의 변경은 되지 않는 오류가 있었습니다.문제 발생 이유: 커스텀 훅의 mutation 함수를 서로 다른 곳에서 참조를 통해 사용했기 때문입니다.한 마디로 하나의 함수로 동작한 것이 아닌 서로 다른 2개의 함수가 각자 동작한것인데요.React 공식 문서의 커스텀 훅 만들기 파트를 보면 자세히 알 수 있습니다.Q.사용자 정의 Hook은 어떻게 독립된 state를 얻는 건가요?A. 각각의 Hook에 대한 호출은 서로 독립된 state를 받습니다.useFriendStatus를 직접적으로 호출하기 때문에 Rea..

low와 high에서 대칭되는 값이 몇 개인지 구하는 문제였습니다.가장 먼저 고려했던 것은 대칭 유무를 어떻게 구분하는 것인가였는데요. example 2를 보며 유사성을 찾았습니다. Example 2:Input: low = 1200, high = 1230Output: 4Explanation: There are 4 symmetric integers between 1200 and 1230: 1203, 1212, 1221, and 1230. 숫자를 중간을 기준으로 나눠 왼쪽값과 오른쪽 값이라고 예를 들었을 때,왼쪽 값의 합과 오른쪽 값의 합은 같다는 특징이 있었어요.low부터 high의 수를 어떻게 나누고 값으로 산출해내느냐가 관건이었습니다.문제 접근1) 주어진 수의 범위가 넓어 for문을 사용하는 것이 맞는..

문자열 배열이 주어지면 단어 내의 모든 문자열에 나타나는모든 문자의 배열을 반환하는 문제. Example 1:Input: words = ["cool","lock","cook"]Output: ["c","o"]문제 접근모든 문자열에 공통되는 단어라면 어떠한 문자열을 기준 삼아도 됐지만배열의 첫번째 문자열이 문제를 풀 때 편하겠다 싶어  첫 문자열을 변수에 할당했습니다. 두 번째로 요소마다 공통 문자를 찾아야 했는데요.의미 없이 반복문을 여러 번 사용해서 찾기보단 JS의 every라는 메서드를 사용해 처리했습니다.가독성도 좋고, 훨씬 효율적이니까요! 이후 공통 문자가 있다면 return 할 배열에 추가해 주는 것으로 해결하려고 했습니다만테스트를 통과하지 못했는데요.첫 번째 문자열에 공통 문자가 2개이고, 다른..

문제 발생사내 프로젝트 진행 중, react-hook-form의watch로 email 값을 감지하는 부분에서 문제가 발생했습니다. 이메일로 전달받은 인증코드와 이메일 주소를 API를 통해 전달 후다음 화면으로 넘어가려던 타이밍이었는데요. 'Enter'키로 통신 함수를 호출하면통신을 마친 뒤 Chrome에서는 watch로 감지하던 email 값이 유지되는 반면,Safari에서는 값이 유지되지 않고 undefined로 초기화가 이뤄지는 오류가 발생했습니다. 드디어 크로스 브라우징 이슈를 경험하게 되었네요ㅎㅎㅎ원인 파악여기저기 console로 확인하며 체크해본 결과,특정 useEffect가 동작 후 email 값도 초기화가 이뤄지는 것을 확인했는데요.문제가 발생하는 곳으로 추정되는 useEffect 부분에 집..

2024.05.23 - [TIL] - 그저 작성했는데 싱글톤 패턴이었던 것에 대하여 그저 작성했는데 싱글톤 패턴이었던 것에 대하여오늘도 평화로움을 바라며 코딩하던 날이었습니다.서버로부터 전달받은 토큰을 변수에 캐싱하는 로직을 포함해 PR했는데요.하나의 인스턴스로 관리한다는 키워드로 구글링을 할 때,여러 블로betterpalywon.tistory.com이전 포스팅인 싱글톤 패턴 구현에 이어 제가 구현한 싱글톤 패턴의 문제점과완전한 싱글톤 패턴으로 변경해야 하는 이유, 그리고 리팩토링했던 방법을 설명해보려 합니다.이전 싱글톤 패턴의 문제점인스턴스의 내부 상태에 접근해 변경이 가능하다! 이전 코드를 예제로 들어보겠습니다.let userInstance = null;const createUser = () => {..

오늘도 평화로움을 바라며 코딩하던 날이었습니다.서버로부터 전달받은 토큰을 변수에 캐싱하는 로직을 포함해 PR했는데요.하나의 인스턴스로 관리한다는 키워드로 구글링을 할 때,여러 블로그가 있었지만 제로초 블로그를 통해 제 코드가 싱글톤 패턴이라는 것을 깨닫고해당 디자인 패턴에 대해 알게되었습니다. 사실, 제가 처음 개발 분야에 입문하고 여러 인터뷰에 참여할 당시싱글톤 패턴에 대해서 알고있느냐는 질문을 몇 번 받았는데요.2년차가 된 지금, 제가 싱글톤 패턴을 기반으로 한 코드를 작성했다는게 신기해서포스팅하게 되었습니다.싱글톤 패턴이란?클래스의 인스턴스를 하나만 생성하고, 그 인스턴스를 어디서든 접근할 수 있도록 하는 디자인 패턴인데요.단 하나의 객체만을 만들 때 사용되며 어디서든 해당 객체에 접근할 수 있다는..