TIL (75) 썸네일형 리스트형 WIL 23.07.17 ~ 23.07.24 아웃소싱 프로젝트를 마치며 [아웃소싱 프로젝트 KPT 회고] Keep 활발한 의사소통 편안한 분위기를 만들어 자유로운 의견을 내게 만든 것 오류가 있다면 화면공유하여 같이 해결하는 것 다들 열정을 가지고 더 좋은 프로젝트로 만들기 위해 노력한 것 밀도 있게 집중한 것 프로젝트를 마감시간 안에 잘 끝낸 것 Problem git pull을 했을 때 가끔 연동이 잘 안된 부분 git pull을 했을 때 json-server가 conflict 난 것 Try 화면공유와 구글링을 통해 오류를 해결함 이번 프로젝트에서 새로 시도해본 것 1. 카카오 맵 API 우리 조는 맵이 필수구현과제는 아니었지만, 그래도 맵을 구현해보고 싶은 욕심이 있었다. 그래서 카카오맵을 이용하여 간단하게 구현하였다. 처음에는 하드코딩으로 위도, 경도값을 직접 .. TIL 23.07.19 카카오맵 API CORS 에러 간단하게 해결 문제점 카카오맵 불러오는데, CORS 뜨면서 차단됐음.. 제일 싫어하고 해결하기 어려운 에러 해결방안 API 자체 오류라고 하길래, 개발자도구 > network > 브라우저 캐시만 지우면 간단하게 해결된다고 해서 지웠더니 해결됨 줌 기능과 스카이뷰 기능, 마커 기능을 추가하니까 제법 지도같이 잘 나온다. TIL 23.07.18 카카오맵 API 'Geocoder' 에러 문제점 기존에 경도, 위도를 하나하나 입력하여 정보를 받아온 하드코딩 ..에서 벗어나서 단순히 주소만 있으면, 카카오맵에서 객체의 주소를 받아올 수 있다고 하길래, 외부 API인 geocoder를 사용하기로 하였다. 자동으로 위도, 경도로 바꿔주는 API로 경도-위도 검색 사이트를 이용하지 않고 매우 효율적으로 관리할 수 있음. 그러나 이를 사용하는데 에러가 발생하였다. const geocoder = new window.kakao.maps.services.Geocoder(); Cannot read property 'Geocoder' of undefined 오류가 나면서 읽어오지 못했음. 시도해본 것 서비스 종료했나 싶어 검색했는데 그것도 아니었고, Geocorder() -> geocorder() 로 변경.. TIL 23.07.14 오픈웨더맵 날씨 API 불러오기 완성본 현재 습도 99 % ... 오늘은 오픈웨더맵을 이용해서 날씨 API 를 불러오는 방법에 대해 포스팅 하려고 한다. 다음주에 드디어 아웃소싱 프로젝트를 하는데 이게 외부 API 를 사용하는 것과 관련된다고 하길래 다시 복기하고자 함. 모자이크는 내가 사는 지역 이름임. 일단 오픈 웨더 맵을 들어가서 API 키를 얻어온다. https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and .. TIL 23.07.13 json-server glitch 로 vercel 배포 json-server 배포하기 기존 vercel 을 이용하여 배포를 시도하였다. 결과물은 db.json 의 데이터를 전혀받아오지 못함. json-server 를 써서 배포하면, 단순히 배포만 해야하는 것이 아니라 db.json을 담을 그릇(?) 을 만들어주어야 하는데 그게 바로 glitch 이다. 문제점을 해결하기 위해 glitch 에 들어가서 회원가입을 한 후에, 깃허브에서 db.json 을 위한 레포지토리를 하나 생성함. 이분껄 이용해서 레포지토리를 생성했다. https://github.com/kitloong/json-server-vercel GitHub - kitloong/json-server-vercel: Deploy JSON Server to Vercel Deploy JSON Server to .. TIL 23.07.12 firebase 구글/ 깃허브 로그인 파이어베이스 소셜로그인 프로젝트 생성 > Authentication > Sign-in method > 새 제공업체 추가 나는 구글과 깃허브를 추가했다. 구글은 그냥 하라는 대로 설정하면 되고 깃허브는 조금 복잡한데, 깃허브에 들어가서 Setting > Developer Settings > OAuth Apps > New OAuth App Authorization callback URL 값을 아래에있는 firebase 승인 콜백 URL 로 입력한다. 이후 클라이언트 ID, 비밀번호를 발급받아 클라이언트 ID, 비밀번호를 입력해주면 됨. 예시 ) 구글 로그인 (깃허브도 똑같음) firebase.js 에 다음과 같이 입력하고, import { getAuth, signInWithPopup, GoogleAuthPr.. TIL 23.07.11 text hover effect Text hover effect 기능 구현 전, 우선 다음 패키지를 설치한다. yarn add framer-motion 커서를 갖다대면 글자가 움직이는 효과로 그동안 너무 구현해보고 싶었던 기능중 하나였다. 일단 구현하고자하는 문장을 배열형태로 나타내준다. 총 3줄을 구현하기 위해서 다음과 같이 나누었다. const sentences = ["MAKE", "YOUR OWN", "COCKTAILS"]; sentences 각 하나의 알파벳들이 움직여야 하므로, split 으로 쪼갠 뒤에 맵을 돌려준다. 이므로 서로 양옆으로 붙어있게 됨. 여백을 유지하기 위해 letter 가 여백일 경우, \u00A0, 아닌경우 그냥 letter 로 나타나도록 함. {sentences.map((sentence, i) => ( .. TIL 23.07.10 모달창에서 Update 하기 문제점 모달의 수정창에서 수정하기를 누르면 계속해서 마지막 게시글만 수정되는 문제점이 있었음. 팀 과제할 때 이 문제가 너무 뚜렷하게 나타나서 고생했던 기억이 있었다. 원인은 모달창을 열게되면, 그 마지막 게시글의 post.id 를 가진 모달이 맨 위로 열리기때문에, 항상 같은 값만 수정되는 것이었다. 시도해본 것 console.log() 로 문제가 어디서 발생하는지 확인을 하였다. 모달의 수정창에 진입 => 제대로 된 post.id 값을 받아옴. 그러나 이후 등록버튼을 누르면, post.id 가 마지막 게시글의 id 로 바뀌어 버림. 해결방안 튜터님께 찾아가니, 문제가 어디서 생기는지 아니까 useState 를 이용해서 등록버튼을 누를때, 받아오는 post.id 값을 modalId 로 설정해보라고 하셨.. 이전 1 ··· 4 5 6 7 8 9 10 다음
