자바스크립트의 개념을 공부하다 보면 필수적으로 마주치게 되는 호이스팅에 대해 따로 정리해 본다. 호이스팅 Hoisting 자바스크립트에서 변수 선언이나 함수 선언이 해당 스코프의 최상단으로 올려지는 현상을 말한다. 변수의 호이스팅 먼저 변수에서의 호이스팅을 알아보자. var로 선언한 변수 console.log(hi); // undefined var hi = 'hello'; 위와 같은 코드가 있을 때, undefined가 출력되는 것을 확인할 수 있다. 그 이유가 바로 호이스팅 때문인데, 변수 hi의 선언문이 먼저 최상단으로 올라가 버려 선언되었지만 아직 'hello'라는 할당을 받기 전인 상태이다. var 키워드로 선언된 변수의 경우 선언과 동시에 undefined로 할당된다는 특징이 있다. let 또는..

'Restful API란?' 이라는 질문에 답변을 위한 REST API에 대한 내용을 정리해본다. RESTful API는 결국 REST하다는 의미인데, 먼저 REST가 어떤 의미인지부터 알아야할 필요성이 있겠다. REST API REST API는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST는 REpresentational State Transfer의 약자로, 자원(Resource)에 대한 요청을 행위(HTTP Method)로 처리한다. 주로 JSON, XML 형식의 데이터로 반환되어 처리된다. REST의 구성 자원(Resource) - URI (엔드포인트) 행위(Verb) - HTTP Method (HTTP 요청 메서드) 표현(representations) -..

www.google.com 을 주소창에 입력했을 때 일어나는 일 꼭 구글이 아니더라도, 우리는 어떤 주소를 브라우저의 주소창에 입력했을 때, 페이지가 바로 뜨는 것을 당연하게 생각하고 있다. 어떤 식으로 그 페이지를 불러오는지에 대해 고민해 본 적이 있던가? 브라우저의 렌더링 과정에 대해 다시 공부하다보니 이 과정이 궁금해지기도 했고, 프론트엔드 개발자라면 반드시 알고 있어야 할 내용인 것 같아 한번 정리해보려고 한다. 결국 웹페이지에 우리가 원하는 화면이 보이려면 서버에서 데이터를 가져와야 한다. 데이터를 받아오기 위한 과정을 나열해보자! www.google.com로부터 IP 주소 얻어오기 도메인 도메인이라는 것을 한번쯤 들어봤을 것이다. 쉽게 말하면 각각의 IP 주소에 붙은 이름표 같은 것이다. IP..

Today, What I learned? 내 파트는 아니었지만 급하게 좋아요 관련 버그를 수정하게 되었다. 담당하지 않았던 파트라 코드를 들여다볼 일이 많지 않았는데 오히려 좋아!.. 이번 버그는 새로고침 했을 때 하트가 유지되지 않는 버그였다. 분명 이전에는 되었던 것 같기도 한데 그 사이 수정이 되면서 뭔가 버그가 생긴 듯.. 🤔 원인 파악 myProjects 컬렉션에 현재 프로젝트 id 값이 확인되어야만 하트를 채우는 isLike가 판단될 수 있는데, 새로고침 했을 때 useQuery에서 데이터를 받아오는 시간이 있어서 처음에 undefined로 값이 들어가 버리는 게 문제인 듯했다. 그래서 새로고침하고 하트가 풀리니까 다시 누르면 숫자가 1씩 늘어나는.. 이상한 버그.. 로그를 보면 true로 m..

Today, What I learned? 유저 피드백을 반영하여, 기존의 공유 기능에서 카카오톡 공유를 추가하기로 했다. (아무래도 많이 쓰이니까) 이전 프로젝트에도 구현되어 있던 부분이라 (담당하진 않음) 꽤 많은 참고를 했음에도?.. 조금 다르게 적용하려다 보니 오류가 좀 발생해서 기록.. 사전 작업 일단 카카오 디벨롭스에서 앱 등록과 플랫폼에 도메인 등록이 필요하다. 앱을 등록하면 앱 키를 확인할 수 있고, 여기서 필요한 값은 자바스크립트 키값. env 파일에 추가해 주자! 또 플랫폼에서 Web에 도메인을 추가해 준다. 나는 배포주소랑 로컬호스트를 추가해 주었다. 추가적으로 PR시 vercel 프리뷰에서 확인하고 싶다면 프리뷰 주소를 추가해줘야 한다. index.html index.html의 헤더 ..

