리액트를 사용하는 분들은 server와의 통신을 위해서 많은 state를 관리하기에는 불편함을 느껴서 react-query를 자주 사용하는 것으로 알고 있습니다. 저도 같은 이유로 사용을 하고 있는데 최근에 버전 업을 하면서 생각치 못한 버그가 발견되어서 주의하시라고 게시글을 작성합니다. isLoading이 계속 true가 되는 상황이 생긴다. 우선 react-query -> tanstack/react-query 로 바꾸면 Query key가 배열로 들어가야하는 것은 어차피 오류가 나니까 수정하면 됩니다. 하지만 제일 중요한 것은 isLoading의 상태입니다. 보통 isLoading을 이용해서 true일 때 로딩 컴포넌트를 보여주는 형식으로 이용을 하시는데, 버전업을 하시게 된다면 isLoading이 ..
목차 자바스크립트로 웹사이트를 개발하다 보면 규모가 점점 커져서 파일을 분리하고 싶은 욕구가 생길 때가 종종 있습니다. 그래서 파일을 기능별로 분리시킵니다. 이럴 때 각각의 파일 하나를 모듈이라고 부릅니다. 공부를 하다보면 모듈을 내보내고 가져오는 예제를 자주 만나고는 합니다. 그런데 예제마다 가져오는 방식이 다릅니다. 그 차이는 무엇이고 모듈이란 무엇인지 알아보겠습니다. 아래 코드부터 보겠습니다. // import로 가져오는 경우도 있습니다. import {example} from 'example.js'; // require로 가져오는 경우도 있습니다. const example = require('example.js'); 이 둘의 차이가 무엇이길래 가져오는 방식이 다를까요? 이것을 알려면 우선 역사를 ..
목차 코딩테스트를 풀다가 어느분이 padEnd를 사용해서 해결하시는 것을 보고 공부하고 정리한 내용입니다. 처음에 그 코드를 봤을 때머리가 띵했습니다. 문자열 앞에 문자 추가하기 (padStart) (MDN 정의) 현재 문자열에 다른 문자열을 채워넣어서 주어진 길이에 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작부터 적용됩니다. String.padStart(targetLength, [,padString]) targetLength보다 String의 길이가 만약 더 길다면? -> 그냥 String이 반환됩니다. targetLength보다 작을 때만 문자열이 채워넣어집니다. padString을 안넣으면 어떻게 될까요? -> 빈 문자열이 채워넣어집니다. padString이 채워넣어지다가 문..
목차 지난 게시물 nullish 연산자에 이어 옵셔널 체이닝 연산자에 대해 알아보겠습니다. 옵셔널 체이닝(optinal chaining)연산자 개념 optional chaning연산자 (?.)는 객체 내의 key에 접근할 때 그 참조가 유효한지 아닌지 직접 명시하지 않고도 접근할 수 있는 연산자입니다. ?. 앞의 평가대상이 만약 nullish ( undefined 또는 null ) 일 경우 평가를 멈추고 undefined를 반환합니다. 우리는 코드를 짜면서 객체내의 값을 접근하는 경우가 종종 있습니다. 하지만 항상 그 key값이 존재하는 경우 보다는 없는 경우도 있습니다. 예를 들어, 학생들의 점수 데이터를 가진 객체가 있습니다. mark라는 학생과 john이라는 학생의 영어점수를 접근하려고 합니다. 그..
목차 nullish 연산자란 nullish 연산자는 자바스크립트 최신 스펙에 추가되어 브라우저에서 지원 하는지 확인하고 사용하시길 바랍니다. nullish 연산자는 간단히 말해서 값이 있는 변수를 찾을 수 있는 연산자입니다. 코드를 통해서 nullish를 사용하지 않을 때와 사용할 때의 차이점을 볼게요. const a = null; const b = 'hello nullish'; // nullish 사용 x console.log((a !== null && a !== undefined) ? a : b); // nullish 사용 console.log(a ?? b); // 결과: hello nullish 여기에서 nullish 연산자(??)는 앞에 있는 a의 값을 평가할 때 'undefined' 인지 'n..
