평범한 개발자 얏얏이 평범한 개발자 얏얏이

코드를 마스터에 올리면 자동으로 배포되는 것을 알아보려고 한다. github action이란? girhub action은 우리의 workflow를 자동화 해주는 tool이다. (공식홈페이지 - GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.) 자동으로 빌드, 테스트, 배포 등을 해주는 툴인데 일단 이번엔 자동으로 배포해주는 것만 알아보겠다. do..

next build 없이 배포 eb deploy 명령어를 하기 전에 next build만 하면 되지만 이런 게 은근히 신경쓰이기 때문에 개선을 해봤다. 일단 아무 텍스트를 수정하고 next build 없이 배포를 해봤더니, 당연히 수정사항이 반영되지 않았다. eb는 기본적으로 npm run start를 하는데 현재 start 스크립트의 내용은 next stat -p 8080이다. next start 명령어는 프로덕션 모드로 앱을 실행한다. 이때 앱은 next build를 통해 컴파일이 되어야 한다.(next start starts the application in production mode. The application should be compiled with next build first.)(아래글..

백엔드 .js 파일 안 보이게 하기 타입스크립트를 사용하면 자연스럽게 .js 파일이 생성된다. 이 js 파일은 깃에 올리지 않고 싶을 때 gitignore에 아래 한 줄을 추가하면 된다. src 폴더안에 있는 모든 폴더의 모든 js 파일은 깃에 올리지 않겠다는 의미이다. gitignore에 관한 문법 설명은 워낙에 많으니 따로 참고글을 추가할 필요는 없어 보인다. tsc watch는... 이미 설정이 되어 있어서 그런지 그냥 하면 되네... 예전에 어떻게 했는지 기억이 안 나... 근데 이미 설정은 되어 있으니... 패스... 오늘은... 계획을 너무 작게 짰다...

어제는... 정말 감동의 배포였다. 빵끗 node.js에서는 아래의 코드를 통해 환경변수에 접근할 수 있다. pocess.env.환경변수명 환경변수를 사용하려는 이유는 로컬이냐, 프로덕트냐에 따라 프론트 - 백 - DB 간에 통신을 할 때 설정을 다르게 하기 위함과 DB 패스워드 같은 것들을 코드에서 관리하지 않기 위함이다. printenv 명령어를 통해 현 컴퓨터에 있는 환경변수를 확인할 수 있는데, 이 값중 하나를 node.js 환경에서 아래처럼 출력을 해보면 좀 더 쉽게 환경변수의 개념을 이해할 수 있다. process.env.환경변수이름 elastic beanstalk 환경변수 사용하기 엘라스틱 빈즈토크 구성 -> 소프트웨어 편집을 들어가면 아래와 같은 항목을 찾을 수 있다. 이름과 값을 넣으면 ..

그냥 오늘 뜬금없이 든 생각이... 지금은 프론트, 백 둘 다 조금씩 하고 있지만 나중에 규모가 조금이라도 있는 회사를 가면 분명 둘 중 하나에만 집중하게 될텐데 프론트,백을 둘다 하게 되는 사이드프로젝트 보다는 백엔드 쪽에 좀 더 집중한 사이드프로젝트를 진행하는 게 낫지 않을까 생각이 든다. 흠.,., 근데 백엔드에 집중된 사이드프로젝트란 뭘까...? 일단은 프로젝트 한바퀴 돌리고나서 더 생각해보자. 일단 배포 수단은 aws eb를 쓰려고 한다. 전체적인 그림을 보고싶어서 배포를 해보려는 것인데, EC2를 사용하면 난이도때문에 너무 오래 걸릴 거 같고, lightsail은 뭔가... 실제를 쓰는 곳이 별로 없을 것 같은 느낌적인 느낌 EB에 프론트엔드 배포 1. eb에 환경 생성하기 elastic be..

회원가입, 로그인 UI 만들기 모듈 설치 npm i -S bootstrap reactstrap npm i -D @types/bootstrap @types/reactstrap reactstrap은 이쁘장한? UI들이 모여있는 라이브러이이다. Next.js에 reactstrap적용 9.5.4 버전부터는 좀 더 간편하게 모듈로부터 스타일을 임포트할 수 있게 되었다. 일단 /page 폴더에 _app.tsx 파일을 만들어주자. _App은 모든 페이지에 적용되는 로직을 추가할 수 있는 코드이다. (Next.js uses the App component to initialize pages. You can override it and control the page initialization.) _app에 대한 자세한 ..

User 테이블 id: CHAR(36) email: VARCHAR(255) nickname: VARCHAR(255) password: VARCHAR(255) createdAt: DATETIME updatedAt: DATETIME deletedAt: DATETIME CHAR vs VARCHAR char는 필드길이가 고정인 컬럼이다. 사이즈를 50으로 설정한다면, 5바이트짜리 데이터가 들어와도 50의 크기를 차지한다. varchar는 필드길이가 가변적인 컬럼이다. 사이즈를 50으로 설정한다고 해도 최대 길이가 50인 것이고 5바이트짜리 데이터가 들어오면 5바이트를 차지한다.(어떠한 이유 때문에 1바이트 추가된다는 글도 보긴 함) 그럼 무조건 varchar가 좋은 게 아닌가?라고 생각을 해서 검색을 해봤는데 ..

현 스택 Backend node.js express Typescript Sequelize GrpahQL MySQL Frontend React Next.js Typescript axios axios 선택이유 - 지인 개발자의 추천 - 사이트(openbase.io/categories/js/best-javascript-http-request-libraries?orderBy=RECOMMENDED&)에 나와 있는 랭킹 참고 장점 - node.js와 브라우저에서 모두 작동한다. - promise api를 지원한다. - 요청을 set 혹은 cancel할 수 있따. - response timeout을 set할 수 있다. - Cross-site request forgery 취약 공격을 막을 수 있다.(위키 백과 참고 -..