Javascript Array.sort() 정렬이 이상하게 되는 이유
2022. 10. 3. 11:22
TIL/트러블슈팅
요약 JS에서는 배열의 원소를 숫자로 넣었다고해도 각 원소를 문자열로 처리해버린다. 따라서 단순히 Array.sort()를 한다고 했을 때 내부 원소 하나하나를 유니코드로 치환해서 오름차순으로 정렬시키기 때문에 이상한 숫자가 나오는 것이다. 추가로 원본 배열이 정렬되는 것이기 때문에 원본 배열을 따로 저장하거나 깊은 복사를 한 뒤 변수를 따로 선언하여 사용해야 한다 오름차순, 내림차순 정렬 //오름차순 arr1.sort((a, b) => a - b) //내림차순 arr1.sort((a,b) => b - a) Array sort is not working correctly in JavaScript I have tried this code function sort() { var ary = [2, 1, 0.4..
js object 접근 방식
2022. 10. 2. 10:28
TIL/트러블슈팅
Object 접근 방식 const object = { "a" : "1", "b" : "2", "c" : "3" } const key = "c" console.log(object.a) // 점으로 접근 console.log(object["b"]) // 배열처럼 대괄호로 접근 console.log(object[key]) // 변수 값으로 접근 // 모든 object 탐색하는 방법 for(let object_key in object) { console.log(key) } // keys를 통해 배열로 만들어서 접근 for (let key of Object.keys(p)) { console.log(key + " -> " + p[key]) } // 최신방법으로 for (let [key, value] of Objec..
React-query에 캐싱된 데이터 업데이트하기
2022. 9. 29. 20:54
TIL/트러블슈팅
요약 import { useQueryClient } from 'react-query'; const queryClient = useQueryClient(); queryClient.setQueryData(["key"], (oldData: any) => { return [...oldData, id]; }); setQueryData를 통해 key와 update 함수를 전달해주게되면 캐싱된 데이터를 변경할 수 있습니다. 개요 블로그 프로젝트를 진행하면서 게시글 스크랩 기능을 구현을 하였습니다. 단순히 스크랩 아이콘을 클릭했을 때 해당 블로그 아이디를 넘겨주어 진행되는 방식이었는데 스크랩 요청을 보낸 뒤의 상태를 React-query에서 관리하면서 캐싱된 데이터로 인해 최신값으로 변하지 않고 stale한 상태의 데..
python selenium 사용하면서 발행했던 오류 두가지
2022. 9. 9. 23:09
TIL/트러블슈팅
vscode에서 options.add_experimental_option('detach', True) 안먹힘 vscode 에디터 상에서 파이썬 코드를 실행시킬 때 Control + F5를 눌러 실행시켰던게 문제였습니다. 에디터 우측 상단에 화살표를 누르니 정상작동되었습니다. 왜 작동되었는지는 이후 추가할 예정입니다. 매크로 동기 문제 driver.find_element(By.ID, "id").send_keys("id") driver.find_element(By.ID, "pass").send_keys("password") driver.find_element(By.XPATH, "로그인 버튼").click() try: alert = Alert(driver) # 로그인 인증 확인 alert 클릭 alert.ac..
react-query 조건에 따라 캐싱 데이터 refetch 구현
2022. 8. 15. 21:19
TIL/트러블슈팅
개요 블로그 플랫폼에서 북마크 기능 개발을 진행하던 중 react-query 라이브러리를 통하여 서버에서 유저의 북마크 목록을 불러와 현재 북마크 중인지 아닌지를 확인하여 표시하는 기능을 구현하였습니다 하지만 문제가 발생했는데 react-query의 캐싱 기능때문에 북마크를 한 뒤 다시 리렌더링을 하였을 때 포스트 북마크 표시가 돼지 않는다는 문제가 발생하였습니다. 하지만 그렇다고 캐싱 기능을 끄자니 따로 home에서 리렌더링 되었을 때마다 쓸데없이 요청하는 이슈가 발생될 수 있었고 짧게 refetch 시키자니 성능적으로 문제가 될거라 생각하여 북마크 라는 특정 기능을 수행할 때만 데이터를 받아오는 방법을 고민하였습니다. invalidateQueries 특정 로직을 수행할 때 invalidateQueri..
SSG 도입하기 / getStaticPaths, getStaticProps
2022. 7. 7. 19:17
TIL/트러블슈팅
요약 Error : getstaticpaths is required for dynamic ssg pages and is missing for... 를 만나서 정리하였습니다 getStaticPaths와 getStaticProps은 동적라우팅할 때 getStaticProps를 통해 불러올 데이터들을 getStaticPaths로 정해준다고 생각하면 됩니다. 우선 동적인 페이지를 SSG로 빌드시키기 위해선 빌드할 때 페이지를 만들어야 합니다. 하지만 SPA, SSR 방식으로 구현했을 때를 생각해보면 페이지 요청시마다 데이터를 받아오고 보여주면 되지만 SSG로 구현하는 경우 요청이 없더라도 미리 만들기 위해 데이터를 받아와야합니다 이 때 만약 동적인 페이지라면 해당 URL의 모든 경우에 따라 데이터를 요청해서 받..
타입을 어떻게 선언해야할까
2022. 7. 5. 10:16
TIL/트러블슈팅
1. 문제 정의 → NextJS에서 Redux를 도입할 때 발생한 store 타입을 정의하는 오류입니다. 'CounterState' 형식의 인수는 'CombinedState' 형식의 매개 변수에 할당될 수 없습니다. 'counter' 속성이 'CounterState' 형식에 없지만 '{ counter: CounterState; }' 형식에서 필수입니다.ts(2345) → makeStore 딱 보자마자 직접 정의할 수 없는 타입이라고 생각이 들었습니다. 2. 해결과정 Redux를 도입하고 설정하면서 발생한 오류들입니다. 정리해보니 이미 짜여진 틀에서 많이 사용되고 있어 이걸 정리해야할까를 고민해보았습니다. 따라서 개인적으로 자료를 찾아보며 과정만을 정리해봤을 때 시작부터 문제를 너무 어렵게 생각했고 Typ..
React hook is called in a function which is neither a React function or a custom React Hook
2022. 7. 4. 22:33
TIL/트러블슈팅
결론 : 컴포넌트 생성할 때는 무조건 대문자로 한다 https://www.youtube.com/watch?v=KxHOHg5raQ4&t=436s 여기에도 소개 되었다 import React from 'react' import "./PortfolioList.scss" function portfolioList({title, active, setSelected, id}) { return ( setSelected(id)}> {title} ) } export default portfolioList 위 예시에서 발생하였습니다. 처음 jsx파일을 만들었을 때 portfolioList로 생성했는데 글자 맨 앞이 소문자로 선언했다면 hook을 사용할 때 에러가 발생하게 됩니다. import React from 'react..
SSG를 업데이트하기 위한 증분 정적 재생(ISR)
2022. 6. 27. 11:41
TIL/트러블슈팅
개요 앞선 내용과 이어지는 내용입니다! https://choiblog.tistory.com/2 SSG, SSR의 차이점을 문제를 통해 확실히 정리 요약 노션을 사용한 블로그 개발을 Nextjs로 진행하던 중 초기 Notion API를 사용하는 부분에서 어려움을 겪어 유튜브를 참고하여 진행하였습니다. 이때 유튜브에서 진행하는대로getStaticProps를 사용 choiblog.tistory.com https://choi-notion-blog.vercel.app/ HOME | CBJ Blog useState가 어느 부분에서 문제였는지 팀원에게 질문을 받아 이전에 잘 몰랐던 사항들을 정리하여 설명해주었습니다 June 23, 2022 |#React choi-notion-blog.vercel.app 요약 1. N..
JWT 로그인을 구현하면서 발생한 문제 정리2
2022. 6. 25. 10:23
TIL/트러블슈팅
요약 1편에서 리덕스로 로그인을 구현하였는데 새로고침하면 저장했던 변수값이 초기화 되는 현상을 발견했고, 따로 redux로 로그인을 관리하려면 추가적인 모듈이 필요하다는 것을 확인했습니다. 하지만 잘 사용되지 않았고 주로 cookie를 사용한다고 하여 cookie로 바꾸게 되었습니다. 구현 과정 리덕스로 토큰을 받아 현재 로그인 상태를 관리하고 있던 중 새로고침을 하게 되면 로그인이 풀리는 현상을 발견하게 되었습니다. 확인해본 결과 redux 문제였고 React는 SPA로 동작하기 때문에 발생할 수 있다고 생각하여 수정하게 되었습니다. 몇가지를 더 찾아보니 추가적인 모듈을 설치하게 되면 로컬 스토리지로 저장하여 사용할 수 있다는 문서를 확인하였지만 로컬 스토리지는 이번 로그인 구현 방식와 맞지 않아 쿠키..