티스토리

선초코

검색하기

블로그 홈

선초코

seonchoco.tistory.com/m

SeonChoco 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

답답 노트 2023.05.16 Inverse: opposite in postition Stuffy: lacking fresh air 힘들게 일해서 지쳐, 나는 침대로 서둘러갔다 Weary with toil, I haste to my bed At the break of dawn: very early 공감수 0 댓글수 0 2023. 5. 16.
11 폭 줄이기 그리고.... 반응형 수정 4xl:w-[19%] 3xl:w-[25%] 2xl:w-[28%] lg:w-[34%] w-[48%] mr-[2%] useRef 사용으로 input 최적화하기 (리렌더링 막기) (velog.io useRef 사용으로 input 최적화하기 (리렌더링 막기) useRef 사용으로 input 최적화하기 velog.io 도메인 연결! nilili.site가 1900원 밖에 안해서 사버렸다. 가비아에서 도메인 구매하고 vercel의 domain 설정하는 곳에 가서 mock 데이터 아이디 두개로 6개 6개씩 써볼까요 카테고리 다양하게 여행 전 3개 여행 후 3개씩 검색 기능에서debounce throttling 써주기 인풋 서치 cancel button custom style 넣기.. 공감수 0 댓글수 0 2023. 3. 11.
단축키 모음 화면녹화 단축키! window + G 공감수 0 댓글수 0 2023. 3. 10.
내배캠 TIL 2023.03.10 오늘 할 일 favicon 수정 렌더링 최적화 코드 정리 - 컴포넌트화 - 커스텀 훅 배너 progressive 이미지 및 더보기 버튼 주말에 아마도? 밥 먹고 발표자료 멘토링.... 화면녹화 단축키! window + G 발표 순서 1. 주제 선정 배경, 간단한 서비스 설명 2. 서비스 아키텍쳐 프론트 (ui는 react로 구성했다. 사실 react도 라이브러리) css 라이브러리는 tailwind, styled component를 썼다고 해야함 (얘네도 사실 라이브러리) 파이어베이스 카카오 맵 API 그 외 쓴 라이브러리 vercel로 배포 한 후 useData를 모아서 사용자 친화적이게 기능을 개선했다 3. 주요 기능 시연 메인 페이지 게시물을 가로로 넘겨가며 보여주기 해시태그 리스트까지 내려갔다가 .. 공감수 0 댓글수 0 2023. 3. 10.
내배캠 TIL 2023.03.09 폭을 수정해서 시윤님껄로 맞추기 (완료) 검색박스 수정 (나는 선만 없앴고, 희현님이 나머지 맡아서 해주신다고 했다. 검색 게시물 제목 높이 통일 (완료) 메인 페이지 반응형 제목 줄이기 (완료) NOW REVEIWS 추가 (완료) 해시태그 부분 - 더보기 닫기 (완료) 토글 버튼 따로 빼기 (완료) 검색 카테고리 리셋버튼 (완료) input search (완료...? cancel 버튼 css 수정필요) 추가 구현하면 좋을 것 다크 모드/라이트 모드 구현 여행관련 페이지 링크 또는 공공기관 정보 링크 추가하기 지도로 연결되는 링크 추가 게시물 페이지에서 해시태그 클릭하면 해당 단어로 자동검색되는 기능 게시물별 더보기 버튼이 있었으면 좋겠다. => 각 해당 게시물 검색하면서 검색페이지로 이동, 그런데 그럴.. 공감수 0 댓글수 0 2023. 3. 9.
내배캠 TIL 2023.03.08 오늘 할 일 랜딩 글자 위치 조정 (완성) 랜딩 이미지 progressive 이미지 스캘래톤 ui 반응형 수정 (완성) 해시태그 리스트 반응형과 나눠버리기? 글자 겹치는 문제 해결 필요 가로스크롤 에러남 이전 코드로 수정 필요 (완성) 브로셔 트러블 슈팅 넣기 - css에서 고생을 했지만 안 됐던건 없었고.... 해시태그 자동검색 에러 (해결) 피드백 중 반영하면 좋을 것 피드백 중 반영하기 쉬운 것 공감수 0 댓글수 0 2023. 3. 8.
내배캠 TIL 2023.03.07 오늘 할 일 리스트들 크기에 따라 보여지는 비율 지정 (완성) 메인 페이지 리스트 가로 스크롤 버튼 (완성) 메인 페이지 해시태그 리스트 반응형 (완성) 약간 야매다 검색 페이지 리스트 반응형 (완성) 유저 페이지 리스트 반응형 (완성) 유저 페이지 여행 전, 후 토글 버튼 반응형 (완성) 유저 페이지 프로필 사진 영역 반응형 (완성) 시간 있으면 배너 글자, path 글자 반응형 더 꼼꼼하게 실시간으로 브라우저 화면 사이즈 불러와주기 https://www.positronx.io/react-get-dynamic-window-height-width-using-react-hooks/ React Get Dynamic Window Height Width using React Hooks We will help y.. 공감수 0 댓글수 0 2023. 3. 7.
내배캠 TIL 2023.03.06 path에 쓰고 싶은 일러스트 레퍼런스 https://www.freepik.com/premium-vector/young-man-with-luggage-planning-sightseeing-route-attractions_31547230.htm#query=travel%20plan&position=5&from_view=keyword&track=ais Premium Vector | Young man with luggage planning sightseeing route for attractions Download this Premium Vector about Young man with luggage planning sightseeing route for attractions, and discover more .. 공감수 0 댓글수 0 2023. 3. 6.
내배캠 TIL 2023.03.04 어제 드디어 대략 기능과 ui를 만들어서 User Test를 위한 설문조사 구글폼을 만들고 vercel에 배포를 했다. 그런데 파이어베이스를 많이 써서 무료 플랜 허용 용량을 넘겨서 오늘 5시까지는 오류가 난다. 그래서 지금까지 설문조사에는 파이어베이스가 터져서 문제가 있다는 리뷰가 많이 올라오고 있다. 좀 답답하지만 그거 외에도 완성되지 않는 ui가 불편하다는 내용이 많아서 그것도 빠르게 수정해서 재배포하고 싶다. 지금부터는 계속 사용자 데이터를 가져올 건데 우리가 테스트를 하면서 firebase를 터트려버리면 안되니까 개인 파이어베이스에 연결을 해주려고 한다. 그런데 키값을 내꺼로 바꿔넣어줬는데, Missing or insufficient permissions. 이런 오류가 났다. 해결법 참고 페이지.. 공감수 0 댓글수 0 2023. 3. 4.
내배캠 TIL 2023.03.03 seachparams은 string화되어서 가져와져서 나의 object 들은 [object object]라는 스트링으로만 받아와졌다. 그래서 querystring 보내기전에 JSON.stringyfy를 해주고 받아올 때 JSON.parse를 해주고 데이터 타입을 복구해주려고 했으나. searchparams는 string | null 타입이라면서 계속 JSON parse가 되지 않았다. 조건으로 null 경우를 걸러주었는데도, 해결이 되지 않아서 // @ts-ignore 을 이용해서 타입에러를 없애주었다. 맨처음 서치 페이지 들어갔을 때 모든 searchparams는 null이다. 그러면 null이 아닐 때만 세팅해주라고 하면 된다. 한번이라도 검색을 한다면 lc = [] ht = [] ws = "" ts.. 공감수 0 댓글수 0 2023. 3. 3.
내배캠 TIL 2023.03.02 한번만 백엔드에서 가져와서 프론트에서 완전히 다뤄주는 코드 검색을 했을 때 그 검색 내역을 페이지에 url로 저장하는 법 - querystring을 이용하면 된다. 그냥 필터하는 부분에 navigate를 더해주었다. 리팩토링 전 코드 import { useState, useEffect } from "react"; import Select from "react-select"; import SearchList from "./SearchList"; import { useGetCourseQuery } from "../../redux/modules/apiSlice"; import { useDispatch, useSelector } from "react-redux"; import { changeHashTagNum .. 공감수 0 댓글수 0 2023. 3. 2.
내배캠 TIL 2023.02.28 지도 바운드 재설정하기 https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/map/setBounds 지도 범위 재설정 하기 | react-kakao-maps-sdk docs 지도 범위를 재설정합니다. 어떤 좌표나 마커들이 지도에 모두 보여야 할 때 좌표들의 정보를 갖는 LatLngBounds를 사용하여 좌표들이 모두 보이게 지도의 중심좌표와 레벨을 재설정 할 수 있습니 react-kakao-maps-sdk.jaeseokim.dev const ListMap = ({ course }: ListProps) => { const courseList = JSON.parse(course.courseList); const [map, setMap] = useState(); .. 공감수 0 댓글수 2 2023. 2. 28.
내배캠 TIL 2023.02.24 어제 발표 자료 정리해서 속 편하게 일찍 오늘 아침 9시부터 1시까지 발표 준비한다고 진이 다 빠졌다. 중간 발표 피드백 - 검색 파트에서 지역명, 해시태그 추가할 떄 레이아웃 shift가 일어나고 있다 => 버그 테스트 할때 잡아야 한다 - input 크기를 고정시켜주면 좋다 (input box 크가 이동되면 보기 좋지 않음)- sweetaler2 모달 대용으로 잘 구현해주었다- issue 카드로 task 관리 => 가능하면 깃허브 프로젝트를 만들어서 한눈에 볼 수 있도록 하는 것도 좋다 - 일부 UI가 정리되지 않은 부분이 있다 => 최종 프로젝트 전까지 다듬어주었으면 좋겠다- 전반적으로 완성도가 높음 원하는 mockup 데이터 레퍼런스 custom hook - 다음주에 따로 강의 화요일에 가능 4... 공감수 1 댓글수 0 2023. 2. 24.
내배캠 TIL 2023.02.23 확실히 알아둬야하는 vercel 배포법 + 파이어베이스 config_key .env에서 가져오는 법 api_key 같은 것은 배포 전에 vercel env key, value에 넣어주어야 한다. npm install dotenv npm install env-cmd --save 제일 바깥 파일에 .env 파일을 생성한다 그 안에 작은 따옴표, 큰 따옴표, 쉼표를 삭제한 값만 React_APP을 붙여서 상수로 넣어준다. package.json에 "start": "env-cmd -f .env react-scripts start", 이렇게 넣어주면 된다. .env를 먼저 실행한다는 명령어 배포 성공!!! https://nilili-007.vercel.app/ React App nilili-007.vercel.a.. 공감수 0 댓글수 0 2023. 2. 23.
내배캠 TIL 2023.02.22 유저 페이지 게시물 호버 : 색상 변경 및 글자 띄우기 게시물 클릭 => 상세 페이지로 이동 게시물 단어 클릭 => 여행 후로 상태 변경 (edit 기능) => 소중한 리뷰 남겨주세요 다음에 쓸래요. 물론이죠 알러트창 띄우기 => 수정페이지로 이동 메인 리스트 지도 받아오기 유저 페이지 페이지 네이션, 서치 페이지 페이지네이션 유저 페이지에서 데이터를 변경하는 함수를 실행하고 navigate를 이용해서 수정 페이지로 넘어가고 그 페이지에서 refetch를 해주어 가장 최신의 서버 데이터를 한번 가져와줬는데, 내가 변경한 데이터가 적용이 안 되어있어서 좀 놀랬다. 하지만 query들은 비동기 함수고 비동기 함수는 제일 마지막에 실행이 된다고 했다. 그런데 순서를 명확히 지정을 해주고 싶다면 async aw.. 공감수 0 댓글수 0 2023. 2. 23.
내배캠 TIL 2023.02.21 https://www.freecodecamp.org/korean/news/how-to-convert-a-string-to-a-number-in-javascript/ 자바스크립트에서 문자열을 숫자로 변환하는 방법 자바스크립트에서 문자열을 숫자로 변환하는 방법은 여러 가지가 있습니다. 코드로는 어떻게 생겼을까요? 이번 글에서는 문자열을 숫자로 변환하는 11가지 방법을 소개합니다. Number() 함수를 이 www.freecodecamp.org 문자열을 숫자로 고치는 법 중 Number()을 이용해서 변환해보았다. function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { c.. 공감수 0 댓글수 0 2023. 2. 21.
내배캠 TIL 2023.02.20 팹잇콘?도 고치고, 서연님 인풋 창 아이디랑 회원가입 각각 파이어베이스가 DB 지원하지 않는 type이라서 오류가 났다. JSON.stringify해서 넣고 JSON.parse해서 가져와서 쓴다. 배열이 서로 부분집합인지 여부 판단! https://velog.io/@devjade/JavaScript%EB%A1%9C-%EB%B6%80%EB%B6%84%EC%A7%91%ED%95%A9subset%EC%9D%B8%EC%A7%80-%EC%97%AC%EB%B6%80-%ED%8C%90%EB%8B%A8%ED%95%98%EB%8A%94-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 JavaScript로 부분집합(subset)인지 여부 .. 공감수 0 댓글수 0 2023. 2. 20.
내배캠 TIL 2023.02.17 const db = firebase.firestore(); const usersRef = db.collection('users'); usersRef.select('name', 'email').get().then((querySnapshot) => { querySnapshot.forEach((doc) => { console.log(db)} 마커 부분 커스텀 하려면 이미지를 받아와야함, 기본 제공 이미지는 예시 사진에 파란색 A와 같이 생김 클릭해서 연결 되는 느낌은 인포 윈도우가 내줄수 있을 것 같은데, 마커가 진해지는거는 해봐야 안다. 지역 선택 다중으로 해야할 듯 //비동기 제일 마지막에 실행됌. eventloop - 공부 //usemutation에 onSuccess userflow 에러 해결 주차에 오.. 공감수 0 댓글수 0 2023. 2. 17.
내배캠 TIL 2023.02.16 게시물, 댓글 수정 시간으로 업뎃 해줄 건지? (버튼 대신에 더블클릭해서 삭제하기, 다음거 클릭하면 자동 저장) 마커 클릭했을 때 코스 상자랑 매칭 되는지? 장소에 대한 카테고리 여행 전/후 여행 후 find my path (글쓰기) 코스 짜기(검색 페이지) 페이지의 정체성을 연결 되는 글쓰기로 가는건 좋다. (로그인을 못한 유저는 여행 전 페이지를 쓰는 글쓰기 페이지로 바로 갈 수가 없다) 로그인한 유저는 글쓰기 페이지로 로그인 안 한 유저는 => 회원가입 -> 로그인 -> 검색 -> 여행 전 (게시물) 알러트 창이 뜨는데 로그인 모달을 띄우고 그걸 취소한 경우 (로그인을 하지 않으면 글을 쓸 수 없습니다. 저희의 코스를 먼저 만나보세요) => 바로 검색 페이지 전체 게시물 리스트 보여주기 여행 후 최.. 공감수 0 댓글수 0 2023. 2. 15.
내배캠 TIL 2023.02.15 slice 하면 배열을 원하는 인덱스만 잘라와서 쓸 수 있다. 게시물 여행 전/ 여행 후 카테고리 분리 어떤 식으로 할 건지 카테고리 분리 (여행 전, 여행 후) 랜딩 페이지를 따로? 지역 검색창 가운데로 띄워주기 각각 모니터 마다 테스트를 해야한다. 랜딩페이지 추가는 거절 배너 맵 느낌으로 가는것 + 우리 페이지에 대한 설명 추가 vs 여행 전 게시물에 맵에 보여지는 두 가지 find my path (지도 이미지를 넣는 것 또는 계획 하는 이미지) 메인 페이지 리스트 계획 리스트는 안 넣었으면 좋겠다 여행 전 3개 최신순 (지역을 빼고) 3개 후기 최신순 3개 (map -> 호버) 후기 좋아요순 4개 해시태그 계획: 추가기능: 최신순 + 해시태그 리스트 (검색창으로 넘어가기) 계획 전 리스트를 넣었을 .. 공감수 0 댓글수 0 2023. 2. 15.
내배캠 TIL 2023.02.14 문제 발생한 것 new Date()값을 그대로 firebase database에 저장하고 그대록 불러와주려고 했더니, non serizable 한 값이라는 에러가 콘솔 창에 떴다. 그래서 검색을 해봤다. https://www.bam.tech/article/the-redux-best-practice-do-not-put-non-serializable-values-in-state-or-actions-explained The redux best practice "Do Not Put Non-Serializable Values in State or Actions" explained This article explains one of the four react-redux best practices: "Do Not P.. 공감수 0 댓글수 0 2023. 2. 14.
내배캠 TIL 2023.02.13 courses: { id: uuid(), location:"지역이름", hashtag: ["#...",] likes:숫자, places: [ { {name: "장소명"}, {address: "주소명"}, {id: "카카오맵 API id"}, }, { {name: "장소명"}, {address: "주소명"}, {id: "카카오맵 API id"}, }, { {name: "장소명"}, {address: "주소명"}, {id: "카카오맵 API id"}, }, ], } reviews: { id: uuid(), contents: [ {kakaoId : "리뷰내용"}, {kakaoId : "리뷰내용"}, {kakaoId : "리뷰내용"}, ], } 1. course get api 만들기 2. 카카오맵 장소 id 빼.. 공감수 0 댓글수 0 2023. 2. 13.
내배캠 WIL 2023.02 2주차 기획 기획 기획이었던 한 주 최종 프젝 기획은 하고 또 해도 논의해야 할 상세한 부분이 남았거나 새로 생기는게 많다. 그것에 대한 의견을 나누고 조율하는데 상상이상의 공감수 0 댓글수 0 2023. 2. 12.
내배캠 TIL 2023.02.10 div에 백그라운드로 이미지를 넣으면 된다 ㅠㅠㅠ https://redpixelthemes.com/blog/tailwindcss-background-image/ How to work with background images in Tailwind CSS There are multiple ways to work with background images using Tailwind but I’ll show you the 3 most common (and recommended) ways to do it on your project. Via the tailwind config: Let’s start the old-fashioned way, by adding it to the tailwind config. redpi.. 공감수 0 댓글수 0 2023. 2. 10.
내배캠 TIL 2023.02.09 스크럼마스터 : 선형 오늘 팀원들 상태 희현 : 잘 못 잤다. 피곤하지만 눈 뜨고 앉아있으니까 괜찮아지고 있다. 서연 : 잘 잔 줄 알았으나, 막상 일어나니 피곤하다. 하지만 프로젝트를 진행할 정도는 된다. 하다보면 괜찮아질 것 같다. 선형 : UI 만들다가 늦게 잤고, 엄청 피곤하다고 생각했는데, 깨서 앉아 있다보니까 잠이 깬다. 시윤 : 아침이라 좀 맹한 상태지만, 잠을 잘 자고 일어났다. 어제 한 일 UI 만들기 프로젝트 디테일에 대한 회의 및 스크럼 디자이너 개발자 소통 특강 오늘 할 일 오늘 오후 스크럼 17시에 진행 UI 브랜치 pull request UI 마저 구현 UI 구현 끝난 사람은 기능 구현 시작 11시 디자이너님과 회의 6시까지 기술 멘토링 사전노트 제출 진행상황 시윤: 드래그 드롭.. 공감수 0 댓글수 0 2023. 2. 10.
내배캠 TIL 2023.02.08 09:00am ~ 10:00am: 오전 스크럼 (오늘 컨디션 공유, 어제 한일 회고, 오늘 할일 정하기) 10:00am ~ 11:00am: 회의 ( 05:00pm ~ 05:40pm: 디자이너와 개발자 소통 특강 05:40pm ~ 06:00pm: 오후 스크럼 오전 스크럼 오늘 팀원들 상태 희현 : 푹잤는데, 피곤하다. 점점 괜찮아지고 있음. 서연 : 어제 넷플릭스 ‘피지컬100’을 보고 잤는데, 운동한 것 처럼 힘들고 피곤하다. 선형 : 늦게까지 잠이 안들어서 늦게잤는데, 일어났는데 예상보다는 컨디션 괜찮음. 시윤 : 밤에 보고싶은 미드가 있었는데 포기하고 일찍잤음에도 불구하고 진짜 피곤함. 계속 머리가 멍한 상태 어제 한 일 기획마무리 깃허브 레포지토리 생성 초기세팅진행 테일윈드세팅 오류 해결 프로젝트 .. 공감수 0 댓글수 0 2023. 2. 8.
내배캠 TIL 2023.02.07 https://velog.io/@swanious/TIL-.d.ts%ED%8C%8C%EC%9D%BC%EC%97%90%EC%84%9C-reference-typesreact-scripts%EC%9D%B4-%EB%AD%98%EA%B9%8C [TIL] react-app-env.d.ts파일 속 /// ? 프로젝트에서 .env파일에 있는 변수를 사용하려면 보통 아래처럼 사용할 수 있다. 근데 이렇게만 사용하면 typescript 프로젝트 상에서는 변수가 undefined 이라면서 오류가 발생한다. 타입지정을 안 velog.io https://velog.io/@nana1005/React-TypeScript-Tailwind-%EC%84%A4%EC%A0%95 React + TypeScript + Tailwind 설정 Ta.. 공감수 0 댓글수 0 2023. 2. 7.
내배캠 TIL 2023.02.06 팀 배정 좋다요. 결과는 모르겠지만 과정을 재밌을 것 같다. 기획이 왜 이리 오래 걸렸징 우리 꽤나 복잡한 여행 코스 웹페이지 만들기로 결정! https://www.notion.so/Nilili-S-A-007-019fda5aea384e389f38598cad8d7e8b 공감수 0 댓글수 0 2023. 2. 6.
[level 0] 문자열 뒤집기 - 120822 [level 0] 문자열 뒤집기 - 120822 문제 링크 성능 요약 메모리: 33.5 MB, 시간: 0.06 ms 구분 코딩테스트 연습 > 코딩테스트 입문 채점결과 정확성: 100.0 합계: 100.0 / 100.0 문제 설명 문자열 my_string이 매개변수로 주어집니다. my_string을 거꾸로 뒤집은 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 입출력 예 my_stringreturn "jaron" "noraj" "bread" "daerb" 입출력 예 설명 입출력 예 #1 my_string이 "jaron"이므로 거꾸로 뒤집은 "noraj"를 return합니다. 입출력 예 #2 my_string이 "bread"이므로 거꾸로.. 공감수 0 댓글수 0 2023. 2. 4.
[level 0] 점의 위치 구하기 - 120841 [level 0] 점의 위치 구하기 - 120841 문제 링크 성능 요약 메모리: 33.5 MB, 시간: 0.06 ms 구분 코딩테스트 연습 > 코딩테스트 입문 채점결과 정확성: 100.0 합계: 100.0 / 100.0 문제 설명 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다. x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다. x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다. x 좌표 (x, y)를 차례대로 담은 정수 배열 dot이 매개변수로 주어집니다. 좌표 dot이 사분면 중 어디에 속하는지 1.. 공감수 0 댓글수 0 2023. 2. 3.

문의안내

티스토리
로그인
고객센터

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