지선생 코딩딩 지선생 코딩딩

1. PagenatedQueries, InfintieQueries 란? 영어라서 복잡하게 들리지만 알아듣기 쉽게 말하면 페이지 네이션, 무한 스크롤입니다. 이걸 왜 쓰는가 하면 예를 들어 데이터가 1억 개가 있는 홈페이지가 있습니다. 페이지가 데이터를 불러올 때 1억 개의 데이터를 몽땅 가져오면 속도도 느릴뿐더러 서버 부하도 걸리기 때문에 데이터를 필요한 만큼만 불러오면 자원을 아낄 수 있죠. 페이지 네이션과 무한 스크롤이 이 역할을 합니다 백엔드와 프론트엔드 둘 다 설정을 해야 되지만 프론트엔드 측면에서 알아보겠습니다. 2. PagenatedQueries 백엔드는 완성이 되어있다고 가정합니다 받아오고 싶은 Data는 color입니다 한 페이지에 두 개의 데이터를 띄우고 싶습니다. 백엔드에 요청을 보낼 ..

1. 동적 쿼리 DynamicQueries 코딩을 하다보면 특정 게시물을 찾을 때, pagenation을 할 때 등등 API를 호출할때 살짝 다른 url로 보내야 할 때가 있습니다. (엄청 많습니다) 그럴 때 사용하는 방법인데요 간단하게 말해서 queryKey와 queryFn을 동적으로 주는 방법입니다. const DynamicQueryPage = ({ heroIds }) => { const queryResults = useQueries( heroIds.map((id, index) => { return { queryKey: ["super-hero", id], //queryKey를 배열로 두고 id값을 map으로 돌려 계속해서 다른 queryKey값을 만듭니다. queryFn: () => fetchSupe..

1. 설치 npm i react-query 2. 세팅 root component를 QueryClientProvider로 감싸줍니다. function App() { const queryClient = new QueryClient(); return ( ... // ReactQueryDevtools는 현재 react-query의 상태를 볼 수 있는 도구 ); } 여기까지 했으면 준비는 끝 3. 적용 기본 사용법은 사용할 컴포넌트에서 useQuery를 선언하고 인자로 queryKey, API 호출 함수, 옵션을 넣습니다. 객체 분할하여 사용할 값을 사용합니다. 주저리 주저리 설명하는 것보다 코드로 보는 게 이해가 빠를 거 같네요 바로 useQuery를 사용해 데이터를 불러와 보겠습니다. 불러오는 데이터는 sup..

새로운 프로젝트를 시작하며 준비기간 동안 하고 싶었던 공부를 하고 있는데 벤치마킹을 하며 여러 쇼핑몰을 돌아보니 https://lckshop.com/ LCKshop.com - LCK샵 LCKshop.com - LCK샵 The official Online Shop of LCK lckshop.com 이 사이트처럼 애니메이션 css를 도입하면 좋을 거 같아서 Hook으로 만들어 적용해 보자 라는 생각에 여러 가지 블로그와 깃허브를 참고했습니다. 구현 결과 화려하진 않지만 나름 쓸만 합니다. 구동방식은 다음과 같습니다. 특정 element를 사용자가 보고 있는지 확인한다 Animation을 실행한다. 이벤트를 DOM에 지정한다. hook을 실행하기전 props값을 받아 재사용성을 고려합니다. const useS..

Next.js 에서 페이지 이동을 하고싶을때 router.push 로 하는게 좋을까 Link로 하는게 좋을까? 저번 프로젝트를 같이 하셨던분이 컴포넌트에 Link를 쓰지않고 router.push로 작동을 시켰길래 궁금증이 생겼다. next에서 만든 Link 태그가 따로 있는데 둘이 차이점이 뭘까? 검색을 해보니 1초만에 나왔다. router.push는 onclick에 사용되는 행동(action) 이기 때문에 Link 태그보다 검색에 불리하다. NextJs의 장점이 SEO (search engine optimization : 검색엔진최적화) 인걸 고려했을때, Link 사용을 추천한다 라고 한다. (쉽게말해 Link를 썻을때 검색봇에 노출될 가능성이 높아짐) 이제부터 Link 써야겠다.

코로나바이러스감염증-19(COVID-19)가 전 세계를 강타하면서 삶의 많은 부분이 변했습니다 이에 자가격리와 거리두기등의 영향으로 "코로나 우울증" (Corona Blue)이 만연해 있습니다. 저희는 이 상황에 조금이라도 도움이 되고자 인간의 기본 5대 욕구중 하나인 자아실현의 욕구를 충족시켜줄 수 있는 일자리 제공 플렛폼을 만들게 되었고 그중에서도 50대 이상 중장년층의 소일거리가 필요하다고 생각했습니다. 알구 (알바 구해요)는 중장년층에 특화된 시니어 아르바이트 플랫폼입니다. 1. 프로젝트 배경 기존 아르바이트 플랫폼의 문제점 기존 아르바이트 플랫폼들은 기능이 매우 많고, 선택권이 많아 UI적으로 복잡하여 중장년층이 쓰기에는 불편할수 있습니다. 그리하여 저희는 UI적으로 간단하고 중요한 기능을 중심..

소스코드 (https://github.com/leejiho9898/cafe-community) 1. 프로젝트 시작 배경 처음으로 제대로 만들기 시작한 프로젝트입니다. 프로젝트가 배움에 목적이 있었기 때문에 웹의 전반적인 기능을 고루 배우고 싶었습니다. 이것을 만족하는 서비스는 커뮤니티 서비스라고 생각되었고 네이버 카페를 참고하여 이 프로젝트를 만들었습니다. 프로젝트명은 제 이름에서 한 글자를 따고 뒤에 카페를 붙여 "JICAFE" 라고 지었습니다. 2. 사용한 기술 스택 Front-End JavaScript CSS (SCSS) React Redux Toolkit Back-End NodeJs Express MongoDB Mongoose JavaScript 3. 프로젝트 소개 1. Landing Page 랜..

인프런 John ahn 선생님의 강의를 들으면서 정리한 글이다. 강의는 백엔드에서 1. 회원가입 2. 로그인 3. 누가 로그인했는지 확인 : 관리자인지? 일반 사용자인지? 4. 로그아웃 까지 하는 걸 목표로 삼고 있다. node js, express js 설치부터 시작해서 NODE MON, mongoDB, POST MAN, 패키지(bodyparser,cookieparser...) 등등 개발에 필요한 작업들을 처음부터 알려주시는 게 좋았다. 익숙치 않아서 처음 들을 때는 따라가기에 급급했는데 다 하고 나서 천천히 살펴보니 생각보다 단순했다. User.js에서 함수를 만들고 index.js 에서 활용하는 식이다. 하나 아쉬운 점은 모든 함수가 에러가 났을 때 if(err) ~~~ cb으로 에러처리를 한다는건..