오늘은 네이버 검색 API를 통해 api 데이터를 불러와서 react query로 검색 자동완성 기능구현을 시도해보았다. 결론적으로 말하면 프론트엔드에서 프록시 서버를 통해 CORS 에러를 우회 해결해보려는 시도는 실패했다. package.json에 proxy도 추가해

카카오톡 메시지 보내기도 나에게 보내기가 있고 친구에게 보내기가 있는데 친구에게 보내기는 좀더 고려할 사항이 많아서 일단 나에게 보내기 기능부터 try해봤다. 우선 카카오톡 나에게 메시지 보내기를 하려면 먼저 선행되어야할 것들이 있다.먼저, 동의항목에서 카카오톡 메시

SSG 이름 그대로 정적인 페이지를 보여주므로 내용 업데이트 시 최신화된 정보를 보여주기 어려운 단점이 있다.이를 보완하기 위해 일정 주기마다 페이지를 build 시켜주는 ISR 방식이 있다. 이렇게 revalidate에 5(초)라는 값을 입력함으로써 5초마다 페이지를

각각의 페이지가 렌더링 될 때 가장 먼저 실행되는 파일공통된 레이아웃이나 CSS를 적용하는데에 활용Next.js에는 html이 없기 때문에 HEAD 컴포넌트를 이용하여 안에 title이나 meta tag등을 추가해야한다.Next.js에서는 Router를 따로 만들지 않

좋아요 계속 연속으로 누렀다고 가정했을 때 누를 때마다 서버에 요청을 하게 되면 서버에 부담을 주게 된다. 마지막 이벤트에서만 서버에 요청을 하도록 하면 서버의 부담을 줄여줄 수 있다.JS 유틸리티 함수를 모아놓은 라이브러리lodash를 통해 쓰로틀링과 디바운싱을 적용

오늘 새로 배운 것 컴포넌트 간 props나 Redux같은 라이브러리를 사용하지 않고 커스텀 훅으로 상태를 공유할 수 있는지 시도해보았다. 근데 안되더라. 알아보니 커스텀 훅은 컴포넌트간 로직을 공유할 뿐 상태는 각 컴포넌트마다 독립적이라 공유되지 않는다고 한다. 결국

이번 프로젝트에서는 컴포넌트 재사용성과 코드 가독성 및 구조에 신경쓰려다보니 page 컴포넌트로부터 버튼과 input 컴포넌트를 각각 분리하려다보니 input컴포넌트에 입력된 값을 버튼 컴포넌트에 전달해야했다. 하지만 버튼 컴포넌트가 input 컴포넌트로부터 props

문제의 발생 원인은 firebase의 currentUser 타입은 firebase에 이미 만들어진 auth-public.d.ts파일에서 readonly User | null 타입으로 지정되어있다. 하지만 firebase의 사용자 제거(회원탈퇴) 함수는 User타입만을

오늘 새로 배운 것 정적 언어 / 동적 언어 프로그래밍 변수 선언시 데이터 타입을 지정하냐 안하냐에 따라 지정하면 정적언어, 지정 안하면 동적 언어 정적 언어는 C / Java / Typescript 등이 있고 동적 언어는 python, Javascript 등이 있

오늘 새로 배운 것 replace: true가 window.location.replace의 역할을 함 하루를 돌아보며... props를 구조분해 할당 안 해놓으니까 typescript로 리팩터링하기 어렵다.

오늘 새로 배운 것 npx : 사용할 모드를 로컬에 저장하지 않고 매번 최신 버전의 파일만 불러와서 실행한 후 파일을 다시 없애는 방식으로 모듈을 사용하는 것 npx tsc 전역적으로 적용x 한번만 사용하고 버리겠다. npx tsc --init tsc 모듈로 초기화를

JS 개념 나중에 다시 공부하면서 정리할 예정. 일단 메모한 내용을 남겨놓았다. 생각보다 아래 질문들에 대해 즉각즉각 답을 하지 못하거나 놓치고 있는 부분들이 많았다.MPA는 페이지마다 새로 서버에서 새로 html 파일을 다운받아서 클라이언트에서 가지고있는 CSS,JS

오늘 새로 배운 것 React Native에서 FlatList와 Swiper로 각각 구현하기 FlatList 선택할 수 있는 리스트 카드들이 한 화면에 여러개가 보인다. extradata 속성은 해당 값에 변동이 있을 때 flatlist가 리렌더링되는 것 Swipe

오늘 새로 배운 것 하루를 돌아보며...

api에서 응답 값 res는 리턴되어 받아와졌지만 main 화면의 useInfiniteQuery 부분에서 값이 넘어오지 않았던 이유=> api 측에서 매개변수 pageParam = 1를 pageNo에 들어갈 숫자로 호출할 api의 url의 pageNo=${pagePar

오늘 새로 배운 것 특정 screen에서 bottom tabBar 제거 tabBarStyle: {display : 'none'} TouchableOpacity press 여부에 따른 색 변경 먼저 press여부를 확인할 boolean 타입의 state값 선언해주고

오늘 새로 배운 것 React Query(2) 어제 TIL에서 잠깐 다루었지만 다시 다른 말로 정리하면, React Query가 다루는 서버 상태(Server State)는 FE에서 다루는 화면 View를 위한 데이터가 아닌 API 에서 가지고 온 데이터를 말한다.

오늘 새로 배운 것 Server State, Server State 하는데 Server State가 뭐지? API 통신으로 서버에 요청했을 때 로딩 중이라면 isLoading(true, false), 통신에 실패했을 때는 error, 통신에 성공하여 서버로부터 dat

오늘 새로 배운 것 하루를 돌아보며

오늘 새로 배운 것 React Navigation을 적용하고 화면이 안 뜨는 이유? 하루를 돌아보며...