🌳Frontend

실전으로 비동기 코드를 작성할 수는 있지만, 누군가 내게 Promise가 뭔지 ,async/await는 뭔지 물어본다면 "어..그...비동기로 호출할때 쓰이는....." 나도 모르게 설명하다가 막혀버린다 😅 누군가에게 당당하게 설명을 해주기 위해, 자바스크립트에서의 비동기에 대해 정리해보고자 한다. 예제코드와 더 자세한 설명은 아래에서 참고해주세요. 토스페이먼츠의 Promise 실전에서 사용해보기 Promise 실전에서 사용해보기 오늘은 Promise가 무엇이고 어떻게 사용해야 되는지 토스페이먼츠 결제위젯 예제로 알아볼게요. Promise는 비동기 함수가 반환하는 객체에요. 함수의 성공 또는 실패 상태를 알려줘요. 콜백을 직접 blog.tossbusiness.com 토스페이먼츠의 예제로 이해하는 asyn..

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 의 공식문서에서는 이러한 경고문구가 있다..