Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned Cache 캐싱은 자주 사용하는 데이터를 메모리나 디스크에 저장해 성능을 향상 시키기 위해 소프트웨어 개발에 사용되는 기술입니다. 캐시(cache) 의 장점 - 더 빠른 성능 : 캐싱은 데이터를 가져오고 처리하는 데 필요한 시간을 줄여 성능을 크게 향상 시킬 수 있습니다. - 서버 부하 감소 : 데이터를 캐싱함으로써 서버는 더 적은 수의 요청을 처리할 수 있으므로 서버의 부하를 줄이고 잠재적으로 비용을 낮출 수 있습니다. - 확장성 증대 : 캐싱은 서버의 부하가 줄어들고 성능이 향상되어 애플리캐이션을 개발하는데 있어 더욱 범위를 확장해 개발 할 수 있겠습니다. 캐시(cache) 의 단점 - 캐시 무효화 : 캐싱의 가장 큰 문제중 하나는 캐시를 무효화하고 새 ..

🎯목적 :Restful API에 대해 기록하며, GET,POST 외에 알고있는 메소드와 그 기준을 설명하고Restful API 가 아닌 것들은 어떤게 있는지 기록합니다. Restful API란? - Restful API는 표준 HTTP 메서드 집합을 사용하여 리소스에 대한 작업을 수행하는 웹 서비스를 설계하기 위한 아키텍처 스타일입니다. - Restful API에서 각 리소스는 고유한 URI로 식별됩니다. 클라이언트(예: 웹 브라우저 또는 모바일 앱)는 표준 HTTP 메서드를 사용하여 이러한 리소스와 상호 작용할 수 있습니다. + 예를 들어, 클라이언트는 요청 본문에 사용자 데이터를 포함하는 JSON 객체와 함께 URI: https://example.com/users로 요청을 전송하여 서버에 POST 요..

🤢 문제 내용 : supabase 사용 시 필요한 키를 .env 에 입력했으나, 인식을 못하고 에러 발생.. 🎈 문제 해결 방법 : 기존 NEXT_PUBLIC_SUPABASE_API_KEY로 설정되던 값을 예약어인 NEXT_PUBLIC_SUPABASE_ANON로 변경해주었습니다. AS-IS # .env.local NEXT_PUBLIC_SUPABASE_URL=URL NEXT_PUBLIC_SUPABASE_API_KEY=API_KEY TO-BE # .env.local NEXT_PUBLIC_SUPABASE_URL=URL NEXT_PUBLIC_SUPABASE_ANON=API_KEY ✨ 알게된 것 라이브러리를 사용 할때에는 예약어를 기본값으로 가지고 있는지 확인해야 합니다. 또한 사용 전 공식문서를 꼼꼼하게 읽어야..

🎯목적 : CRUD : Update API 생성 , Firebase : FireStore data 업데이트 🤢 오류 해결 : WARN Possible Unhandled Promise Rejection : TypeError: _n7.indexOf is not a function. 1. setDone (체크아이콘) 체크 아이콘을 누르면 함수가 실행되어 해당하는 todo의 isDone 속성을 토글로 변경하고, isDone이 true 라면 완료했다는 효과(text-decoration: line-through)를 주자 아이콘 클릭 시 실행되는 함수이고, 서버통신을 하는 부분이니 비동기 처리를 해줬다. 또 현재 가지고 있는 todos의 isDone을 토글해야 했기 때문에 find 라는 변수로 지금 가진 isDone..

❤️‍🔥TIL : Today I Learned 🎯목적 : CRUD : Read API 추가, onSnapshot API 활용하기 1. Firestore 의 DB 가져오기 저번 포스팅에서 Creat API를 만들어 Firestore에 "todos" 라는 db를 넣을 수 있었다 이번에는 가져와서 보여줘야한다! firebase API 활용하자! 선택지는 2가지다 getDocs API onSnapshot API getDocs로도 가져올 수 있겠지만 우리는 실시간으로 변동이 생기면 다시 데이터를 가져와야 하므로 state 처럼 사용해야 한다. 그래서 onSnapshot API 를 활용했다! import { onSnapshot } 으로 api를 가져온다 useEffect를 사용하여 컴포넌트가 마운트시 곧장 Read..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 문제 참 많았다... 정리해 보자면 나는 게시글을 클릭 했을 때, router 가 변하며 해당 라우터에서 상세 내용(제목,내용,시간 등..)을 보여주는 페이지의 crud 기능 구현을 맡게 되었다. 문제는 이렇게 흘러갔다 해당 컴포넌트 렌더링 될 때 useLocation 사용하여 axios.get 요청 문제점 - 다른 액션 발생할 때(delete,update) 추후 데이터 수정의 어려움을 깨닫게 됨 thunk를 사용하여 detailSlice.js 생성하여 부모컴포넌트에서 onClick이 이루어 질 때 dispatch(__getDetail) 문제점 - 상세페이지에서 새로고침 하면 state 값이 리셋되어 결국 새로고침을 하면 상세페이지 내용 없..

❤️‍🔥TIL : Today I Learned JSON-server 아주 간단한 DB와 API 서버를 생성해주는 패키지 이다. 우리가 json-server를 사용하는 이유는 backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함이다. json-server 를 통해서 FE에서는 BE가 하고있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업이 가능하다. json-server 설치하기 CRA로 프로젝트를 새로 생성하고, yarn 또는 npm을 이용해서 설치 합니다. 예시에서는 기존에 사용하던 yarn을 사용해서 설치하겠습니다. npm install json-server..

Read API 게시글을 조회하고, 보여주는 함수이다 우선은 게시글을 클릭했을 때 우리가 가진 데이터를 보여주려면 id 가 필요했다 id 안에 게시글이 객체형태로 데이터가 들어있기 때문이다 우선 게시글에 삽입 될 HTML 태그이다 /* ...innerHTML */ fanPickList 객체가 가지고있는 id 데이터를 태그 id에 넣어주고 onclick 으로 전달되도록 구현했다. onclick="sendId(${fanPickList.id})" 처음에는 위 처럼 해당아이디를 바로 클릭하면 전달 할 수 있게 작성했으나, 레퍼런스 에러가 나서 수정했다 // 클릭한 카드의 id 받아적는 변수 let selectId = ""; // 함수가 실행 될 때마다, 해당게시글 id 를 update export functio..