Fairytales of DevInsights 🧚🏻&zwj;♀️

2024.04.02· Coding Diary

https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 회원가입 기능 구현 중, 주소를 직접 입력하지 않고 검색 서비스를 넣기 위해 이것저것 찾아보던중, 도로명 주소 api는 조금 복잡..하다 생각하던 중 다음주소 검색 api를 알게됨! 이건 진짜 편했따... 일단 다음에서 제공하는 api를 이용하기 위해 설치부터 해보자 npm install react-daum-postcode 이것만 하면 이제 진짜 끝났음!!! 나는 회원가입 페이지에서 공통으로 쓰는 버튼을 이..

[css] tailwind로 구글 폰트 적용하기

2024.04.02· 코딩 메모

https://fonts.google.com/?subset=korean&noto.script=Kore Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글폰트 귀여운 거 사용하려고 찾아봄 원하는 폰트 get 버튼 누르고 global.css (혹은 전역 css) 에 @import 를 추가한다 @import url("https://fonts.googleapis.com/css2?family=Jura:wght@300..700&display=swap"); tailwind.config.ts import type { Config } from "tailwindc..

[css] tailwind로 input focus색상 변경하기

2024.04.02· 코딩 메모

기본 테두리는 검정색이고, 주변색상이랑 맞춰서 보이게 하고 싶은데 어떻게 해야될지 찾아본 김에 메모 focus:ring-2 focus:ring-inset focus:ring-#여기에색상 focus:outline-none 이거 추가해주면 됨 focus 시에 ring 추가하고, 안 쪽으로 추가하고 그렇게 까지만 하면 outline 검정색이 그대로 보이기 때문에 none 처리

[git] 다른 브랜치에서 작업한거 main에 merge

2024.03.13· 코딩 메모

평소에는 다른 브랜치에서 작업후 git lab에 직접들어가서 create merge~어쩌고 뜨면 그거 눌러서 merge작업했었는데, (git merge 명령어가 조금 복잡시렵게 느껴지고, 혹시라도 merge하다 충돌날까봐 ㅠㅠ)_ 하지만 충돌나며 배우는 git..... (이라쓰고 맨날 따로 백업해놓음ㅋ) 명령어로 해보는 습관을 들이기로 함 dev라는 브랜치에서 작업후 main에 머지를 하려면, 1. 일단 main브랜치로 이동한다. git checkout main 2. dev에 올라와있는 소스를 merge 한다. git merge dev 3. 이제 변경 사항을 원격저장소로 push한다. git push origin main 만일 push 하다가 error: failed to push some refs to..

Floating Labels Chakra UI로 적용하기 (feat. Next 14)

2024.03.11· Coding Diary

https://chakra-ui.com/community/recipes/floating-labels Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System chakra-ui.com 이 디자인을 로그인화면에 input으로 넣고 싶었다. 그래서 하나의 컴포넌트로 만들어서, 계속 재사용할 수 있도록 만들어보았다. provider.tsx "use client"; i..

Next 14 | Chakra UI를 next에서 사용하기

2024.03.11· TIL/Next.js

Next 13이상 버전에서 차크라 ui 쓰는 법 정리 npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion app/providers.tsx 'use client' import { ChakraProvider } from '@chakra-ui/react' export function Providers({ children }: { children: React.ReactNode }) { return {children} } client에서 provider를 생성해준다. app/layout.tsx import { Providers } from './providers' export default function Ro..

[git] main에서 작업한 부분 다른 브랜치에 병합

2024.03.11· 코딩 메모

dev에서 작업을하고 main에 병합하는 과정을 거쳐야하는데, 체크를 안하고 자꾸 main에서 수정작업을 한다 ㅠ^^ 그래서 그동안은 그냥 똑같이 dev에서도 작업하고 커밋해줬는데, 이번엔 내역이 좀 많아서,, 일단 기록해놓으려고 함 겁내지말고 그냥 git checkout dev git merge main 해주면 main에 있는 소스를 가지고 오고, 변경사항이 뜬다. (여기서 충돌이 있으면 충돌 수정까지 해줌) 이제 이 수정내역이 쌓여서 git status를 해주면 commit내역이 있다고 나옴 이제 편한걸로 push 해주면 됨! 저 버튼 누르면 되지만 나는 요즘엔 명령어로만 git쓰는 거 습관들이려고 git push origin dev 해주었다

[TIL] axios instance

2024.03.06· TIL/etc.

