10. 클론코딩5 05 Post 저장은 파이어베이스로 5.1 Modal Post 작성하는 Modal을 만들어 보자. 모달의 상태를 저장하는 상태가 필요하다. 호출곳과 모달에서 상태의 값을 공유해야 되기 때문에 recoil 라이브러리를 사용한다. npm i recoil _app import { RecoilRoot } from "recoil"; function MyApp({ Component, pageProps: { session, ...pageProps } }) { return ( ) } atoms 디렉토리 생성 후 modalAtom.js 생성한다 import { atom } from "recoil"; export const modalState = atom({ key: 'modalState', default: false, }); Header.js 에서 mod.. 2022. 12. 22. 04 소셜로그인 인증하기 4-1 NextAuth 설치 인증 구현 라이브러리는 NextAuth 입니다. NextJS에서 아주 쉽게 로그인을 구현할 수 있게 도와주는 라이브러리입니다. npm install next-auth 설치가 완료 되었으면 package.json을 살펴보겠습니다. package.json { "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "@heroicons/react": "^1.0.6", "@tailwindcss/forms": "^0.5.3", "faker": "^6.6.6", "next": "latest", "next-auth": "^4.17.0", ".. 2022. 12. 22. 03 시작하기 03-1 화면구성은 Tailwind CSS 으로 인스타그램 클론코딩 시작에 앞서 Tailwind CSS에 대해서 간략하게 살펴보겠습니다. Tailwind CSS 공식 홈페이지에서는 다음과 같이 소개합니다. Rapidly build modern websites without ever leaving your HTML. 'HTML안에서 빠르게 빌드 하는 모던 웹사이트'라는 문구인데요. 말 그대로 오직 HTML 문서 내에서 웹 사이트 구축이 가능하게 만드는 것이 Tailwind의 목표라고 할 수 있습니다. 이것을 실현하기 위한 기법이 utility-first입니다. 미리 구현된 CSS를 사용하는 클래스에 추가하면서 사용할 수 있습니다. 2022년 카카오 엔터테인먼트를 비롯한 여러 기업들이 Tailwind를 도입.. 2022. 12. 21. 02 환경설정 인스타클론 개발을 위해 필요한 도구를 설치합니다. 환경 설정은 매우 중요한 과정입니다. 이 과정에서 오류가 나거나 문제가 생기면 나중에 실습하다 잘 되지 않아서 고생 할 수도 있어요. 그럼 빠르게 진행해 보겠습니다. 액션01> node.js 설치 Node.js 공식홈페이지에서 nodejs.org/ko/ 안정적인 LTS버전을 다운 받습니다. (LTS는 Long Term Support의 약자로 안정적이고 신뢰도가 높은 버전이고, Current는 최신버전 입니다. ) 설치 과정은 간단하므로 생략하겠습니다. 설치 후 버전을 확인해 보세요. cmd> node -v 버전정보가 나오면 정상입니다. 또 node.js를 설치하면 npm이라는 도구도 함께 설치됩니다. (npm이란 node package manager의 줄.. 2022. 12. 21. 01 Instagram 클론코딩 소개하기 요즘 코딩 공부하시는 분 많으시죠? 혼자서 독학하거나 학원에서 어느 정도 기초 지식을 습득한 다음에 뭔가를 만들어 보려고 하면 어디서 부터 시작해야 되는지 망막해집니다. 아직은 코딩이 손에 익지 않아서 입니다. 좀 더 많은 소스를 접해 보고 조금씩 더 성장이 필요한 시기에는 필자는 클론코딩을 추천합니다. 클론코딩은 앱 또는 서비스를 한스텝씩 따라 배우는 효과적인 개발 학습 방법입니다. 이책에서는 일상에서 자주 사용하는 인스타그램을 차근 차근 따라 하는 클론코딩을 준비하였습니다. 인스타그램은 필자가 좋아하는 앱입니다. 카페에서 자주 코딩을 하는데 작업도 잘되고 분위기도 좋은 카페 정보를 인스타그램에 올렸더니 좋아요와 팔로워수가 많이 늘어서 행복한 나날을 보낸 적이 있습니다. 자랑은 그만하고 우리가 구현해야.. 2022. 12. 21. 이전 1 다음
