프로그래밍 공부하기

리눅스에는 명령을 주기적으로 반복해서 실행해주는 crontab이라는 명령이 있다. 이 명령은 다양한 곳에 활용될 수 있는데 나는 땅땅마켓 이라는 프로젝트의 물품목록을 리셋시켜주기 위해 사용했다. 1. crontab 설정 1) 할 일 목록 만들기 프로젝트의 물품목록을 리셋시키기 위해서는 Database를 아에 지우고 다시 만든 후 시드를 다시 채워야 했다. 또한 서버에 남아있는 데이터도 지우기 위해 서버도 재실행 시켜주어야 했다. 이렇게 실행해야할 작업이 여러개 있을 때는 셸 스크립트(.sh)로 작성하여 저장한다. 나는 reset.sh라는 이름으로 만들어주었다. 2) crontab 설정 리눅스 반복 예약작업 cron, crond, crontab - 제타위키 1 개요[ | ] cron, cronie, cro..

땅땅마켓 우리 동네 경매장 땅땅마켓에서 여러분들의 중고 물품을 등록해 경매 주최자가 되어보세요! 등록된 물품을 입찰하고 실시간 채팅을 통해 거래할 수 있습니다. 경매를 통해 원하는 가격으로 거래하세요! 주소: https://ttangttang.shop/ 깃허브: 백엔드 프론트엔드 백엔드: Node.js, socket.io, Multer, MySQL, Sequelize 프론트엔드: TypeScript, React Hooks, Redux, socket.io, Styled-Component, SCSS 배포: AWS CodeBuild, EC2(ELB), S3, CloudFront, Route53, Docker 기능: 로그인 지역기반 물품 검색 실시간 입찰 및 가격 변동 업데이트 경매 물건 등록 나의 경매 필터링..

CLB를 ALB로 변경한 후 서버 도메인에 접속하니 503 에러가 발생했다! 왜 그런걸까ㅠㅠ 일단 AWS 가이드문서를 찾아보았다. 문서에 의하면 503에러가 뜨는 이유는 4가지가 있다. 1번은 정말 일시적인 이유고 2번을 체크해보자 +추가적으로 찾아보니 내가 찾은 AWS 가이드문서는 CLB의 트러블슈팅이었다. ALB의 경우 로드밸런서의 타겟이 없는 한 가지 경우만 503에러가 발생하는 것으로 보인다.(하단 링크 참고) 확인하기 위해 EC2의 로드밸런싱메뉴에서 대상그룹 항목으로 이동한다. 그 후 상태를 확인하고 싶은 elb를 체크하면 아래에 자세한 정보가 보여진다. 위 이미지는 등록한 결과라 타겟이 있지만, 처음 이 항목에 들어왔을 때 진짜 Registered targets이 하나도 없었다! 그래서 위의 ..

웹서비스는 반응속도가 매우 중요하다. 이전에 읽은 책에 의하면 0.1초는 사용자가 기능이 바로 반응했다고 느끼는 시간, 1초는 불필요하게 오래 기다리지 않았다고 느끼는 시간. 10초면 사용자가 집중력을 잃는 최대 시간이라고 한다. PageSpeed Insights 모든 기기에서 웹페이지 속도를 개선해 보세요. PageSpeed Insights 서버에서 페이지 분석 중 developers.google.com 내가 만든 사이트가 얼마나 빠르고 효율적인지 측정해주는 구글의 서비스가 있다. 바로 PageSpeed Insights이다. 위의 링크로 들어가서 측정을 원하는 사이트를 입력하면 점수와 함께 반응속도 및 개선할 부분을 알 수 있다. 특히 측정 결과에서 어떻게 하면 반응속도를 줄일 수 있는지 추천해주는 항..

최근 실시간 웹소켓 통신을 활용한 프로젝트를 진행하였다. 그런데 AWS EC2와 S3에 배포하니 웹소켓부분에서 오류가 발생했다! 왜 이런일이 발생했는지 찾아보았더니 다음과 같은 자료를 얻었다. 기능 Application Load Balancer Network Load Balancer Gateway Loac Balancer Classic Load Balancer 로드 밸런서 유형 계층 7 계층 4 계층 3 게이트웨이 + 계층 4 로드 밸런싱 계층 4/7 대상 유형 IP, 인스턴스, Lambda IP, 인스턴스 IP, 인스턴스 WebSocket ✔ ✔ ✔ 지원 네트워크/플랫폼 VPC VPC VPC EC2-Classic, VPC 표를 보면 CLB는 WebSocket을 지원하지 않는다는 사실을 발견할 수 있다!..

