🌳Frontend/react

2023.10.14 - [🌳Frontend/react] - Next.js 와 파이어베이스(Firebase) 연동하기 Next.js 와 파이어베이스(Firebase) 연동하기 서버를 직접 만들 필요가 없이 데이터베이스, 인증, 스토리지, 함수 및 호스팅과 같은 서비스를 제공하는 파이어베이스를 사용해보자. 파이어베이스는 백엔드 서버를 구현할 필요 없이 간단하 yzlosmik.tistory.com Next.js app과 파이어베이스 연동은 이전글을 참고해주세요. 🔥 파이어베이스 콘솔에서 Authentication 셋팅 추가 제공업체에 Goggle 을 클릭해주자. 프로젝트 지원 이메일은 본인 이메일로 셋팅하면 됩니다. 😎 소스코드 firestore은 이전글에서 셋팅한 firestore 설정파일 입니다. fire..

서버를 직접 만들 필요가 없이 데이터베이스, 인증, 스토리지, 함수 및 호스팅과 같은 서비스를 제공하는 파이어베이스를 사용해보자. 파이어베이스는 백엔드 서버를 구현할 필요 없이 간단하게 서버를 구성하고 싶을 때 이용하기 좋다. 🔥 파이어베이스 시작하기 1.1 파이어베이스 프로젝트 시작하기 파이어베이스 콘솔 로 들어가 프로젝트를 만들어줍시다. 1.2 앱 만들기 앱을 만들면 파이어베이스 SDK 가 나오는데 그 값을 저장해둡시다. 🌩 Next.js 프로젝트에 파이어베이스 세팅 1. firebasedb.ts 파일 생성 파일 키들은 노출되면 안되므로, 환경변수로 보호해줍니다. Next.js 에서의 환경변수는 프로젝트 root에 .env.local 이름으로 파일을 생성하고, NEXT_PUBLIC_키이름 = valu..

💄 CSS in JS CSS in JS 는 컴포넌트 스타일링 방식 중 하나 이다. (번외로, CSS in CSS 도 있다.) 쉽게 설명하자면, 자바스크립트 코드에서 CSS 를 작성하는 방식이다. `.css` 파일을 별도로 생성해 스타일을 주는 방법이 아니라, jsx, tsx 코드 내에서 스타일링이 가능하다. CSS in JS의 대표적인 라이브러리는 styled-component인데, CSS 스타일링을 .css 파일 레벨에서 작성하는 것이 아니라, 컴포넌트 레벨에서 작성이 가능하다 ! 🤔 그런데 말이죠. styled-component 는 치명적인 단점이 있다. 바로 SSR,SSG 환경과, 서버컴포넌트에서는 스타일링이 어렵다는 점이다. SSR을 지원하는 Next.js 의 공식문서에서는 이러한 경고문구가 있다..

Next.js에서 페이지 이동은 useRouter 를 이용하거나, next/link의 Link 컴포넌트를 이용한다. 이 두가지 방식의 차이점은 무엇일까? const router = useRouter() const onClick = () => { router.push('...') // router.push } return ( {/* Link 이용 */} ) next/link 의 Link는 내부적으로 `` 태그를 생성한다. 따라서 useRouter push와 같은 동작을 하지만 더 직관적인 동작을 나타낼 수 있다. 여기서 말하는 직관적인 동작은 무엇일까? 위의 내 프로필을 클릭하면 나의 프로필 페이지로 이동은 하지만, 우 클릭시 이동과 관련된 액션을 찾아볼 수 없다. 하지만, 클릭하면 index페이지로 이동..