검색 기능 구현에 있어서 디바운싱(debouncing) 이라는 개념을 적용하였다. 연이어 호출 되는 함수들 중 마지막 함수만 호출 하도록 하는 것으로 주로 ajax 검색에 사용 된다.검색 창에 검색어를 입력 시 바로 결과를 보여주려면 검색 창 input에 onCha

npx create-next-app 으로 프로젝트를 세팅을 시작하는데, 터미널 창에서 이런 물음이 나왔다.Use App Router (recommended)? No / YesApp Router가 무엇인가에 대해 찾아보니, Next13부터는 기존의 page 디렉토리 기

RTK 와 RTK-query 관련 일화는 더 많지만 뒤에 SSR 포스트와 더 연관 있어서, 일단 이번 포스트에서는 찾아봤었던 사용법 몇 가지와 발생했던 에러 해결에 대해 이야기 하겠다.전체 코드는 여기를 확인하길 바란다.영화 데이터를 가져오기 위해서 header에

백앤드 서버 없이 간단하게 로그인을 구현 하고 싶어 firebase를 사용하였다. 다양한 로그인 방식을 지원 하는데 그 중에서 구글 로그인 방식을 사용하였다. firebase 콘솔 설정 방법과 코드 적용 방법에 대해서 이야기 하겠다. 프로젝트 추가 클릭프로젝트 이름

typescript도 공부했고, state 관리 라이브러리들도 공부 했고 이를 활용한 프로젝트를 하나 하고자 생각하여 TMDB API를 사용하여 디즈니 플러스 클로닝 애플리케이션을 제작 하였다. 프로젝트는 여기로 접속 가능하다. ReactTypescriptNext.j

JSON 형식의토큰을 주고 받으면서 인증 하는 방식토큰을 헤더에 실어 서버가 클라이언트를 식별 할 수 있도록 함.기존의 세션 인증 방식을 보완한 방법Header : 해시 알고리즘 등의 메타 정보 포함Payload : key:value 형식의 정보Signature: H

like 구글 로그인 기능웹 서버에 구글 비밀번호를 제공하지 않고도, 구글 계정의 일부 접근 권한을 부여 할 수 있음.SNS 간편 로그인 기능사용자가 서버에 구글 아이디와 패스워드를 보냄 서버에서 구글로 로그인 요청구글 에서 서버로 정보 보내줌서버에서 사용자에게 로그인

main branch에 다른 branch( branch명 “typescript”)를 merge 하는 상황 에서 다음과 같은 에러가 나와, merge가 실행되지 않음.typescript branch의 시작이 main branch로부터 시작하지 않았기에 unrelated

사용자가 특정한 웹 사이트에 방문할 때, 사용자 컴퓨터에 저장하는 기록 파일서버의 자원을 전혀 사용하지 않음.ex) 아이디와 비밀번호를 저장 하시겠습니까? , 팝업 오늘 하루 열지 않기 한 명의 사용자(브라우저)의 상태를 유지하는 기술서버가 클라이언트에게 고유한 Ses

브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체등록된 history 갯수이동 시, 스크롤 위치 복원 여부 지정 하는 옵션auto : 기본 값, 새로고침 해도 이전 스크롤 위치 그대로 유지 함.manual : 새로고침 시, 무조건 스크롤 최상단으로 이

npm = Node Package Manager 말 그대로 노드 패키지를 관리해주는 틀.

✍️ styled components 에서 background-image를 적용하려고 하니 css처럼 경로를 입력하니 적용이 안되어 찾아 보았다.

github Pages 를 이용해 사이트를 호스팅 하였는데, favicon이 보이지 않았다. (로컬에서는 정상적으로 잘 나타남.)

✍️ 과제 하면서 README를 써야 됬어서 찾아 본 것을 토대로 정리해보았다. 찾아본 것을 토대로 업그레이드 하면서 수정해 나가야겠다. (README를 쓰고 있는 내 자신 좀 멋지다. 😼)

✍️ 입력 폼 검증할 때 주로 많이 사용 하는 정규표현식, 매번 찾아 볼 때 마다 언젠가 정리 해야지 해야지 하다가 드디어 지금 한다. 메서드와 주로 사용하는 패턴에 대해 정리해 보았다.

✍️ 어플리케이션을 80 포트가 아닌 다른 포트로 배포를 해야 되는 상황에서, 에러가 발생해 찾아보다가 AWS에서 포트 설정을 따로 해줘야 한다고 한다. 그 과정을 기록해보았다.

AWS EC2 서버를 사용하여 배포하고자 하는 상황. 다음과 같이 80 포트가 거부되는 에러가 발생했다.

✍️ 로그인에 성공하고, api 요청을 할 때, 매번 요청 할 때마다 인증 문제로 토큰을 헤더에 넣어서 보내야 했는데, 이 상황 이 불편하여 개선하고자 찾아보다가 발견하였다. interceptor의 기본 정의와 사용 방법 그리고 필자의 상황에 따른 적용 방법을 기록

✍️ 1번 방법은 유지보수 까지 고려했을 경우, 적합한 방법 이고, 2번 방법은 직관적으로 추가 패키지 설치 없이 간단하게 실행 할 수 있는 방법이다.

✍️ create-react-app을 이용해 제작한 어플리케이션을 배포해야 되는 상황이었는데, githubpages를 사용 해보자 하여 방법을 정리해 보았다.