1. Lottie란 화면에서 복잡하고 화려한 애니메이션을 표현해야할 때 css 와 JavaScript만으로는 너무 어려울 때가 있다. 이러한 때 gif파일을 사용해야겠다는 생각이 들 것이다. 이 때 gif 뿐만 아니라 Lottie라는 선택지도 존재한다. Lottie란 gif처럼 애니메이션을 표현하는 방법으로, .json파일 형식으로 되어있다. gif에 비해 Lottie의 장점은 다음과 같다. gif보다 훨씬 용량이 작다. 확대/축소해도 이미지가 깨지지 않는다. 2. Lottie 파일 얻기 Free Lottie Animation Files, Tools & Plugins - LottieFiles The world’s largest online platform for the world’s smallest an..

1. SVG란 웹사이트에서 이미지를 표현하는 방법은 흔히 알려진 jpg, png 등의 이미지 파일형식 뿐만 아니라 svg라는 형식이 존재한다. svg는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일형식이다. 즉, 기존 이미지 형식은 픽셀로 이미지를 표현했다면, svg는 벡터(수학적 계산)을 통해 이미지를 표현한다. 예를 들어 svg는 위 코드처럼 도형으로 이미지를 표현한다. 코드를 자세히 보면 빨간색 rect, 초록색 circle, 흰색 text 태그로 구성되어있다. 이 코드를 저장한 후 웹에서 보면 오른쪽 그림과 같은 이미지가 보여진다. svg에서 더 자유롭고 복잡한 도형을 그리기 위해선 path 태그를 사용한다. d 속성 값들을 자세히 살펴보자 d 속성에서 가장 먼저 보이는 값은 M8 48이..

SongNumberBook 노래방에서 노래부르는 시간보다 노래를 고르는 시간이 더 많지 않으셨나요? 다른사람이 노래를 부를때 핸드폰만 만지며 어떤 노래를 부를지 고민하지 않으셨나요? 결국 선택된 노래가 어제 부른 그 노래가 아니었나요?! 이제 노래를 검색하고 나만의 리스트에 저장해보세요! 깃허브: 백엔드 프론트엔드 배포: https://songnumberbook.shop/ 프론트엔드: React-Hook, styled-component 백엔드: Node.js MySQL, Sequelize, Cheerio 기능: 로그인 노래검색 나만의 노래목록 생성/편집/삭제 서비스 소개 나는 노래방가는 것을 좋아한다. 하지만 막상 노래방에 가면 어떤 노래를 불러야할지 고민하다 인기차트에 있는 노래만 부르고 오게 된다. ..

VMware의 우분투를 사용하던 중 갑자기 인터넷 연결이 안되고, 상단 메뉴의 Wired Connected라는 메뉴도 사라져있었다. 재부팅을 해도 안되고, VMware의 네트워크 설정을 바꿔도 안되서 찾아보니 위의 명령어를 사용하라는 정보가 나에게 효과가 있었다! 저 명령어를 쓴 후 상단 메뉴를 다시 눌러보면 Wired Connected 메뉴가 다시 생겨있다! askubuntu.com/questions/1075139/ubuntu-18-04-network-icon-disappeared-and-no-internet-access-in-vmware

파이널 프로젝트의 SR 작업의 결과 프로젝트에서 가장 핵심적인 부분이 Timer와 SocketIO를 이용한 실시간 통신이라는 결론을 얻게 되었다. 따라서 타입스크립트를 2일간 공부하면서 해당 부분을 간단하게 구현해 보기로 하였다. 1. TypeScript, React, Redux Setting -추후 포스팅하거나 생략 2. Timer const convertSecToHourString = (targetSec: number): string => { const hour = Math.ceil(targetSec / 3600); const min = Math.ceil(targetSec%3600/60); const sec = Math.ceil(targetSec%3600%60); return `${hour}:${mi..