YG - 96년생 , 강아지 있음, 개발자 희망

1. vite 설치하기 Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev npm create vite@latest 저의 경우 React를 사용하기에 React를 선택했습니다. 타입스크립트를 설정해 줍니다. 기본과 swc 둘 중 어느 것을 선택해도 상관없습니다. 2. src를 만들고 패키지로 만들 코드를 보관할 폴더인 lib를 만들어줍니다. 패키지가 여러 개라면 다음과 같이 작성했습니다. src/lib/index.tsx export { default as Container } from './Container'; export { default as Flex } from './Flex'; export { default as Grid } from './Grid'; export { defau..

문제점 netlify로 배포 시 node 버전이 다르다고 배포 실패가 나옴. 7:21:12 AM: error 08_link_data@0.1.0: The engine "node" is incompatible with this module. Expected version "16.13.2". Got "16.19.0" 7:21:12 AM: error Found incompatible module. 버전이 다르다는 뜻.. 어떻게 해결해야 할지 몰랐지만 조금 검색해보니 나왔습니다. 해결방법 배포 프로젝트의 delpoy 셋팅에 들어가서 왼쪽 탭 Environment variables를 눌러줍니다. 그리고 Add a variable을 눌러줍니다. NODE_VERSION 고생하셨습니다. 사이트가 정상적으로 배포가 되었네..

시작 heroku에서 무료 티어 버전을 폐지한 것을 알고 fly.io로 이사를 시도하였다가 실패하게 되어서 cloudtype.io로 이사하게 되었습니다. 모두의 플랫폼팀, 클라우드타입 클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다. cloudtype.io 1. 로그인 2. 배포하기 깃 허브 계정을 연결 후 원하는 레포지토리를 설정해 줍니다. 3. 서버 커맨드 설정하기 프로젝트에 들어와서 설정을 누릅니다. 들어오시면 start command가 기본적으로 npm start로 되어있는데 각자 환경에 맞춰서 node 파일명. js로 설정해주시면 됩니다. 또한 install command에서 npm ci --production을 입력해주시면 packa..

각종 토이프로젝트와 원티드 프리온보딩을 하며 json-server을 이용해서 개발하였는데 이때 사용된 히로쿠 웹서버가 freetier을 지원하지 않게됨으로써 이사를 해야했다. 우선 저는 WSL2 환경입니다. FLY.io 설치 방법 여기서부터 막혔는데 WSL2는 linux 기반이기에 linux 커맨드를 이용해서 설치했습니다. curl -L https://fly.io/install.sh | sh 이 때 별다른 설정을 하지 않으면 command not found가 나오게 되는데 The Fly Global Application Platform Documentation and guides from the team at Fly.io. fly.io 로그인 방법 flyctl auth signup The Fly Glob..

설치 npm install gh-pages --save-dev package.json predeploy 와 deploy를 script에 설정해주고 homepage또한 설정해줍니다. { ... "predeploy": "npm run build", "deploy": "gh-pages -d build" ... }, "homepage": "https://[github ID].github.io/[repo Name]" npm run deploy 실행 github repo 확인 에러 gh-pages 에서 배포 시 react-router-dom 의 BrowserRouter 을 쓰면 화면이 안나오고 에러가 나올 수가 있다고 합니다. 1. gh-pages 에서는 BrowserRouter 대신 HashRouter 을 쓰는 ..

1. 사이트 가입하기 cron-job.org - Free cronjobs - from minutely to once a year. cron-job.org 2. 가입 후에 대쉬보드 들어오기 3.오른쪽 위에 create cronjob 누르기 4. 30분 주기로 깨우는 것으로 설정하고 create 하기 / 배포 url 넣어야함 그 이유는 heroku 에서 만든 사이트는 30분 주기로 사이트에 접속을 안하면 사이트에 접속 시 10~15초 정도 딜레이가 생기게 기능을 꺼두는데 이 사이트에서 설정함으로 인해 언제든 들어가도 접속이 원활이 잘되게 하는 것이다. 5. 잘되었는지 확인하기

1. Procfile 만들기 타입스크립트면 ts , 일반이면 js //Procfile web: node server.js 2. server 파일 만들기 //server.js const jsonServer = require("json-server"); const server = jsonServer.create(); const router = jsonServer.router("./db.json"); const middlewares = jsonServer.defaults({ static: "./build", }); const port = process.env.PORT || 4000; server.use(middlewares); server.use( jsonServer.rewriter({ "/api/*": "/..

0. 들어가기 전에 0-1 사전 준비 체크 리스트 1. 리액트 프로젝트가 CRA 혹은 순수 리액트 등으로 이미 만들어져 있어야 합니다. 2. AWS 계정이 필요합니다. 3. 처음 시도해보거나 중요한 프로젝트라면 새롭게 branch를 만들거나 fork로 먼저 진행해봅니다. 4. 프로젝트는 npm run build로 빌드를 미리 해놓아야 합니다. 0-2 S3 를 이용하는 이유 아마존 웹서비스의 S3라는 서비스는 Simple Storage Service이다. 즉 쉽게 파일을 저장할 수 있는 서비스이다. 서버를 구축해서 파일을 저장할 수도 있겠지만, 아마존에서 제공하는 S3를 사용한다면 저장에만 초점을 맞춰서 서비스를 사용할 수 있는 장점이 있다. 0-3 CloudFront 를 사용하는 이유 0-4. 전반적인 ..