doeunn.log

🚀 JSP(Java Server Page)란 JSP는 Java Server Page의 약자로, HTML 코드에 JAVA 코드를 넣어 동적 웹페이지를 생성하는 웹 어플리케이션 도구입니다. JSP가 실행되면 자바 서블릿(Servlet)으로 변환되며 웹 어플리케이션 서버에서 동작되면서 필요한 기능을 수행하고 그렇게 생성된 데이터를 웹페이지와 함께 클라이언트로 응답합니다. JSP 동작 과정 브라우저가 웹 서버에 JSP에 대한 요청 정보를 전달한다 브라우저가 요청한 JSP가 최초로 요청했을 경우만 JSP로 작성된 코드가 서블릿 코드로 변환된다(java파일 생성) 서블릿 코드를 컴파일해서 실행 가능한 bytecode로 변환한다(class 파일 생성) 서블릿이 실행되어 요청을 처리하고 응답 정보를 생성한다. 서블릿(..

🚀 유틸리티 타입이란 ? 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법입니다. 예를 들어 Information이라는 인터페이스에서 일부 속성만 사용하고 싶다면, 일부만 있는 타입을 선언해서 사용하지 않아도 유틸리티 타입 한 줄로 보다 간결하게 사용할 수 있게 됩니다. 유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있습니다! 자주 사용되는 유틸리티 타입 알아보기 자주 사용되는 타입을 몇 개 알아봅시다 ! Partial Partail 타입은 특정 타입의 일부만 사용하는 것을 허용하는 타입을 정의할 수 있습니다. interface Address { e..

🚀 Hook에 대해 정확히 이해해보자 ..😂 React를 공부하고 있지만, 정확하게 "Hook에 대해 설명해봐" 하면 어... 하게 되어서 이번 기회에 한번 제대로 정리해보려고 합니다 :) 제가 커스텀 훅을 제대로 만들지 못하는 이유가 Hook에 대해 정확하게 이해하고 있지 못해서라고 생각이 들어서이기도 합니다.. Hook이 등장하게 된 배경 Hook은 리액트 16.8 버전 이후로 추가된 기능이며, Hook이 등장하기 전에는 상태를 관리하기 위해 class를 작성했었습니다. Hook이 등장하기 전 리액트에는 여러 문제들이 존재했습니다. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려웠다. Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다. 생명주기 컴포넌트로 인한 복잡한 컴..

🚀 styled-components와 emotion, 비슷해보이는데.. 뭐가 다를까 저는 css-in-js를 styled-components로 시작하게 되어서 줄곧 styled-components만 사용했었는데요. 그런데 emotion을 사용하는 회사도 많아서 한번 사용해 보았는데 사용법이 거의 동일해서 대체 어떤 차이가 있는지 궁금해 정리하게 되었습니다 :) 제공하는 기능 라이브러리 props 전달 미디어 쿼리 전역 스타일링 중첩 선택자 Server Side Rendering 테마 스타일링 스타일 컴포넌트 상속 styled- components ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ emotion ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ 사용 트랜드 @emotion/core vs @emotion/react vs styled-comp..

🚀 Access Token과 Refresh Token ? Access Token는 사용자를 인증하는 토큰으로 유효 기간이 정해져 있어, 해당 유효기간이 끝나게 되면 인증 기간이 만료되었다는 뜻으로 더이상 토큰을 사용할 수 없습니다. 가끔 은행 어플을 사용하다보면 세션이 만료되었다면서 다시 로그인을 하라는 모달창이 뜨는 것을 본 적 있으실 겁니다. 유효기간을 길게 하려면 충분히 길게 할 수는 있지만, 해당 토큰이 탈취되었을 경우에는 얼마든지 악용할 수 있으므로 적당한 유효기간을 정해두는 것입니다. 하지만 보안상의 이유로 유효 기간을 짧게 해두면 당연히 사용자 입장에서는 불편할 수 밖에 없습니다. 따라서 이때 Refresh Token이라는 것으로 Access Token의 유효 기간은 짧고, 자주 재발급 하도..

🚀 React-Query의 useInfiniteQuery로 무한 스크롤 기능 구현 이번 글에서는 무한 스크롤 기능을 구현해 보려고 합니다. 무한 스크롤은 페이지네이션을 위한 api를 통해 page와 관련된 파라미터를 연속적으로 넘기면서 계속 데이터를 받아오고 이어서 화면에 보여주는 로직으로 작동되게 됩니다. 우선 React-Query 공식 문서에서 useInfiniteQuery 부분을 살펴보면서 정리해봅시다. Infinite Queries | TanStack Query Docs Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI ..