프로그래밍 잡동사니

Firebase Firebase를 활용해 React 환경에서 Realtime CRUD와 Authentication System을 구현해보자! Firebase의 다음 4가지 기능을 활용할 것이다 Cloud Firestore / Cloud Storage / Authentication / Hosting * Google의 Firebase나 AWS의 Amplify 등 Backend as a Service는 어디까지나 플랫폼의 서버를 빌려서 쓰는 것이기 때문에, 간단한 토이 프로젝트나 실제 서비스의 데모 버전에만 적합하다 Firebase Pricing🔽 Firebase Pricing 무료로 Firebase를 시작하고 전 세계 수백만 명의 사용자로 확장하세요. 무료 할당량 소진 후 사용한 만큼만 비용을 지불하면 됩니..

Firebase 쓰는 이유 Firebase는 서버를 대신 만들어주는 서비스로 개발 시간을 대폭 단축시킨다 정형화된 작업을 생략해 서버 코드 없이 풀스택 개발이 가능하다! 장점 프론트엔드 지식만 있어도 바로 서비스 제작 가능 (AWS에 비해서) DB콘솔을 다루기 용이하다 프로젝트 규모에 따른 서버/DB 스케일업이 자동 DB데이터가 기본적으로 리얼타임 싱크 (실시간 동기화) 단점 일정 사용량을 넘을 경우, 대충 AWS보다 20% 비쌈 Setting 1. Firebase Console에 구글 아이디로 로그인하고 프로젝트를 생성해준다 Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 2. 좌..

학교 현장실습(인턴십)을 마무리하며 두 달 간의 경험을 KPT 방법론으로 정리해보자 Keep: 만족했고, 앞으로 지속하고 싶은 부분 Problem: 개선이 필요하거나 아쉬웠던 점 Try: Problem에 대한 해결로 시도해볼 점 다양한 회고 방법론🔽 [주간 인프런 #41] 개발자의 공유 문화 이모저모 (2) 회고 문화 - 인프런 | 스토리 기록도 점검도 셀프! 개발자는 왜 회고를 할까요? #오픈소스 #기술블로그 #회고문화 바쁘게 일하고 공부하다 보면 시간이 훌쩍 지나있기 마련이죠. 그렇지만 모든 일을 다 기억할 수는 없는 www.inflearn.com Keep 현업에서의 협업 방식을 체험했다 코드 통일성을 높여주는 익스텐션이나 커밋 컨벤션, 노션을 통한 업무 공유 등 프로젝트 관리에 있어 새롭게 배워가는..

Catch All catch-all url을 사용한다면 url로 데이터를 전달할 때 생겼던 문제들을 해결할 수 있다 [id].js의 파일 명을 [...params].js로 변경해준다 [pages/movies/index.js] onClick={() => router.push( `/movies/${movie.original_title}/${movie.poster_path}/${movie.id}` ) } 'movies/제목/포스터/아이디' 이런 식으로 다 url로 보내고 router를 콘솔로 찍어보면.. [pages/movies/[params].js] import Seo from "../../components/Seo"; import { useRouter } from "next/router"; export d..

Dynamic Routes '/movies/all' 이라는 url을 만들고 싶다면? 그냥 '/movies' 라는 url을 만들고 싶다면? * pages 폴더에 movies.js 파일을 생성해도 되지만 하위 url이 있을 경우 이게 더 깔끔 '/movies/123' 이런 식으로 url에 변수를 넣고 싶다면? [pages/movies/[id].js] import { useRouter } from "next/router"; export default function Detail() { const router = useRouter(); console.log(router); return detail; } 이렇게 작성하고 콘솔에 찍힌 router를 살펴보면.. router의 query가 변수명: "url에 입력한 ..

Redirect & Rewrite API가 유료거나 사용량에 제한이 있는 경우, API Key를 숨겨야 될 수 있다 next.config.js 파일에서는 유저가 특정 url로 들어갈 때, 원하는 곳으로 redirect 시킬 수 있다 [next.config.js] module.exports = { reactStrictMode: true, async redirects() { return [ { source: "/contact", destination: "https://github.com/joseph-106", permanent: false, }, ]; }, }; 유저가 '/contact'로 접속할 때, 내 깃허브로 redirect시키도록 추가했다 { source: "/old/:path", destinatio..

Maker Jun : 난이도를 잘 조절할 수 있고, 스트레스를 관리할 수 있고, 에너지를 관리할 수 있고, 변화할 수 있는 방법 ! TDD(Test Driven Development) = 테스트 주도 개발 ex) 내가 던진 농구공이 들어갔는지 1달 뒤에 알 수 있다면? 학습 방향, 포트폴리오, 이력서 등등 더 빨리, 더 자주 피드백을 받을 수록 발전한다! 테스트 코드를 먼저 만들고, 실제 코드를 작성하고, 원하는 대로 동작하는지 빠르게 피드백 받기 ex) 계산기를 구현한다면? UI 없이 사칙연산 먼저 구현하기 input으로 사용자 입력 받고 이벤트 처리하기 숫자 UI 추가하고 이벤트 처리하기 UI 레이아웃 잡기 스타일 입히기 핵심을 포함하도록 작업을 쪼개고 빠르게 피드백 받기 Cypress로 작성하는 J..

Patterns Next.js 프로젝트에서 흔히 사용되는 개발 패턴들이 있는데, 먼저 _app.js 컴포넌트에 사용하는 Layout 패턴을 알아보자! [components/Layout.js] import NavBar from "./NavBar"; export default function Layout({ children }) { return ( {children} ); } Layout.js 파일을 생성해 기존 App.js 처럼 항상 활성화시킬 컴포넌트를 넣어준다 * children을 사용해 props로 컴포넌트를 전달할 수 있다 [pages/_app.js] import Layout from "../components/Layout"; import "../styles/globals.css"; export d..

NVM을 활용해 윈도우 환경에서 Node.js 버전을 쉽고 빠르게 변경하는 방법을 정리해보자! (터미널에서 알 수 없는 에러는 대부분 Node.js 버전 문제였다..) 다음 링크에서 nvm-setup을 설치해주자🔽 Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 설치가 되었다면 CMD(명령 프롬프트)를 관리자 권한으로 실행해주자 다음 명령어를 입력하면 추가 가능한 노드 버전이 나열된다 nvm list available 다음 명령어를 입력해 노드 버전을 추가해주자 nvm install (노드 ..

Gatsby 템플릿을 활용해 빠르게 React 기반 정적 웹사이트를 만들고 배포해보자! * 템플릿에 따라 설치 및 실행 방식이 조금씩 다를 수 있다 마음에 드는 무료 Gatsby 템플릿의 GitHub 저장소를 찾아준다🔽 EASEOUT Coding tutorials about CSS, HTML, JavaScript, and articles about design creativity & modern web development technology. www.easeout.co 다음 명령어들을 차례대로 입력해 디렉토리를 생성하고, GitHub에 연동해준다 npm install -g gatsby-cli gatsby new (디렉토리 이름) (템플릿 GitHub 저장소 주소) # gatsby new my-app h..