전체 글 (103) 썸네일형 리스트형 HTTP/HTTPS와 REST/GraphQL 개념 정리 HTTP와 HTTPS 개념 정리HTTP (Hypertext Transfer Protocol): 데이터를 암호화하지 않고 평문으로 주고받는 프로토콜. 공격자가 데이터 전송을 도청하거나 수정할 위험이 있음.HTTPS (Hypertext Transfer Protocol Secure): 데이터를 SSL/TLS 암호화 방식으로 보호하며, 인증서를 통해 서버의 신뢰성을 검증함. 이를 통해 데이터의 무결성과 기밀성을 보장. 예상 질문 HTTP와 HTTPS의 차이점은 무엇인가요?모범 답안: HTTP는 데이터를 암호화하지 않고 전송하는 반면, HTTPS는 SSL/TLS 암호화를 통해 데이터를 보호합니다. HTTPS는 인증서를 사용해 서버의 신뢰성을 검증하고, 클라이언트와 서버 간 데이터의 무결성과 기밀성을 보장합니다... TIL - 트러블 슈팅: 커뮤니티 리스트 최적화 - 2 TIL - 커뮤니티 리스트 최적화: 렌더링 시간 개선 시도 - 1 TIL - 커뮤니티 리스트 최적화: 렌더링 시간 개선 시도 - 1이 포스트의 일부 결론은 후속 테스트에서 재평가되었습니다. 업데이트된 정보는 여기를 참조해주세요.1. 문제 상황커뮤니티 리스트 페이지의 초기 로딩 시간이 너무 길어 사용자 경험 저하팀fe-jogha.tistory.com이전 접근의 문제점개발 환경(dev)과 프로덕션 환경(Vercel)의 성능 차이를 고려하지 않았음환경 차이로 인해 최적화 효과가 과대 평가되었을 가능성그러나 Promise.all을 통한 병렬 처리 최적화는 여전히 유효한 개선 사항 새로운 문제 상황1. 렌더링 시간 증가 및 웹 바이탈 성능 저하문제 상황렌더링 시간이 급격히 증가Lighthouse 성능 점수가 크.. 최종 팀 프로젝트 OOSIE KPT 회고 주요 논점Next.js 프레임워크를 사용하면서 서버 상태 관리로 로그인 상태를 관리하는 것의 적절성Keep (유지할 점)필수 구현 사항 완료: 로그인/회원가입, 커뮤니티 CRUD, 텍스트 에디터 활용 등 모든 필수 기능을 구현했습니다.Problem (문제점)로그인 상태 관리:일반적으로 클라이언트 사이드에서 관리되는 로그인 상태를 서버 사이드에서 관리Next.js를 통해 Supabase의 auth 관련 클라이언트를 서버 사이드로 결정Tanstack Query를 사용하여 상태 관리로딩 시간 지연:커뮤니티 페이지 이동 시 초기 로딩 상태가 상당히 길었음Try (시도할 점)로딩 시간 개선:getUser 대신 세션 활용초기 데이터를 제공하지 않는 방식 시도프리 패칭 등 다양한 방법 시도서버 홉의 문제임을 파악보안.. TIL - 트러블 슈팅: 커뮤니티 리스트 최적화 - 1 이 포스트의 일부 결론은 후속 테스트에서 재평가되었습니다. 업데이트된 정보는 여기를 참조해주세요. TIL - 커뮤니티 리스트 최적화: 렌더링 시간 개선 시도 - 2TIL - 커뮤니티 리스트 최적화: 렌더링 시간 개선 시도 - 1fe-jogha.tistory.com 1. 문제 상황커뮤니티 리스트 페이지의 초기 로딩 시간이 너무 길어 사용자 경험 저하팀원이 자신의 인터넷 연결 문제로 오해할 정도로 느린 로딩 속도2. 분석 과정MVP 우선으로 작성된 코드 전체 리뷰각 카테고리별 데이터를 UX 이유로 미리 불러오는데 동기로 불러오는 것을 발견불필요한 리렌더링 발생 확인 (콘솔 로그 활용)3. 최적화 전략 및 구현3.1 데이터 페칭 최적화최적화 전 코드:const fetchCategoryData = async (.. TIL - Z-index 스태킹 컨텍스트 문제 트러블슈팅 스태킹 컨텍스트 정의스태킹 컨텍스트(Stacking Context)는 HTML 요소의 3차원 개념적 레이어링을 정의하는 방식입니다. 이는 요소들이 z축을 따라 어떻게 쌓이는지를 결정합니다. 새로운 스태킹 컨텍스트는 다음과 같은 조건에서 생성됩니다:root 요소 (HTML)position: absolute 또는 relative이며 z-index가 auto가 아닌 요소position: fixed 또는 sticky인 요소flexbox 컨테이너의 자식 중 z-index가 auto가 아닌 요소opacity가 1보다 작은 요소transform, filter, perspective, clip-path, mask 등의 특정 CSS 속성을 가진 요소스태킹 컨텍스트는 부모-자식 관계를 형성하며, 각 컨텍스트 내에서 z-i.. TIL -커뮤니티 게시판 로딩 최적화 트러블 슈팅 문제 상황TanStack Query로 커뮤니티 게시판 카테고리별 로딩 시 초기 데이터 매번 로딩 화면 표시사용자 경험 저하 우려의사 결정 과정 및 해결 방안문제 인식: 반복되는 로딩 화면이 사용자 경험에 부정적 영향해결 방안 검토:SSR로 초기 데이터를 props로 전달하이드레이션을 통한 로딩카테고리별 프리페칭최종 결정: 카테고리별 1 페이지 단위 클라이언트 사이드에서 프리페칭 구현이유: 초기 로딩 후 추가 로딩 최소화로 사용자 경험 개선const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, error, prefetchAllCategories } = useGetCommunityPosts(selectedCategory, categ.. TIL - 까다로운 공공 데이터 API 데이터 페칭 트러블 슈팅 서론오늘은 예전 팀 프로젝트에서 함께 일했던 가현님이 공공 데이터 API와 관련된 문제로 도움을 요청하셨습니다. API 변경으로 인해 데이터 구조가 크게 바뀌었고, 이에 따라 데이터를 효과적으로 페칭하는 데 어려움을 겪고 있었던 상황이었습니다.문제 상황이미지 데이터 부재: 공공 데이터 API에서 이미지가 제거되어, 주제와 관련된 이미지를 가져오는 데 큰 어려움이 있었습니다. 이로 인해 네이버 검색 API를 이용해 이미지를 찾아야 했고, 전체 1300개 데이터 항목에서 이미지를 4개씩 찾아야 하다 보니 5200개의 이미지를 받아오는 작업이 필요했습니다. 네이버 API는 초당 10건 제한이 있어 전체 데이터를 받아오는 데 이론상 8~10분이 소요될 것으로 예상했고, 실제로는 10분 이상 걸렸습니다.API 엔.. TIL - 수평 스크롤 문제 해결 문제수평 스크롤을 휠로 처리하려는 시도에서 스크롤이 끊기는 문제가 발생함.터치 스크롤에 대한 지원이 부족함.시도한 해결 방안커스텀 훅 사용구현: useHorizontalScroll 커스텀 훅을 사용하여 휠 스크롤 이벤트를 수평 스크롤로 변환.문제점: 이벤트 요청이 많아서 스크롤이 끊기는 문제가 발생. 디바운싱을 적용했으나 여전히 불완전함.Swiper 라이브러리 사용구현: Swiper 라이브러리를 사용하여 슬라이드와 수평 스크롤을 구현.해결:Swiper의 mousewheel 모듈을 사용하여 휠 스크롤을 자연스럽게 처리.freeMode 옵션을 통해 자유로운 스크롤과 슬라이드 이동을 구현.터치와 마우스 휠 모두 안정적으로 처리됨.import { Swiper, SwiperSlide } from 'swiper/r.. 이전 1 2 3 4 ··· 13 다음
