개발 여행자

react-query 도입기 모두의 시간 프로젝트를 짧은 기한 내에 개발하면서 유지보수의 필요성을 크게 느끼고 있었다. 메인 개발을 전부 마친 이후에 공통 컴포넌트를 우선적으로 재정돈하고 react-query를 도입했다. React Query를 도입 해야겠다고 생각한 가장 큰 이유 중 하나는 API를 요청해야 하는 페이지가 하나 둘 늘어났고 useEffct, async await, try catch, loading state... 코드의 줄 수가 불필요하게 길어지고 복잡해졌기 때문이다. 또한 생성한 방의 정보를 불러오는 API를 호출하는 페이지가 많은데, 데이터가 업데이트 되지 않았을 때는 일정시간 내에는 동일한 데이터를 사용하는게 맞다고 판단했다. API 요청을 최소화 하고싶었고, 추후 방생성하는 페이..

모두의 시간 서비스 QA 과정을 거치면서 발견한 크로스 브라우징 문제를 해결했던 경험을 작성한다.iOS15 버전이 릴리즈 된 이후에 사파리 브라우저에서만 발생하는 '크로스브라우징' 이슈인 만큼 자세히 기록하고자 한다.1. 이슈 발생모두의시간 서비스에서 방을 생성하는 과정에서 input창에 정보를 입력해야 되는 부분이 있다.input 창을 클릭하면 하단에서 키보드가 올라오는데, 키보드 창이 올라온 상황에서 스크롤을 아래로 내리면 검은 빈공간이 표시된다.서비스 사용에는 문제가 없지만, 사용자의 경험을 헤칠 수 있는 문제가 있기에 이를 해결하고자 했다.파악한 이슈는 다음과 같다.키보드를 열기전 : 화면의 높이키보드를 열었을 때 : 화면의 높이 + 키보드의 높이키보드가 나오기 전에는 document가 존재할 수..

1. var var 키워드가 호이스팅이 된다는 것은 이해했지만, (이전 작성했던 글) let과 const 키워드도 호이스팅이 된다는 것을 완전히 이해하지는 못했었다. 이번에 헷갈렸던 이론을 탐구해보고자 글을 작성한다. var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조가 가능하다. console.log(abc); // undefined abc = '123'; console.log(abc); // 123 var abc; 단, 할당문 이전에 변수를 참조하면 언제나 undefined를 반환하는 것에 유의해야 한다. 하지만 변수 선언문 이전에 변수를 참조하는 것은 가독..

1. 중첩함수와 외부함수 함수는 전역에서 정의할 수도 있고, 내부에서 정의할 수도 있다. 함수 몸체 내부에서 함수가 정의된 것을 '함수의 중첩'이라고 한다. 그리고 함수 몸체 내부에서 정의한 함수를 '중첩함수(nested function)' 중첩함수를 포함하는 함수를 '외부함수(outer function)'라고 한다. 함수는 중첩될 수 있으므로, 지역 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다. 다시 말해 중첩 함수의 지역 스코프는 중첩 함수를 포함하는 외부 함수의 지역 스코프와 계층적 구조를 갖는다. 이때 외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라 한다. // 전역 스코프 var x = 'global x' var y = 'global y..