Today, What I learned? 주말쯤에 디자인 수정사항을 반영했던 추가 기능인 인풋 태그 클리어 버튼이 제대로 동작하지 않는 이슈.. 버그를 해결하다가 제어 컴포넌트와 비제어 컴포넌트에 대해서도 찾게 되어서 한 번 정리해 본다. 원인 파악 일단 처음은 동작이 잘 되는데, 한 번 지우고 난 뒤부터 제대로 동작이 되지 않았다. 그래서 로그를 찍어보니.. state는 변경이 잘 되었지만 input창에 비어버린 값이 다시 반영이 안 되고 있는 상태.. input 태그에 state의 값이 즉각적으로 반영이 되지 않고 있다는 것을 확인했다. 원인은 바로 defaultValue !.. 마이페이지는 대체로 수정하는 영역이기 때문에 무의식적으로 value 대신 defaultValue를 추가했던 것 같다. (기..

Today, What I learned? 지금 프로젝트에서 사용되고 있는 리액트 쿼리의 staleTime과 CacheTime, invalidateQueries에 대한 개념이 정립되어 있지 않은 것 같아서 한번 정리하면서 공식문서도 읽어보고.. 미래의 나를 위한 기록!.. 공식 문서 링크는 이쪽이다. https://tanstack.com/query/latest/docs/react/overview Overview | TanStack Query Docs TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it ma..

Today, What I learned? 사실상 라디오라는 콘솔은 라디오버튼에 해당하는 경력 부분 컴포넌트에 들어가 있음에도 불구하고, 전체적으로 렌더링이 되는 것을 알 수 있었다. 부모컴포넌트의 상태가 변경되었기 때문에!... 이런 쓸데없는 렌더링 횟수를 줄이고자, React.memo를 적용하기로 했다. UserTopInfo -> 체크 영역을 감싸는 컴포넌트 -> 체크박스/라디오 버튼 컴포넌트 형태로 구성이 되어있어서, 클릭의 주체가 되는 가장 내부 컴포넌트인 체크박스와 라디오 버튼 컴포넌트에 memo를 적용했다. 둘 다 userTopInfo에서 전역 상태인 userInfo라는 props를 공통적으로 받고 있다. (유저가 수정한 정보에 대한 부분!) profiler 정보 수정과 관련된 UserInfoT..

어떤 에러? 프로필 이미지가 사용되는 어느 곳이던 나타나던 이 403 에러.. 프로필 이미지를 제대로 못가져와서 그런 듯 보였다. 그래서 프로필 이미지가 빈번하게 제대로 뜨지 않았다. 이렇게 비어있는 이미지를 확인해보면 src가 비어있는 것을 볼 수 있다. 원인 파악 이 문제는 구글로 로그인한 계정에만 나타나는 현상.. 403 에러는 서버에 요청을 했지만 권한상의 문제로 거절되었다는 에러라는데, 보통 다른 도메인에서 호출할 때 발생한다고 한다. 다른 도메인에서 온 요청임을 확인하고 거절했단 것이다. 해결 과정 https://stackoverflow.com/questions/56242788/http-403-on-images-loaded-from-googleusercontent-com HTTP 403 on ..

Today, What I learned? 마이페이지의 UI가 꽤.. 변경이 되었다. 기존과 다르게 기술 스택별 이미지를 추가해야 하는데, 일일이 import 해올 수는 없으니.. 동적으로 이미지 경로를 지정하는 방법에 대해서 찾아보게 되었다. 엑스박스를 보고 팀원분이 require라는 힌트를 주셨다. 기존 상태 각각 기술 스택에 해당하는 아이콘 이미지 적용을 위해 아래와 같이 코드를 작성했다. 하지만 모조리 엑박 ㅠ... require() 적용 require를 아래와 같이 적용해보았을 때, 이미지가 잘 뜨는 것을 볼 수 있다. 블로그들을 보다보니 .default를 붙여야 엑박이 안 뜨는 경우가 또 있던데, 나 같은 경우는 오히려 붙이니까 엑박이 떴다. 케이스 바이 케이스인지 모르겠지만? require만 ..