티스토리

코딩기록

검색하기

블로그 홈

코딩기록

hhyj0000.tistory.com/m

홍시_코딩기록 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[Next 고캠핑] FileReader 이용해 이미지 보여주기 캠핑장 후기를 작성하고 이미지가 추가할 경우 FileReader로 이미지가 미리 보여지며등록하기를 누르면 파이어베이스 storage에 저장이 된다.이미지는 4개로 제한해놨기때문에 4개가 초과되면 alert창이 뜬다. firebase 들어가면 확인할 수 있다. 내가 작성한 필드와 스토리지에 저장된 이미지들. FileReader정의 :FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 함.비동기적으로 동작함. Base648비트 2진 데이터를 (플랫폼의) 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일.. 공감수 5 댓글수 2 2024. 9. 5.
[Next 고캠핑] FirebaseError: The query requires an index. You can create it here: 데이터를 가져올 때 where과 orderBy를 같이 쓰면 생기는 문제 cloud Firestore 색인에 들어가서 복합 색인을 만들어준다.필요한 필드의 조건을 정해주고 만들어주면 색인이 생긴다.사용 설정될때까지 시간이 좀 걸린다.상태가 사용 설정됨이 되면 화면에 반영된다. // 좋아요 리스트export const getLikeList = async (userId: string) => { try { const q = query( likeListItem, where("userId", "==", userId), orderBy("createdAt", "desc"), ); const snapshot = await getDocs(q); return snapsho.. 공감수 0 댓글수 0 2024. 8. 24.
[Next 고캠핑] 파이어베이스 좋아요 기능 추가 좋아요... 좋아요 기능을 추가해야한다...어떻게 해야하는지 엄청 찾아봤지만 기본 로컬데이터를 이용해서 관리하기는 어렵고파이어베이스를 이용한김에 데이터 관리도 로컬이 아닌 파이어베이스로 변경했다. https://hhyj0000.tistory.com/184 [Next 고캠핑] 로컬 데이터 파이어베이스로 변경하기캠핑장 좋아요 기능을 추가하기 위해서 로컬로 데이터를 불러왔던것을 firebase로 바꿨다.오른쪽 상단 더보기를 눌러서 json 가져오기를 누르면 내 데이터가 잘 들어와진 것을 확인할 수 있다. hhyj0000.tistory.com likeList 컬렉션을 만들었다.여기에 userId를 추가해서 유저의 좋아요 상태 관리를 할 것. https://firebase.google.com/docs/fir.. 공감수 0 댓글수 0 2024. 8. 24.
[Next 고캠핑] 로컬 데이터 파이어베이스로 변경하기 캠핑장 좋아요 기능을 추가하기 위해서 로컬로 데이터를 불러왔던것을 firebase로 바꿨다.오른쪽 상단 더보기를 눌러서 json 가져오기를 누르면 내 데이터가 잘 들어와진 것을 확인할 수 있다. 로컬로 불러오기 // 데이터 불러오기 useEffect(() => { async function fetchData(): Promise { if (!query.region) return; // 지역 값이 유효할 때만 setLoading(true); try { const response = await axios.get( `${API_URL}/basedList?serviceKey=${SERVICE_KEY}&numOfRows=3000&pageNo=1&Mo.. 공감수 0 댓글수 0 2024. 8. 21.
[Next 고캠핑] 로그인 상태관리, 로그아웃 로그인, 회원가입 화면page > login const [formError, setFormError] = useState(false); // 로그인, 회원가입 에러 const [tabLogin, setTabLogin] = useState(true); // 로그인, 회원가입 탭 const router = useRouter(); const { isLogin } = useAuth(); useEffect(() => { // 로그인된 상태에서 /login 들어오면 홈으로 if (isLogin) { void router.replace("/"); } else { // active 클래스 1초 뒤 삭제 const timer = setTimeout(() => { .. 공감수 0 댓글수 2 2024. 8. 14.
[Next 고캠핑] 파이어베이스 중복 오류, 회원가입 [Firebase] Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app).- 파이어베이스 설정을 하고 작업을 진행하려 하니 오류가 나왔다. 찾아보니 앱을 중복해서 초기화하는 문제가 발생할 수 있다고 한다.파이어베이스 앱이 있는지 확인하고 없을 때 새로 초기화 하는 방식으로 해야한다고 해서 수정을 했다.파이어베이스 중복 오류src > firebase > firebase.tsimport { getApp, getApps, initializeApp } from "firebase/app";import { getAuth } from "firebase/auth";const firebaseConf.. 공감수 0 댓글수 0 2024. 8. 12.
[Next 고캠핑] 뒤로가기 클릭시 모달창 닫기 모달 창이 열렸을 때 뒤로닫기를 해도 모달창이 닫히게 하고 싶었다. 찾아보니 History.pushState를 많이 사용해서 사용하려 했는데 모달 쿼리를 추가하고 모달 닫기를 누를때 뒤로가기를 생성해서 간단하게 구현을 해보았다. 모달 코드src> hooks> useModal.tsimport { useRouter } from "next/router";import { useEffect, useState } from "react";export function useModal() { const [currentModal, setCurrentModal] = useState(null); const router = useRouter(); useEffect(() => { const { modal } = ro.. 공감수 0 댓글수 0 2024. 8. 12.
[Next 고캠핑] 모달 만들기 지금 캠핑 상세 화면의 이미지만 먼저 작업중에 있다. 아직 이미지 외의 다른 데이터는 작업 x 이미지를 누르면 전체 사진을 보여주려 한다. 우선 모달창만 구현한 화면. component/Modalinterface IPropsModal { isShowing: boolean; hide: () => void; message: string;}export function Modal({ isShowing, hide, message }: IPropsModal) { return isShowing ? ReactDOM.createPortal( ) => { e.stopPropagation(); }} > .. 공감수 1 댓글수 1 2024. 7. 31.
[Next 고캠핑] 커스텀훅으로 alert창 만들기 아직 준비중인 기능들이 있어 alert창을 띄우는데 커스텀을 하고싶었고,여러 화면에서 사용할 것이기 때문에 컴포넌트화해서 사용하고 싶었다. 방법을 찾아본 결과 이 방법이 제일 간단하고 편리한거 같아서 따라하게 되었다. hooks/useModal.tsimport { useState } from "react";export function useModal() { const [isShowing, setIsShowing] = useState(false); const modalToggle = () => { setIsShowing(!isShowing); }; return { isShowing, modalToggle, };}- useModal 커스텀 훅을 만들어서 모달이 보이는 상태와 모달 .. 공감수 0 댓글수 0 2024. 7. 27.
[Next 고캠핑] 드롭다운 선택으로 검색을 해보자 (타입스크립트) 캠핑장 카드가 잘 나와서 검색 기능을 시작했다. dropdown.tsx// 옵션 타입 정의interface IPropsSelect { isMain: boolean; onChangeSearch?: (region: string, subRegion: string | null) => void;}export default function DropDown({ isMain, onChangeSearch }: IPropsSelect) { // 광역시 const [selectedRegion, setSelectedRegion] = useState>(null); // 하위지역 const [subRegions, setSubRegions] = useState([]); // 광역시 선택시 하위지역 리셋 con.. 공감수 0 댓글수 0 2024. 7. 25.
[Next 고캠핑] 페이지네이션 커스텀하기 페이지네이션을 만드려고 찾아보다가 react-paginate 라이브러리를 선택해서 만들었다.하지만,, 마음에 안든다..가운데 ...도 거슬리고 페이지가 5개씩만 나오게 하고 싶은데 찾아보니 안된다고 한다. 라이브러리 선택하는 것도 잘 해야한다더니 그 말이 맞음,, 다시 페이지네이션을 만들어보기로 한다.. export default function Pagination({ totalItems, itemCountPerPage, pageCount, onClick, currentPage,}: IPropsPage) { const totalPages = Math.ceil(totalItems / itemCountPerPage); // 총 페이지 개수 const [start, setStart] = useSt.. 공감수 0 댓글수 1 2024. 7. 24.
스크롤 내려서 화면에 동영상이 보일 때만 재생 document.querySelector('.modal').addEventListener('scroll', function() { document.querySelectorAll('.video_wrap video').forEach(function(video) { const videoHeight = video.clientHeight; //비디오 높이 const videoTop = video.getBoundingClientRect().top - videoHeight; if (videoTop -(videoHeight + videoHeight / 2)) { // 여유사이즈 동영상 높이의 절반 video.play(.. 공감수 0 댓글수 0 2024. 7. 19.
[Next 고캠핑] 입지 구분 아이콘으로 하기 어제 만든 캠핑리스트 캠핑장 입지 구분을 아이콘으로 넣고 싶었다.참고로 활용 메뉴얼 보면 데이터 설명 나와있음. LocationICon.tsximport styled from "@emotion/styled";interface IPropsType { type: string;}const Icon = styled.i` display: inline-block; width: 3.2rem; height: 3.2rem; background-size: 100%; background-repeat: no-repeat; ${(props) => { switch (props.type) { case "산": return `background-image: url(/image/icon.. 공감수 0 댓글수 0 2024. 7. 17.
[Next 고캠핑]공공데이터포털 API 불러오기 캠핑 사이트를 만드려고 공공데이터포털에서 캠핑 api를 신청했다. 인증키는 최상단에 .env파일을 만들어서 NEXT_PUBLIC_SERVICE_KEY 인증키를 넣어준다.next.js는 NEXT_PUBLIC 을 붙여줘야 함.리액트는 REACT_APP 나는 캠핑장 정보를 카드 형태의 리스트로 제공하고 싶었다. interface ICampingList { facltNm: string; lineIntro?: string; addr1: string; firstImageUrl?: string; themaEnvrnCl?: string; tel: string; contentId: number;}interface IApiResponse { response: { body: { it.. 공감수 0 댓글수 0 2024. 7. 16.
[react-select] 리액트 셀렉트 커스텀하기 interface Option { value: string; label: string;}const customSelect = (isMain: boolean): StylesConfig => ({ control: (base, state) => ({ ...base, width: isMain ? "26rem" : "20rem", borderRadius: "1rem", background: state.isDisabled ? "#f6f6f6" : "rgba(255, 255, 255, 0.3)", boxShadow: "none", borderWidth: ".2rem", borderStyle: "solid", borderColor: state.isDisabled ? "#.. 공감수 0 댓글수 0 2024. 7. 13.
[react-select] 리액트 셀렉트 사용해보기 나는 드롭다운으로 지역을 선택하는 것을 만들고 싶었다.셀렉트박스를 커스텀할 수 있는 방법을 찾아보다 리액트 셀렉트를 발견 대한민국 행정구역 파일도 찾으면 있을 거라 생각해서 json을 찾았다가 변수로 정의된 코드를 찾았음.export const AREA0 = ['전체', '서울', '인천', '대전', '광주', '대구', '울산', '부산', '경기', '강원', '충북', '충남', '전북', '전남', '경북', '경남', '제주'];export const AREA1 = ['강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구'.. 공감수 0 댓글수 1 2024. 7. 7.
[Swiper] 스와이퍼 여러 개를 설정해보자 multiple swiper 기존 스와이퍼 설정const studentGroupSlide = new Swiper('.swiper-container', { slidesPerView: "auto", spaceBetween: 0, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }}); 하지만 나는 슬라이드가 여러개고 같은 슬라이드라 설정을 여러번 해주고 싶지 않다..swiper-container 를 querySelectorAll로 선언해서 반복문으로 설정해봤지만 실패!방법을 찾다가 발견했다. 멀티 스와이퍼 설.. 공감수 0 댓글수 0 2024. 7. 3.
[Chart.js] 분산형 차트 4분할로 hover하고 click하기 원래 chart.js 에서 함수를 직접 작성해가면서 기능을 추가했는데기존 네 영역에도 색을 주고호버하면 색을 또 주고클릭하면 또 주고..코드가 길어질 것 같아서 html 객체를 생성했다. 11번 탭탭탭 22번 탭탭탭 3번 탭탭탭 4번 탭탭탭 .background도 영역 나누기 .chart { position: relative; width: 700px;}.background { width: calc(100% - 47px); height: calc(100% - 61px); left: 27px; .. 공감수 0 댓글수 0 2024. 6. 27.
[Chart.js] 데이터 값마다 포인트 이미지 다르게 주고 싶다. 데이터는 0 ~ 100으로 들어가지만 위아래 여백을 주고 싶어서 +- 10씩 해줬다. const ctx = document.getElementById('myChart');const dataValues = [75, 25, 50, 0, 100];// 이미지 아이콘const imageUrls = [ './emoji_0.png', './emoji_25.png', './emoji_50.png', './emoji_75.png', './emoji_100.png',]const images = imageUrls.map(url => { const img = new Image(25, 25); img.src = url; return img;});.. 공감수 1 댓글수 1 2024. 6. 27.
[css] 나는 table tr:hover 테두리를 주고 싶다. td에 boder-bottom이 있는 상황에서tr을 호버했을 때 tr에 테두리를 주고 싶었다.어떻게 하나 찾아보니 역시 방법은 있다. outline 을 이용하면 된다. See the Pen table tr hover border by _홍시 (@wlcbybsd-the-sasster) on CodePen.offset은 간격 조절하려고 넣어줬음. 공감수 0 댓글수 0 2024. 6. 26.
[input range] 커스텀 어제 range 커스텀을 했는데 더 간단한 방법을 찾았잖아...!완전 럭키비키..🍀 그라디언트로 조절하는 방법완전 천재 만재 공감수 0 댓글수 0 2024. 6. 25.
input range 커스텀 input range를 커스텀 하려고 한다.인풋 버튼이 인풋 밖으로 튀어나오지 않으면 css만으로도 가능하지만여차저차해서 테스트로 만들어봤다. 이미지 보통 .range_fill 인풋 색깔 채워주기 위해 만들었다. .state_image { transition: .2s all; background: salmon; width: 40px; height: 40px; text-indent: 100%; white-space: nowrap; overflow: hidden;}.emotion_state.bad .state_image {background: skyblue;}.emotion_state.good .state_i.. 공감수 0 댓글수 0 2024. 6. 24.
[알고리즘] 동적계획법 피보나치 수열: 첫째, 둘째 항이 1이며 그 뒤의 모든 항은 바로 앞 두 항의 합인 수열 동적계획법이란?: 복잡한 문제를 간단한 여러 개의 하위 문제로 나누어 푸는 방법이 때, 하위 문제의 답을 저장하여 중복 연산을 하지 않음. 동적계획법 문제의 특성중복되는 부분문제 : 작은 하위 문제들이 중복되어 나타난다.최적 부분 구조 : 최적해는 부분 문제의 최적해로부터 구할 수 있다. 시간 복잡도간단한 재귀호출 : 계산하는 양이 대략 2배씩 늘어남. 계산양이 많아지면 느려짐동적계획법: 각 항들은 딱 1번씩만 계산이 됨. n번째 항을 구하기 위해선 n만큼만 시간을 들이면 됨. 공간 복잡도: 하위 문제들의 답을 저장해놓기 때문에 하위 문제의 수만큼 저장공간 필요 동적계획법을 구현하는 테크닉 점화식 .. 공감수 0 댓글수 0 2024. 5. 7.
[코딩테스트] OX퀴즈 📌 내 코드function solution(quiz) { let result = [] quiz.forEach((item) => { const parts = item.split("=") const func = new Function('return ' + parts[0]); result.push(func() === parseInt(parts[1]) ? "O" : "X") }) return result}- =을 기준으로 계산식과 값을 나누어서 값이 맞는지 비교를 했다.- 처음엔 문자열 계산식을 사용할 수 있는 eval() 을 사용했는데 여러 이유로 위험한 함수여서 사용하지 않고 대신 new Function()을 사용하여 계산식을 계산했다. 📌 다.. 공감수 0 댓글수 0 2024. 5. 4.
[코딩테스트] 저주의 숫자 3 📌 내 코드function solution(n) { for (let i = 1; i- 원래 i를 3으로 나눠서 3의 배수에 카운트를 올리는 방법으로 하다가 자꾸 헤매서 방법을 찾아봤다.- 3의 배수와 3을 포함하는 숫자에서 n을 카운트 해주고- n 숫자가 커졌으니가 (예를 들어 8이어도) 반복문이 8에서 멈추지 않고 n++된 만큼 반복이 된다. 공감수 0 댓글수 0 2024. 4. 29.
[코딩테스트] 영어가 싫어요 📌 내 코드function solution(numbers) { let result = numbers; result = result.replace(/one/g, 1); result = result.replace(/two/g, 2); result = result.replace(/three/g, 3); result = result.replace(/four/g, 4); result = result.replace(/five/g, 5); result = result.replace(/six/g, 6); result = result.replace(/seven/g, 7); result = result.replace(/eight/g, 8); result = r.. 공감수 0 댓글수 0 2024. 4. 26.
[알고리즘] 재귀호출 알고리즘이란?: 계산을 통하여 해결할 수 있는 문제를 해결하는 방법 알고리즘 특징유한성명확성입력출력효과성 재귀호출이란?: 함수가 자기 자신을 호출 수학적 귀납법 = 재귀적 증명법: 명제 P(n)을 다음과 같이 증명하는 방법N = 1일 때 성립함을 보인다.P(k)가 성립한다고 가정할 때, P(k+1)이 성립함을 보인다.따라서 모든 자연수 n에 대하여 P(n)이 성립한다.예시) 퀵정렬: 재귀호출을 이용한 대표적인 정렬예시) 4를 기준으로 작은수는 왼쪽 큰수는 오른쪽 재귀함수 디자인재귀함수를디자인 하기 위한 세가지 단계함수의 정의를 명확히 한다.기저 조건에서 함수가 제대로 동작하게 작성한다.함수가 작은 input에 대하여 제대로 동작한다고 가정하고 함수를 완성한다. 공감수 0 댓글수 0 2024. 4. 25.
[코딩테스트] 숨어있는 숫자의 덧셈 (2) 문자열 my_string이 매개변수로 주어집니다. my_string은 소문자, 대문자, 자연수로만 구성되어있습니다. my_string안의 자연수들의 합을 return하도록 solution 함수를 완성해주세요. 📌 내 코드function solution(my_string) { const number = my_string.replace(/[^0-9]/g, " "); const arr = number.split(' ').map(Number); const result = arr.reduce((prev, cur) => { return prev + cur; }, 0) return result;}- 문자열에서 숫자만 추출하고, 숫자 배열로 만들.. 공감수 0 댓글수 0 2024. 4. 24.
[코딩테스트] 합성수 찾기 문제 약수의 개수가 세 개 이상인 수를 합성수라고 합니다. 자연수 n이 매개변수로 주어질 때 n이하의 합성수의 개수를 return하도록 solution 함수를 완성해주세요. 입출력 예 #1 10 이하 합성수는 4, 6, 8, 9, 10 로 5개입니다. 따라서 5를 return합니다. 입출력 예 #2 15 이하 합성수는 4, 6, 8, 9, 10, 12, 14, 15 로 8개입니다. 따라서 8을 return합니다. 📌 내 코드 function solution(n) { let result = []; for (let i = 4; i 공감수 0 댓글수 0 2024. 4. 18.
[자료구조] 8일차 우선순위 큐의 방법과 힙 우선순위 큐란? : 출력 연산 시 가장 우선순위가 높은 원소를 출력한다. 📌 단순하게 생각해보기 ❗ 높은 숫자가 우선순위라고 가정함. = 출력값의 빈자리는 당겨짐 📌 우선순위 큐를 단순한 접근 방법으로 구현한 경우 - 입력 : O(1) - 출력 : O(n) 우선순위가 가장 높은 원소를 찾는 과정과, 원소 제거가 비효율적임. 힙 : 최솟값 또는 최댓값을 빠르게 찾기 위해 고안된 완전 이진 트리 최대 힙 : 부모 노드는 항상 자식 노드보다 큰 값을 갖고 있음. 최소 힙 : 부모 노드는 항상 자식 노드보다 작은 값을 갖고 있음. import heapq 파이썬의 heapq 모듈로 최소 힙 사용 📌 최대 값이 필요한 경우 값을 저장할 때 -1을 곱한 값을 저장하면 됨. -1을 곱함으로서 최댓값과 최솝값이 반전된다.. 공감수 0 댓글수 0 2024. 4. 18.

문의안내

티스토리
로그인
고객센터

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