반응형

_ 43

React Query와 Axios로 서버통신 쉽게하기 🌐

서버통신한다고 fetch() 쓰고... .json() 파싱하고... 에러핸들링하고... useEffect로 성공 실패 분기처리하고...? 서버통신만 회피해오던 프론트엔드 개발자가 세상 편하게 서버연결하는 이야기 (feat. Axios, ReactQuery)💜 Axios간단하게 요약하자면,서버통신 시 요청이나 응답데이터를 간편하게 변형해주는 라이브러리이다.fetch(~~~~)나 .json() 이나 .then().response() 이런거 안해도 된다! 1️⃣ 기본 형태둘 다 response를 반환한다(config, data, headers, request, status, statusText 등이 포함된 객체)response.data 를 통해 데이터에 접근 가능 getaxios.get(`https://ex..

_/Velog 2024.05.17

[Github] 깃허브 Organization에서 Repository 핀이 안 될 때 해결방법

Github Organization에 특정 레포지토리를 고정하지 않으면 이렇게 기본 화면이 뜨고 Popular Repositories가 대신 뜬다 아무것도 핀하지 않은 초기 상태에서는 Customize Repository 버튼도 안보인다 맨처음에 Repo를 핀하려면 오른쪽에서 파랑색으로 된 pin repositories를 누르면 되는데,, 분명 레포를 다 선택했음에도 Save Pins버튼이 활성화 되지 않아 눌리지 않는다 레포 핀이 안된다 (??) 상당히 황당하지만 깃허브상의 오류라고한다 https://github.com/orgs/community/discussions/84168 [Edit pinned items] save pins button always disabled · community · Dis..

_/Velog 2024.04.09

[SK Devocean] 데보션영 3기 합격 후기 🌊

SK에서 운영하는 테크블로그 '데보션'의 대학생 테크 인플루언서 활동 '데보션 영' 3기 합격 후기와 지원 과정 https://devocean.sk.com/ SKT에서 운영하는 테크블로그 데보션을 다들 들어봤을 것이다. 이 데보션에서 대학생 테크 인플루언서(라고 쓰고 서포터즈라고 읽는다) 3기를 올해 초에 모집하였고, 2차에 걸친 지원 과정 끝에 합격을 할 수 있었다! 대학생 중에서도 공대생, 그것도 개발자가 할 수 있는 대외활동이 정말 가뭄에 콩나듯 있는데 그 중에서도 검증된 대기업의 지원을 받는 데보션이 운영한다? 당! 장! 지원해야했다 모집공고 공고 내용을 요약하면 다음과 같다 필수 조건 : 대학생 모집 대상 : 코딩 가능, 블로그 쓰기, 정보 전달, 네트워킹 모집 과정 : 약 한달 동안 진행되며 ..

_/Velog 2024.03.06

next-auth로 카카오 소셜 로그인 5분만에 구현하기 👻

Next-Auth 를 이용하면 소셜로그인을 5분만에 구현할 수 있다고 ? 구글, 깃허브, 애플, 트위터는 물론 카카오와 네이버 소셜로그인까지 지원하는 Next Auth를 쉽게 사용해보자. +) 세션에 저장되기 때문에 기기에서 자동로그인까지 일타이피 ! 💬 Kakao Developers 세팅 Kakao Developers 에서 앱을 등록하자 카카오 로그인 기능을 사용하기 위해 동의항목을 설정해준 뒤, 본격적으로 next-auth 를 사용하기 위해 세팅을 한다 1. REST API 키 내 애플리케이션 > 앱 설정 > 요약정보 REST API 키를 복붙해서 저장한다 // .env KAKAO_CLIENT_ID=복붙 깃허브등에 API키들이 노출되지 않도록 .env 파일에 저장해서 .gitignore 에 추가하는걸..

_/Velog 2023.12.23

[React] Router 오류 (6.x.x 버전에서 바뀐 사용법)

npm install react-router-dom 평화로운 유튜브 클론코딩... 평소처럼 라우터를 이용해서 페이지를 구성하기로 마음먹고 라우팅을 했는데.. Error: A is only ever to be used as the child of element 당황스러운 오류가 떴다. Route 를 Routes 로 감싸라고 한다.. 찾아보니 Router가 버전6으로 업데이트 되면서 사용법이 바뀐모양 그래서 에러가 친절하게 설명하는대로 태그를 감싸줬다. (물론 임포트도 새로 했다) import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; //... function App() { return ( ); } 근데.. Error: useR..

_/Velog 2023.12.23

[React] useState 이용하여 JS로 :hover 구현하기

호버링이란.. 말그대로 마우스를 특정 요소 위에 올렸을 때 해당 요소가 바뀌게 해주는 그런 기능? 이다 const Barogagi = styled.div` &:hover { background-color: rgb(0, 0, 0, 0.5); color: rgb(255, 255, 255, 100); } `; 이런식으로 styled-component나 css를 이용하여 호버링 기능을 쉽게 구현할 수 있지만 이제.. 이걸로는 외부의 컴포넌트를 호버할때마다 전혀 다른 컴포넌트에게 영향을 끼치게 만드는게 안되어서 속상했다 useState 를 이용한 hover 기능 구현 그러다가 알게된 onMouseOver 과 onMouseOut.. 그리하여 리액트의 useState()를 이용하여 메인함수 내부에 호버링을 구현했다!..

_/Velog 2023.12.23

[AndroidStudio] One or more issues found when checking AAR metadata values 에러

One or more issues found when checking AAR metadata values: The minCompileSdk (31) specified in a dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties) is greater than this module's compileSdkVersion (android-30). Dependency: androidx.core:core-ktx:1.7.0. AAR metadata file: /Users/guest1/.gradle/caches/transforms-3/e7b644434c99ab8595e56305529915ef/transformed/jeti..

_/Velog 2023.12.23

[iOS] 화면전환의 종류 (push vs present)

push vs present present push 전개방향 세로 가로 돌아가기 dismiss pop 메소드 UIViewController UINavigationController 🌪 UIViewController 1. present : 이동 modally : 뷰 위에 뷰가 한겹 올라간 구조 세로방향으로 전개 ex. alert 알람, 새로운 이메일 작성하기 등 @IBAction func 함수명(_ sender: Any) { guard let 이동할뷰컨 = self.storyboard?.instantiateViewController(withIdentifier: "뷰컨아이디") else {return} self.present(이동할뷰컨, animated: true, completion: nil) } pres..

_/Velog 2023.12.22

[Go] package main 오류

Go 언어 스터디.. 아직 제대로 한것도 없는데 요상한 오류가 자꾸 날 괴롭혔다 당연히 써야하는 첫 줄 package main 에 빨간 밑줄....ㅠㅠ gopls requires a module at the root of your workspace. You can work with multiple modules by opening each one as a workspace folder. Improvements to this workflow will be coming soon, and you can learn more here: https://github.com/golang/tools/blob/master/gopls/doc/workspace.md. 구글링을 하는데... 아니 사용순위 4위라는데 검색량 체감..

_/Velog 2023.12.22

💛 [ Firebase ] v9부터 크게 달라진 사용법들 모아보기

Firebase를 React 프로젝트에서 사용하려는데 생기는 무시무시한 오류들... " 나 맞게 했는데??? " -> 버전 9부터 사용법이 아예 바뀌었습니다 ^^ 오류 해결을 찾아 공식문서를 항해하며 알게된 새로운 사용법들을 정리했습니다. 다른분들은 고생하지 마세요 공식문서 의 소중함을 느끼게 된 이야기.. START 1. Firebase 인증 모듈 사용 import firebase from "firebase/app"; import "firebase/auth"; const firebaseConfig = { ... }; firebase.initializeApp(firebaseConfig); export const authService = fierbase.auth(); 분명 똑같이 쳤는데 발생하는 오류.. ..

_/Velog 2023.12.22
반응형