Project.log

노마드코더 니꼴라스와 만드는 트위터 서비스를 만들면서 오류를 발견했습니다. 바로 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 입니다. import { useState } from "react"; import { HashRouter as Router, Route, Switch } from "react-router-dom"; import Auth from "../routes/Auth"; import Home from "../routes/Home"; const AppRouter = () => { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( {isLogged..

노마드코더 니꼴라스와 만드는 트위터 서비스를 만들면서 오류를 발견했습니다. 바로 firebase.js파일에서 다음과 같은 오류가 생깁니다. import firebase from "firebase/app"; const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID, appId: proce..

Git Git은 분산형 버전 관리 시스템입니다. 버전 관리 시스템은 코드 및 파일의 변경사항을 추적하고, 여러 사람이 협업하여 작업할 때 버전 충돌을 방지하고 이전 버전으로 쉽게 복원할 수 있도록 도와줍니다. Step 1. 로컬에서 Git으로 관리할 저장소(폴더, 파일) 생성 Step 2. 내가 작업하고 있는 Working Directory에서 $git init .git(숨김폴더)확인 (ls -al 명령어로 확인) 깃을 초기화 하는 곳이 내 프로젝트가 위치한 곳인지 확인 Step 3. .gitignore 파일추가 데이터베이스계정이나 클라우드 시크릿 키 혹은 각종 민감정보가 git저장소에 업로드 되지 않게 해야한다. .gitignore .gitignore 파일과 같은 위치에 있는 hello.txt는 git..

Kakao에서 지원하는 지도API를 이용하여 지도를 생성해보겠습니다. 1. 카카오 개발자(developers)사이트에 방문합니다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 상단에 내 애플리케이션을 클릭합니다. 클릭 한 뒤에 로그인 창이 나오면 로그인 해줍니다. 3. 애플리케이션 추가하기 버튼을 눌러 줍니다. 4. 애플리케이션 추가하기 앱아이콘, 앱 이름, 사업자명을 넣고 하단 체크박스를 체크해 준 뒤에 저장버튼을 누릅니다. (앱 아이콘은 안넣어도 무방합니다) 성공적으로 만들어 지면..

Next.js 12를 공부하고 프로젝트를 진행하는 중에 2022년 10월26일 Next.js Conf에서 Next.js 13을 발표했습니다. 이제 막 알아가던 중인데 벌써 13이 나오니 당황스럽네요.. 바로 본론으로 가보겠습니다. (위 글은 nextjs.org 공식문서를 번역한 글입니다.) Next.js Conf에서 발표한 바와 같이 Next.js 13은 제한 없이 역동적인 기반을 제공합니다. - app/ 디렉토리(베타): 더 쉽고, 더 빠르고, 더 적은 클라이언트 JS. - 레이아웃 - 리액트 서버 컴포넌트 - 스트리밍 - 터보팩(알파): 최대 700배 빠른 Rust 기반 웹 팩 교체 - 신규 next/image (안정적): 네이티브 브라우저의 느린 로딩으로 고속화. - 신규 @next/font (베타..

pip이란? pip은 pip Installs Packages의 약자로 파이썬(python)으로 작성된 패키지 소프트웨어를 설치&관리하는 패키지 관리 시스템이다. 쉽게 패키지 매니저라고 생각하면 된다. node에 있는 npm이나 yarn 같은 패키지 매니저이다. pip과 pip3 차이 pip은 파이썬2버전의 패키지 매니저이고 pip3는 파이썬3버전의 패키지 매니저이다. (파이썬 2.7.9버전 이후 및 파이썬 3버전 은 pip3를 사용한다) 맥북에서 pip사용법 맥북에서 파이썬을 다운로드 받을 때 주로 Homebrew나 공식파이썬홈페이지 등에서 다운받게 되는데 현재 다운받게 되면 버전을 지정해서 다운로드 받지않는한 3버전이 다운로드 되게 된다. 그래서 pip이 아닌 pip3을 사용해야 한다. 예로 matpl..

Tailwind CSS란? Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크이다. Bootstrap프레임워크와 비슷하게 생겼으며 HTML 코드 내에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크 입니다. 1. Next.js 프레임워크 환경만들기 npx create-next-app wind Next.js 프레임워크를 사용해서 이안에 적용해보겠습니다. 위코드를 입력해서 wind라는 프로젝트를 생성해서 해보겠습니다. 위 프로젝트명(wind)는 예시이므로 원하는 이름으로 만드시면 되겠습니다. 2. 시작하기 npm install -D tailwindcss postcss autoprefixer Tailwindcss와 크로스브라우징을 대응 해주는 postcss autopre..

Vercel이란? Vercel은 Next.js 에서 공식적으로 제공하는 호스팅 사이트로 빌드+배포+호스팅 서비스를 이용할 수 있습니다. 1. package.json에 deploy추가하기 "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } 배포를 위해 프로젝트의 package.json파일에 scripts부분을 위와 같이 만들어줍니다. (보통은 기본세팅으로 되어있는것 같습니다.) 2. Github에 소스코드 등록하기 먼저 빈 Repository를 만들어줍니다. 프로젝트 폴더로 이동후에 (git init, git add, git commit이 다 되있다는 전제하에) git remote add origin 깃허브reposi..