이롭게 현명하게

목차들어가며어머나운동이란?후기 [들어가며]봉사활동은 해봤지만 언젠가 한 번쯤은 '기부'라는 것을 해보고 싶은 버킷 리스트 중 하나였다.막상 '기부'라고 하면 후원금이나 물품 같은 금전적인 것들을 생각하게 되어 부담감이 있어 계속 미루고 있었다.그러던 중 주변에서 암 진단을 받고 항암치료를 받고 있다는 소식을 듣게 되면서 "내가 도움이 될 방법은 없을까?"를 고민하다가 알게 된 것이 "모발 기부"였다. 머리카락을 기부하기까지머리를 기르기 시작하면서 궁금증이 생겼다."요즘은 기술이 많이 발전했는데 굳이 사람의 머리카락으로 가발을 만들어야 하는 이유가 있을까?"찾아보니 인조 모발로 가발을 만들면 여러 화학 물질이 사용되는데 이 물질이 환자에게 자극을 줄 수 있다고 한다.그래서 사람의 머리카락으로 만든 가발이..

목차 들어가며AWS Amplify 배포 과정 [들어가며]멘토링을 진행하면서 배포에 대한 고민을 하게 되었다.처음에는 기능 구현에 집중했지만 서비스를 운영하는 관점에서 바라보게 되었다.이전에 진행했던 프로젝트에서는 Vercel을 사용해 배포를 해본 경험이 있다.Vercel은 설정이 간단하고 Git과 연동하여 자동으로 배포할 수 있다는 장점을 가지고 있어 편리했다. [Next.js] Next.js를 Vercel에 배포하기목차 Vercel이란?Next.js 프로젝트 Vercel에 배포하기환경변수 설정커밋부터 배포까지 : 자동 빌드 확인하기 [Vercel이란?]Next.js는 이미 많은 프론트엔드 개발자들이 선택하는 대표적인 React 프레임워크devyihyun.tistory.com 결과물을 빠르게 확인하..

목차 개발 환경 준비Next.js 프로젝트 생성하기Next.js 실행 Next.js에 대한 개념 설명은 다음 게시글에 작성해 두겠습니다. [개발 환경 준비]Next.js16 버전을 사용하려면 Node.js가 필요하다.최소 Node.js 버전 : 20.9운영체제 : macOS, Windows(WSL포함), Linux https://devyihyun.tistory.com/168 [React] 리액트 시작하기 / 리액트 설치 / 개발환경목차 작업환경 준비하기Node.js 설치하기yarn 설치하기vscode 설치하기git for windows 설치하기리액트 환경설정 리액트 환경을 설치하는 CRA가 2025년 2월 14일에 종료되었습니다.npx create-react-app 대신 vitedevyihyun.tis..

목차 Vercel이란?Next.js 프로젝트 Vercel에 배포하기환경변수 설정커밋부터 배포까지 : 자동 빌드 확인하기 [Vercel이란?]Next.js는 이미 많은 프론트엔드 개발자들이 선택하는 대표적인 React 프레임워크다.서버 사이드 렌더링 (SSR), 정적 사이트 생성(SSG) 같은 기능을 쉽게 구현할 수 있어 성능과 SEO 측면에서도 강력한 장점을 제공한다. 하지만 애플리케이션을 개발했다고 해서 끝이 아니다.실제로 사용자가 접근할 수 있도록 배포하고 이후에도 안정적으로 서비스를 운영하려면 배포 환경과 자동화된 배포 파이프라인(CI/CD)이 필요하다.이때 Vercel은 Next.js를 만든 팀에서 직접 제공하는 호스팅 플랫폼이다.별도의 서버 설정이나 복잡한 빌드 과정 없이도 손쉽게 프로젝트를 ..

목차 CI/CD란 무엇인가?CI/CD 파이프라인 구조환경별 배포 전략 [CI/CD란?]CI/CD는 애플리케이션 개발에서 배포까지의 모든 단계를 자동화를 통해서 조금 더 효율적이고 빠르게 사용자에게 배포할 수 있도록 하는 것을 말한다.기업에서는 시장과 고객의 요구를 빠르게 분석하고 반응해야 하기 때문에 제품을 출시, 업데이트할 것인지가 가장 큰 과제이다.프로젝트 규모가 커질수록 단순히 코드를 작성하는 것보다 코드가 안정적으로 동작하고 빠르게 배포되는 것이 중요해진다.그래서 많은 기업들이 CI/CD 프로세스를 사용하고 있다. 지속적인 통합개발자가 작업한 코드를 저장소에 Merge 하고 자동으로 빌드 및 테스트를 실행해 코드 품질을 보장하는 과정이다.기본 과정개발자가 코드 커밋 → 버전 관리 시스템(Git ..

목차 Firebase란?Firebase 프로젝트 생성하기Firestore 데이터 생성하기Next.js에서 Firebase 연동하기Firestore 데이터 가져오기API Route 구성하기(/api/board)클라이언트에서 데이터 호출하기전체 구조 흐름 정리 [Firebase란?] Firebase는 구글이 운영하는 백엔드 서비스로 애플리케이션에서 공통적으로 사용하는 백엔드 기능을 모아놓은 플랫폼이다.웹, 앱 프로토타입이나 MVP 제품을 만들어야 하는 상황이라면 좋은 서비스다. Firebase에는 Authentication이라는 서비스가 있다.사용자 인증에 대한 서비스로 로그인, 회원가입, 비밀번호 찾기와 같은 인증과 관련된 서비스를 간단하게 개발할 수 있다.사용자의 데이터를 저장하거나 조회할 수 있는 F..