본문 바로가기

전체 글

useState란 무엇인가? React 개발 시 함수형 컴포넌트를 사용한다면 React Hooks기능을 활용할 수 있습니다. 여기서 가장 중요한 useState를 알아보겠습니다. useState란? : 함수형, 클래스형 컴포넌트의 상태를 관리하거나 변경할 수 있도록 도와주는 React Hook입니다. useState는 초기 입력될 상태 값을 인자로 받아 상태 값과 해당 상태를 업데이트하는 함수를 쌍으로 반환하게 됩니다. 형태는 이와 같습니다. const [state, setState] = useState(초기값); state는 저장된 값이고, useState( ) 안의 인자값을 가지게 됩니다. setState는 state의 변경된 값을 저장할 수 있게 만들어 줍니다. setState를 사용해서 state를 변경하면 해당 컴포넌트는 .. 더보기
Virtual DOM (가상DOM) - React, Javascript 오늘은 Virtual DOM에 대해 알아보겠습니다. Virtual DOM이란 React.js, Vue.js등 javascript기반으로 된 프레임워크에서 사용되는 기술로 DOM조작을 효율적으로 만들어 주기 위한 기술입니다. 그럼 DOM이란 무엇일까요? 사전적 의미를 통해 제가 이해한 내용들만 작성해 보겠습니다. DOM이란 Document Object Model이라는 "문서객체모델"로서 여기서 Document는 HTML파일을 의미합니다. 즉, HTML 파일의 Object들인 Element(input,li,h1,button 등)들이 수정 또는 값을 입력받는 등 기능을 요할 수 있게 객체로 실체화된 형태를 DOM이라고 부릅니다. 이 DOM의 형태를 노트에 적어보면 나무가 가지치기한 모습처럼 보여지기에 이 구조.. 더보기
Vercel 빌드 중 " , ' 따옴표 오류 -> HTML 엔티티 "npm run build"를 통해 Vercel 빌드 중 따옴표 오류가 발생하였다. 이유는 HTML에 텍스트에 "(큰따옴표)와 '(작은 따옴표)를 그대로 작성하였기 때문이다. 표기 혼란을 막기 위해 HTML 엔티티를 사용해서 해결해야 한다 큰 따옴표 대신 "를 사용하고 작은 따옴표 대신 "를 사용하여 문제를 해결할 수 있다. 그 결과 기존 따옴표를 사용한 부분만 HTML엔티티를 사용하여 변경하면 문제없이 Vercel build도 가능해진다. 더보기
유저 랭킹기능 구현 - Next.js, Firebase, reactQuery 구현할 기능 게시물 갯수, 팔로워 수, 댓글 수 별 유저 랭킹 기능 구현 이유 50명의 유저에게 피드백 받은 후 게시물 게시 유도를 위한 추가기능 구현 참고 회의 내용 : https://www.notion.so/e7ae5984cf72445a8f9dff0042e7480c?v=035c9f9341a243668c11c1f213969cb5&pvs=4 The all-in-one workspace for your notes, tasks, wikis, and databases - Notion A new tool for teams & individuals that blends everyday work apps into one. www.notion.so 기능 구현 reactQuery를 활용하여 데이터를 요청한다. 여기서 .. 더보기
저장(좋아요)기능 구현- Next.js, Firebase 구현할 것 - 게시물 저장(책갈피) 기능 - 저장한 게시물 기능개발 이유 : 마음에 드는 게시물들을 저장하여 유저 사용성 개선 기능 구현 //! 저장할 게시물의 데이터를 firestore에 저장하는 코드 //* collection 저장 토글 state const [isCollect, setIsCollect] = useState(true); //* mutation 사용해서 collector값 보내기 const { mutate: onAddCollection } = useMutation(addCollectionData, { onSuccess: () => { setTimeout(() => queryClient.invalidateQueries('coll.. 더보기
Next.js 이미지 최적화 작업 -Image 태그 프로젝트 초기 유저 50명에게 피드백을 받았다 여기서 약 33%의 인원이 이미지 다운로드 속도에 불편함을 느끼고 있었다. https://docs.google.com/spreadsheets/d/1IalNNg2JjwTLLLNEvK1Z4rQ6riLbRE69wWgkOHuP6Dc/edit?resourcekey#gid=167254231 Picspot 사용자 피드백 설문 (응답) 설문지 응답 시트1 타임스탬프,동의하지 않으시면 설문 참여가 불가합니다. ,성함을 기재해주세요.,추첨을 통해 상품을 받으실 전화번호를 기재해주세요. 예) 010-1234-5678 ,사용환경과 운영 체제 docs.google.com 많은 사람들이 이렇게 느끼는 원인 너무 많은 양의 이미지를 받아오는 과정에서 발생하는 문제였다. 이미지 최적화가.. 더보기
데이터 모델링 개편으로 비효율적인 데이터 요청 줄이기 비효율적인 초기 데이터 모델링으로 인해 발생한 filter,map 남발 현상 발견 //* post CollectionCategory 기준 데이터 가져오기 const getTownDatas = async ({ queryKey }: { queryKey: string[] }) => { const [_, town] = queryKey; const response: { id: string }[] = []; let q = query( collection(dbService, 'post'), where('town', '==', town), orderBy('createdAt', 'desc') ); const querySnapshot = await getDocs(q); @@ -29,19 +27,12 @@ const Col.. 더보기
프로그램 최적화 - 불필요한 반복문 실행 줄이기 데이터를 불러오는 과정에서 state가 변할 때 마다 필요하지 않은 반복문이 실행되었다. const { data, isLoading, isError } = useQuery('CollectionData', getCollection); const collectionData = data?.find( (item: { docId: string | undefined }) => item.docId === authService.currentUser?.uid )?.collection; console.log('클라이언트 단계에서 반복문 실행'); 원인 클라이언트 단계에서 반복문을 실행하여서이다. 컴포넌트 첫 렌더링 시 반복문이 실행되고 state가 변할때 마다 반복문이 실행되어 불필요한 실행이 반복되었다. 해결방법 use.. 더보기

티스토리툴바