본문 바로가기

전체 글

데이터 모델링 개편으로 비효율적인 데이터 요청 줄이기 비효율적인 초기 데이터 모델링으로 인해 발생한 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.. 더보기
디자이너, 개발자 소통 - Code Painter 이번에 처음으로 디자이너와 함께 약 2달간 프로젝트를 진행할 수 있게 되었다. 나는 이번 프로젝트에서 디자인과 전공 짬빠(?)로 개발자와 디자이너간 소통 역할을 담당하게 되었다. 나는 이 역할을 "Code Painter - CP " 라고 부르기로 했다. CP는 개발자들의 코드와 의견들을 코드를 잘 알지 못하는 제 3자에게 그림으로 그려줄 수 있을 정도로 쉽게 설명하는 사람이어야 한다고 생각한다. 나름 디자인 지식을 배운 사람이라 자만하며 소통을 진행했지만 몇 주가 지날수록 소통에 벽을 느끼며 좌절할때가 많았다. 그 시간동안 느낀 문제점은 이렇다 - 용어의 사용 : 서로의 전문용어를 이해하기가 초반에 쉽지않다 - 기대와 현실의 차이 : 기획과정에서 기술적 어려움을 이해하기에 시간이 오래걸린다 - 의도 해석.. 더보기
Masonry 레이아웃 구현하기 ( + react-responsive-masonry 라이브러리 ) 벽돌을 쌓아올린 형태의 레이아웃인 Masonry 레이아웃 작업하기 이번에 팀원들과 함께 작업한 "제주도의 나만의 스팟을 촬영하여 공유하는 사이트" 인 Picspot의 메인페이지이다. 최대한 많은 양의 사진들을 한눈에 보일 수 있게 하기 위해 Masonry 레이아웃 디자인을 채택했다. 이전 작업에서도 비슷한 작업을 한 적이 있다. 이 작업을 진행할 땐 .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr); grid-gap: 10px; grid-template-areas: 'a b c' 'a d d' 'e e e' 'f f f' 'g g g' 'h h h' 'i i i'; alig.. 더보기
Next.js에서 ReactQuery를 이용한 데이터 관리 및 CRUD 기능 구현 Next.js으로 작업한 프로젝트에 React-Query를 이용하여 CRUD 기능을 구현하였다. Firebase를 이용하여 데이터를 관리하였다. 먼저 이번 프로젝트에 React-Query를 사용한 이유는 이렇다 redux를 사용하면서 미들웨어를 사용하기엔 너무 무거움 서버 상태와 클라이언트 상태를 독립적으로 관리하기 위해 캐싱 기능을 활용하기 용이(사진을 이용한 서비스가 많기에 캐싱기능을 활용하기로 결정) 포스터를 게시하는 코드 //* 이미지 업로드 const [imageUpload, setImageUpload]: any = useState(null); const imgPath: string = uuidv4(); let postState: any = { title: title, content: conte.. 더보기
🍈 [TIL] 패스워드 전송 및 보관 방법 사용자 패스워드를 전송하고 보관하는 방법을 무엇인가? 유저의 패스워드를 받은 클라이언트는 평문으로 서버로 전송합니다. 평문(암호화 되기 전 메시지) 을 받은 서버는 패스워드를 단방향 해시 함수로 암호화하여 보관합니다. 단방향 해시함수는 수학적 연산에 의해 원본 데이터를 완전히 다른 암호화된 데이터(다이제스트)로 변환하는 것을 말합니다. 원본 데이터로는 다이제스트를 구할 수 있지만 다이제스트로는 원본데이터를 구할 수 없어야 합니다. 이것을 단방향이라 합니다. 단방향 해시함수는 브루트포스 공격으로 쉽게 당할 수 있기 때문에 이를 보완하기 위해 입력된 다이제스트를 N번 반복해서 생성하는 것인 key stretching과 원문 패스워드에 임의의 문자열을 추가하여 해싱하는 것인 salting을 이용해 보안의 강도.. 더보기
🍈 [TIL] Semantic HTML? / Redux? 질문 1) Semantic HTML의 필요성을 예시를 통해 설명해주세요. 답변) Semantic HTML은 웹 문서를 작성할 때 HTML태그를 의미적으로 사용하여 웹 페이지의 구조와 의미를 명확하게 표현하는 방법을 말합니다. 즉, 웹 페이지의 각 부분이 무엇을 나타내는지를 의미적으로 정확하게 표현하는 것입니다. 이것은 웹피이지의 접근성, 검색엔진 최적화(SEO), 유지 보수의 용이성 등을 개선하는데 도움이 되며, 웹 페이지의 의미와 구조를 이해하기 쉽게 만들어 줍니다. 시맨틱 태그의 예시로 ,등의 태그가 있습니다. 이 태그를 사용하면 제목과 목차를 구분하고 웹 페이지의 구조를 명확하게 표현할 수 있으며, 사용자가 페이지의 구조를 이해하기 쉽게 만들어 줄 수 있습니다. 또한, 검색 엔진은 제목과 목차를 통.. 더보기
🍈 [TIL] useRef ? / Cookie의 MaxAge, Expires 질문 1) useRef가 필요한 상황을 예시를 들어 설명해주세요. 답변) useRef는 ReactHocks 중 하나로, 함수형 컴포넌트에서 DOM요소 또는 다른 값을 저장할 수 있는 객체를 생성하는 데 사용됩니다. useRef는 내용이 변경될 때 그것을 알려주지는 않지만, useRef로 생성한 객체는 컴포넌트가 랜더링될 때마다 동일한 객체를 반환하므로, 이전 값을 유지할 수 있습니다. 이는 클래스에서 인스턴스 필드를 사용하는 방법과 유사한 어떤 가변값을 유지하는 데에 편리합니다. useRef가 필요한 상황으로는 1. 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있습니다. 이를 통해 setTimeout, setInterval을 통해서 만들어지 id, scroll위치 값을 관리할 수 있습니다... 더보기

티스토리툴바