axios를 사용할 때, 종종 Axios 인스턴스를 만들어 특정 설정을 지정하거나 기본 설정을 변경하는 경우가 있다. 이렇게 생성된 Axios 인스턴스는 프로젝트 내에서 여러 요청에서 동일한 설정을 공유할 수 있어 편리하다 예를 들어, instance.ts import axios, { AxiosInstance } from 'axios'; // Axios 인스턴스 생성 const myAxiosInstance: AxiosInstance = axios.create({ baseURL: 'https://api.example.com', timeout: 5000, // 요청 타임아웃 설정 headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ..

Next.js | 네이버 로그인 구현하기 (네아로~)

2024.03.06· TIL/Next.js

구글과 마찬가지로 같은 사이트 sns 로그인을 구현할 것이기 때문에 일단 흐름도는 카카오 구현과 같다.계정이 존재하지 않으면 사용자 정보가 없다는 메시지를 띄워 관리자가 따로 등록해야만 하는 흐름이다. (https://moon-lilac.tistory.com/183) Next.js | 카카오 로그인 구현하기기존의 페이지에 소셜로그인 기능을 추가하려고 한다.그래서 이미 있는 사용자와 새로 로그인할 사용자와의 매칭기능이 필요했다.그리고 회원가입이 필요한 사이트가 아니라, 관리자가 사용자moon-lilac.tistory.com + 추가사항 🎡기존에서 추가된게 있다면 사용자 정보(이름, 전화번호)를 입력하는 페이지를 띄우기 전에인가코드와 sns 코드만 보내는 api를 따로 태워 기존에 로그인했던 전적(snsi..

Next.js | 구글 로그인 구현하기

2024.03.05· TIL/Next.js

기능 및 플로우는 아래와 같다. 같은 페이지에 추가로 구현하는 것이기 때문! https://moon-lilac.tistory.com/183 Next.js | 카카오 로그인 구현하기 기존의 페이지에 소셜로그인 기능을 추가하려고 한다.그래서 이미 있는 사용자와 새로 로그인할 사용자와의 매칭기능이 필요했다.그리고 회원가입이 필요한 사이트가 아니라, 관리자가 사용자 moon-lilac.tistory.com 1. 구글 클라우드에서 프로젝트 생성 만들기 후 API 및 서비스에서 OAuth 동의 화면 눌러주고, 내부말고 외부 선택한다. 그리고 다음으로 넘어가 필수값인 앱 이름, 사용자 지원 이메일, 개발자 연락처 정보를 입력하고 다음으로 넘어간다. 계속 저장후 계속 눌르다가 요약화면 나오면 대시보드로 돌아가기를 눌러..

[Next] SNS별로 동적라우팅(Dynamic Routes) 지정하기

2024.03.05· Coding Diary

같은 화면구성에 같은 API쓸 예정이어서 페이지를 따로 만들 필요가 없어서 모든 SNS 로그인을 Oauth.tsx파일로 하기로 했다. 그러다보니 sns별로 코드를 서버단으로 보내줘야되는데, 이때 라우트를 이용해서 담아서 보내줌 근데 Redirect URI를 변경해야하니 조금 달라서 겸사겸사 기록해놓는다 [] 대괄호를 사용해서 폴더를 만들고 그 안에 oauth.ts 파일을 만듦 (next13이후 부터는 oauth폴더에 page.tsx파일로) oauth.ts파일은 컴포넌트 페이지로 바로 이동된다. 기존의 NEXT_PUBLIC_OAUTH_REDIRECT는 http://localhost:3000/login/oauth인데, 뒤에oauth를 빼주고 redirect URI를 재설정해줬다 WebLogin.tsx con..

Next.js | 카카오 로그인 구현하기

2024.02.27· TIL/Next.js

기존의 페이지에 소셜로그인 기능을 추가하려고 한다.그래서 이미 있는 사용자와 새로 로그인할 사용자와의 매칭기능이 필요했다.그리고 회원가입이 필요한 사이트가 아니라, 관리자가 사용자정보를 등록하는 형식이라 만일 정보가 없으면 튕겨나와서 관리자 문의를 따로 해야한다. 그러니 로그인기능만 있으면 됨! 🛝흐름도 그림에서도 보다시피 사실 프론트에선 크게 할일은 없다..일단 kakao 로그인을 이용하기 위해 세팅부터! 1. Kakao Developers 에서 애플리케이션 생성kakao developers 에서 카카오 로그인하고 애플리케이션을 생성한다.그러면 아래처럼 api key값을 얻을 수 있는데 여기서 javascript 키값을 사용할 것임 그리고 플랫폼 > Web 플랫폼 등록을 해서 사이트 도메인을..

전체 글

티스토리툴바