티스토리

띠리에이터

검색하기

블로그 홈

띠리에이터

ddicreator.com/m

Frontend 개발 공부 일지

구독자: 1

방명록 방문하기

주요 글 목록

next.js에서 seo최적화로 커뮤니티 활성화 방안? 🧭 Next.js와 SEO 최적화를 통한 커뮤니티 활성화 전략커뮤니티 웹사이트의 성공을 결정짓는 핵심 요소 중 하나는 사용자 유입이다. 아무리 좋은 콘텐츠를 갖추고 있어도, 검색 결과에 노출되지 않는다면 방문자는 늘지 않는다.SEO(Search Engine Optimization) 최적화는 커뮤니티 활성화를 위한 필수 전략이다.이번엔 Next.js 기반 커뮤니티 웹사이트에서 SEO 최적화를 해봐야겠다. 1️⃣ SEO란?SEO(Search Engine Optimization)는 검색 엔진(구글, 네이버 등)이 웹사이트를 잘 이해하고, 검색 결과에 상위 노출되도록 구조를 최적화하는 작업임!📈 검색엔진 결과에서 상위 노출 → 자연 트래픽 증가❗ 아무리 좋은 글이라도 검색에 걸리지 않으면 유입은 없음.2️.. 공감수 0 댓글수 0 2025. 4. 16.
빠른 이미지 로드를 위한 개선방법 🔍 웹과 앱에서 빠른 이미지 로드를 위한 방법 찾기🚨 문제 상황현재 진행 중인 프로젝트에서 이미지 로딩 속도가 너무 느림!!특히 프로필 페이지는 썸네일 이미지가 많아서, 페이지 진입 후 약 2초가 지나야 썸네일이 모두 로드가 된다. 이미지들은 서버를 통해 받아오며, 현재 png확장자 사용 중.내가 보기에도 거슬리는데 사용자 경험(UX)에 너무 안좋아서 최적화가 필요할듯 싶다. 📦 1. 이미지 확장자 종류와 특징확장자압축 방식특징사용 추천.jpg, .jpeg손실 압축- 사진, 배경에 적합- 용량 작고 호환성 좋음일반 사진, 피드.png무손실 압축- 투명 배경 지원- 용량 큼UI 요소, 로고.webp손실/무손실 지원- JPEG 대비 최대 34% 더 가볍고- 투명도, 애니메이션 지원웹/앱 최적화용.a.. 공감수 0 댓글수 0 2025. 4. 11.
React Native에서 대용량 동영상 업로드 최적화 대용량 동영상을 업로드하는 과정에서 메모리 과부하(OOM)로 인해 앱이 튕기는 문제가 발생했다.처음에는 단순한 업로드 방식을 사용했지만, 테스트 과정에서 여러 가지 성능 문제가 드러났다.해결하기 위해 파일 압축, 업로드 방식 변경, 캐시 최적화 등의 방법을 적용,🚨 문제점: 대용량 동영상 업로드 시 메모리 과부하 발생초기 방식: 파일을 한 번에 업로드처음에는 expo-file-system을 사용하여 동영상을 업로드하는 간단한 방식을 적용했다.파일을 선택한 후 그대로 서버에 전송하는 방식이었는데,이 방식에는 문제가 있었다.📌 초기 방식의 문제점파일 크기 제한파일을 한 번에 업로드하는 방식이라, 2GB 이상의 파일은 업로드 도중 앱이 강제 종료됨메모리 과부하 발생파일이 한꺼번에 메모리에 적재되면서, 메모.. 공감수 0 댓글수 0 2025. 3. 7.
HLS와 M3U8 1. HLSHTTP Live Streaming, 비디오 파일을 다운로드할 수 있는 HTTP 파일 조각으로 나누고 HTTP프로토콜을 이용하여 전송. 클라이언트 장치는 이러한 HTTP 파일을 로드한 후 비디오로 재생 장점모든 인터넷 연결 장치가 HTTP를 지원하기 때문에 전용 서버가 필요한 스트리밍 프로토콜보다 간단하게 실행. HLS 스트리밍은 재생에 지장을 주지 않고 네트워크 상태에 따라 비디오 품질을 높이거나 낮출 수 있다는 것, 이 때문에 사용자가 비디오를 보는 중에 품질이 나빠지거나 좋아질 수 있음스트리밍 ? 파일을 한번에 보내는 대신에 여러번 나누어 사용자에게 전송, 따라서 사용자의 장치가 먼저 모든 파일을 다운로드하지 않고 비디오를 재생 2. HLS 동작원리 세그먼트 분할미디어파일 (비디오 등).. 공감수 2 댓글수 0 2025. 2. 10.
업로드 상황에 따른 Progress 구현 기존에 expo-file-System의 uploadAsync를 사용해 대용량 데이터를 스트리밍 방식으로 진행해서 업로드를 했었음.여기에 프로그레스를 적용해 진행률 확인 구현해야함 프로그레스를 구현하려면 uploadAsync 가 아닌 createUploadTask API를 활용해 파일 업로드를 스트리밍 방식으로 진행, 업로드 도중 진행률(progress)을 콜백을 통해 계산하여 UI 상태를 업데이트한다. 업로드가 완료된 후에는 응답 상태를 확인해 성공 여부를 판단. 1. 업로드 작업 생성const uploadTask = FileSystem.createUploadTask( uploadUrl, fileUri, { httpMethod: "PUT", uploadType: FileSystem... 공감수 0 댓글수 0 2025. 2. 10.
앱에서 앨범에 접근해 동영상 불러오는 시간 줄이는 방법 React Native에서 동영상을 갤러리에서 불러오는 방식은 여러 가지가 있지만,처음에는 expo-image-picker를 사용했다.하지만 느린 속도, 자동 압축 문제 등의 이유로,expo-media-library로 전환하는 과정을 거쳤다.🚨 문제점: 갤러리에서 동영상 불러오는 속도가 너무 느림초기 방식: expo-image-picker 사용처음에는 가장 간편한 방법인 expo-image-picker를 사용했다.이 방식은 기본적으로 이미지 및 동영상을 선택하는 기능을 제공하지만,사용해보니 여러 가지 문제점이 발생했다.📌 초기 방식의 문제점Base64 인코딩된 데이터를 반환하여 처리 속도가 느림expo-image-picker는 자동으로 일부 압축을 수행동영상을 선택한 후 압축 과정에서 시간이 지체됨✅.. 공감수 0 댓글수 0 2025. 1. 27.
답지 영상 데이터 소모량 개선 🚨 문제점: 과도한 데이터 소모 & 깜빡임 현상 발생초기 방식: 모든 동영상을 한 번에 불러옴초기에는 FlatList를 사용해 한 페이지당 **3개의 답지 인덱스(최대 45개 영상)**를 불러오도록 구현했다.하지만 모든 동영상이 동시에 요청되고 자동 재생되어, 데이터 사용량이 급격히 증가했다.📌 문제점 정리✔ 한 페이지당 최대 2.5GB 데이터 사용✔ 화면에 보이지 않는 동영상도 미리 로드됨✔ 스크롤 시 깜빡임 발생 (썸네일 → 동영상 전환 시)✅ 해결 목표:보이는 동영상만 로드 & 재생하도록 최적화불필요한 데이터 요청을 최소화부드러운 전환을 위한 깜빡임 방지🔍 해결 과정: 최적화 적용하기1. onViewableItemsChanged 활용 - 보이는 영상만 재생📌 기존 방식FlatList가 한 번.. 공감수 0 댓글수 0 2025. 1. 3.
앱스토어 승인 리젝 사유 모음집 => 승인 통과된 결과 12.13 / 리젝사유 1 앱스토어 심사 신청하고 하루만에 리젝되었다고 알려줬다. 사유로는 사진 라이브러리 권한 요청 시 나타나는 설명이 불충분 ''Allow DapJi to access tyor photos", 단순하게 '갤러리에 접근을 시도합니다' 가 아닌 좀 더 자세한 설명이 필요함,예를들면 "프로필 편집에 갤러리 접근 권한을 허용하시겠습니까?" 이런식으로 ios: { infoPlist: { NSPhotoLibraryUsageDescription: "프로필 및 게시판 이미지, 비디오(답지 영상) 업로드를 위해 갤러리 사용 권한을 허용 하시겠습니까?.", },app.config.js infoPlist 안에 NSPhotoLibraryUsageDescription 설정,갤.. 공감수 1 댓글수 1 2024. 12. 13.
react-query의 데이터 깜빡임 해결 건(placeholderData) 1.문제컬러 선택 시 데이터 깜빡임프로젝트에서 **activeColor**에 따라 해당 컬러의 데이터를 불러오는 카테고리 선택 기능이 있음.이 페이지는 공지사항, 컬러(카테고리), 동영상 컴포넌트로 구성되어 있음.사용자가 컬러(카테고리)를 변경하면1. React Query의 queryFn이 다시 실행되면서 데이터를 새로 요청.2. getGymDetailDatas가 새 데이터를 가져오는 동안 **일시적으로 undefined**로 변경.3. 이로 인해 공지사항 타이틀이 잠깐 "공지 준비중"으로 표시되었다가, 새 데이터 요청 완료 후 원래 타이틀로 복구됨.사용자 경험의 문제기능적으로 큰 문제는 없으나: 카테고리 변경 시 공지사항과 동영상 목록이 깜빡이는 현상이 발생.프로젝트 특성상 카테고리를 여러 번 변경하는.. 공감수 0 댓글수 0 2024. 12. 9.
프로젝트 간단 정리 1. 프로젝트 간단요약✅ 프로젝트 개요이름답지, DapJi목적클라이밍을 좋아하는 클라이머들이 좀 더 재밌게 취미 생활을 즐길 수 있도록 각 암장의 문제풀이를 공유하는 플랫폼👀 1차. Web - Next.js웹뷰를 통해 앱 제작을 기획하고 프로젝트 진행좀 더 네이티브스러운 기능을 사용하기 위해 하이브리드 앱으로 전환웹을 관리자용으로 사용 할 예정, 또는 링크공유 적용 할 예정👀 2차. App - EXPOreact-native를 기반으로한 expo 사용✅ 주요 기능바텀 탭을 사용해 4개의 주 페이지로 구성, 각 페이지는 스크롤이 가능하도록 FlatList를 사용한 무한스크롤 기능으로 구현 ,소셜 로그인Apple Login ****expo expo-apple-authentication 을 사용해 구현, .. 공감수 4 댓글수 2 2024. 12. 6.
[Dap JI ] react-native-seoul/kakao-login사용해서 카카오 로그인 이번 시간은 expo와 네이티브 라이브러리인 react-native-seoul/kakao-login를 사용해 카카오 소셜로그인 구현 ㄱㄱ 1. npm 설치 https://www.npmjs.com/package/@react-native-seoul/kakao-login @react-native-seoul/kakao-loginReact Native Module for Kakao Login. Latest version: 5.4.1, last published: 7 months ago. Start using @react-native-seoul/kakao-login in your project by running `npm i @react-native-seoul/kakao-login`. There are no oth.. 공감수 0 댓글수 0 2024. 12. 3.
[Dap JI ] expo expo-apple-authentication 사용해서 애플 로그인 애플로그인 구현 '시도 ' 해보기 앱스토어에 앱을 제출할 경우 만약 소셜로그인이 있으면 애플로그인도 필수! 그래서 애플로그인 구현해야한다. expo에서는 애플로그인을 간단하게 구현할 수 있도록 도와주는 라이브러리가 있음. expo-apple-authentication, expo 공식 문서에도 친절하게 나와있음. https://docs.expo.dev/versions/latest/sdk/apple-authentication/ AppleAuthenticationA library that provides Sign-in with Apple capability for iOS.docs.expo.dev구현 가보자~~~ npx expo install expo-apple-authentication npm 설치 명령어.. 공감수 3 댓글수 4 2024. 12. 1.
[Dap JI ] 갑자기 되던 모달이 안나오는 이유 발생 문제 expo sdk 업그레이드 하기 전에 잘 되던 바텀시트와 모달이 업데이트 후에 안나오는 상황이 발생. const [modalOpen, setModalOpen] = useState(false); const [reportOpen, setReportOpen] = useState(false); //리포트 모달 나오는 클릭 const handleReportClick = () => { setModalOpen(false); //상세 바텀시트 옵션 setReportOpen(true); // 신고 바텀시트 열기 }; //유저 차단 모달 나오는 클릭 const handleBlockedClick = () => { const confirmAction = async () => { .. 공감수 1 댓글수 1 2024. 11. 27.
[Dap JI ] expo go가 아닌 실제 배포 환경에서 적용해보기, npx expo start 환경은 2개로 나뉜다. 처음엔 있는지도 몰랐다가 실제 도메인 적용한 모습 보고 싶어서 찾아보던 중 development build가 있는 것을 어쩌다 발견함, 1. Using Expo Go설명:기본적으로 Expo Go 앱을 사용하여 프로젝트를 실행Expo Go는 빠르게 앱을 테스트할 수 있는 환경여태까지 사용하던 환경인 듯 싶다. 작동 방식:QR 코드를 스캔하거나 Expo Go 앱에서 실행.네이티브 코드를 포함하지 않은 Expo SDK 기능만 동작.장점:별도 빌드 없이 빠르게 실행 가능.Expo의 모든 관리형 워크플로우(Managed Workflow)를 지원.제약 사항:네이티브 모듈(예: react-native-reanimated, react-native-maps)을 사용할 수.. 공감수 0 댓글수 0 2024. 11. 27.
[Dap JI ] expo 스텍관리문제 1. 문제 프로필 페이지에서 router.push로 세팅 페이지로 이동=> 이때 push때문에 프로필 페이지에 대한 스택이 쌓임세팅 페이징세ㅓ 로그아웃 버튼 누른 후 isSuccess면 router.replace('/') 로 이동루트페이지 이동 후 뒤로가기 드래그 하면 다시 이전 프로필 페이지로 이동됨하지만 유저 id가 없어 데이터는 캐시된 데이터 외에는 데이터를 불러올 수 없음굉장히 굉장히 거슬림 2. 원인아마 profile에서 push때문에 쌓인 스택 때문에 뒤로가게되는거라 생각replace를 사용해도 이전 스택만 제거할뿐 전체 스택을 제거하진 않음 3. 해결 방법 1. @react-navigation/native 사용해야할듯 리액트 네이티브에서 많이 사용하는 라우팅 라이브러리 https://ww.. 공감수 0 댓글수 1 2024. 11. 21.
[Dap JI ] 스토어 승인 요소 1. 앱이름앱스토어에 출시되는 이름, 시중에 출시된 앱 이름과 동일하게 사용 x앱 이름 – 설치 이름, 앱스토어 노출 이름아 겉어여야함2. 부제앱 이름 밑에 표시되는 내용, 한줄소개 같은 느낌3. 키워드앱을 설명하는 키워드, 100자 이내, 쉼표 사용해서 구분앱스토어에서 검색할 때 키워드로 검색해서 나올 수 있음, 4. 앱설명앱의 특징과 기능에 대한 설명, 4000자 이내앱 설명을 최대한 자세하게 준비해야 심사 거절을 안 당할 수 있다. 앱의 기능, 편의성, 특징 등등 5. iOS 앱 아이콘 요구사항크기 및 해상도앱 아이콘은 정사각형, 1:1비율png형식, 투명배경이 없어야함1024픽셀로 준비 "ios": { "icon": "./assets/icons/icon.png", }, .. 공감수 6 댓글수 3 2024. 11. 20.
[Dap JI ] expo 이미지 업로드 reat-native 환경에서 이미지 업로드 적용하는 방법, next..js에선 input의 type ='file'을 사용해서 이미지 업로드를 구현할 수 있지만 react-native에선 없기 때문에 라이브러리를 사용. 1. expo-image-picker2. react-native-picker 이 두개가 대표적인듯. 나는 expo를 사용중이기 때문에 expo-image-picker 적용, last publish도 2일전이니 꾸준하게 디벨롭중인 것 같다. - expo-image-picker 장점 1. 간편한 설치 및 사용 - expo에서 바로 사용 가능하며 네이티브 코드를 건드릴 필요가 없다. 2. 안전성 - expo 환경에 테스트 가능, 다양한 기기에서 일관되게 작용.. 공감수 2 댓글수 2 2024. 10. 24.
[Dap JI - issue] 이미지 업로드 1. 구현 방법 및 고민다중 이미지 업로드 기능에서 동일한 이미자가 두 번 추가되는 문제 발생 FileReader를 사용해 미리보기 URL을 생성하는 동시에 서버로 파일을 업로드 한 후에도 다시 URL을 추가하는 과정에서 발생한 문제인 것 같다. 2. 이슈사용자가 이미지를 업로드할 때 FileReader를 사용해 이미지의 미리보기 URL을 생성하고 서버에 파일을 업로드 한 후에도 setFileuUrl을 호출해 이미지 url을 상태에 추가했다. 이로인해 동일한 이미지가 두 번 추가된다. 미리보기 url과 실제 서버에서 반환된 url을 동일한 state로 관리하면서 발생했기 때문이다. const { mutate: boardImageUpload } = useMutation({ mutationKey: ['bo.. 공감수 0 댓글수 0 2024. 8. 26.
[Dap JI - issue] 동영상 삭제에 관하여 1. 기존 구현 방법 및 고민삭제를 하는 기존 구현 방식은 매우 간단하게 이루어졌었다. 사용자가 수정 페이지에서 동영상마다 있는 x아이콘을 클릭하면 해당 동영상의 url이 서버로 전송되어 바로 삭제되었다. 하지만 이 방식에는 문제점이 있었다. .1. 실수로 삭제된 동영상을 다시 업로드 하는 것 외에는 돌릴 방법이 없다는것2. 서버에서 완전히 제거되므로 데이터 복구 불가능 const updatedVideos = mediaUrl.videoUrl.filter((_, i) => i !== index);const updatedThumbnailUrl = mediaUrl.thumbnailUrl.filter( (_, i) => i !== index,);setMediaUrl({ videoUrl: updatedVid.. 공감수 0 댓글수 0 2024. 8. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.