본문 바로가기

Frontend

 (281)
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..
[코딩기초트레이닝] 머쓱이 스탬프 획득 머쓱이 언제 볼까 했는데 스터디 하면서 미루고 미루다가 결국 ... 이제 레벨 1과 레벨2 남은문제들도 계속 풀어야겠다🔥
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 로 설정해보라고 하셨..
[팀프로젝트] hobbyist 취미 공유 웹사이트 https://hobbyist-ruddy.vercel.app/

티스토리툴바