🧑‍💻 짧은호흡/~ 2021

이번에 처음으로 SQL을 써보면서 알게 된 여러 경험들을 정리해본다. 사아아실 sql을 깊이 공부해본 적이 없어서 약간의 꼼수와 야매가 가득 섞여있다. 1. Select 절에서 서브쿼리 사용 const selectItemsByCount = async (connection, limit, offset) => { const selectItemsByCountQuery = ` SELECT (select count(*) from wish where wish.item_id = item.item_id) wish_count, item.item_id, item.title, item.price, item.safety_pay, item.location, item.created_at, image.image_path FROM i..

nodejs에서 이미지 등의 파일을 멀티파트 형식으로 업로드할 때 multer 라는 패키지를 설치해서 미들웨어로 이용한다. npm i multer npm i multer-s3 aws-sdk s3.json { "accessKeyId": "AKIAVLEU2D2EIKMGBVQS", "secretAccessKey": "", "region": "ap-northeast-2" } 이전 포스팅에서 IAM을 설정하고 받은 어세스키와 시크릿키를 넣어둔다. 이 시크릿 키가 유출이 되면 청구서에 엄청난 액수가 찍히고 추운 겨울에 현관문 밖으로 내쫓길수도 있으니까 꼭꼭 주의한다. region에는 s3 버킷에 설정된 리전을 적는다. 서울이니까 보통은 ap-northeast-2 로 되어 있을걸. multer.js multer와 관..

이미지 업로드 기능을 nodejs로 구현 중이다. 이전에 처음 간단하게 했던 프로젝트에서는 단순히 서버의 로컬 디렉토리에 이미지 파일을 저장하고, 다시 불러올때는 이미지파일을 base64로 변환해 다시 넘겨주었다. 이번에는 아마존의 S3에 이미지를 업로드해보려고 한다. nodejs에서 S3 서비스를 이용하려면 먼저 S3 버킷을 생성하고, IAM에 새로운 사용자를 등록해 어세스 키를 만들어서 사용한다. 1. S3 버킷 S3 버킷 생성을 할 때는 모든 퍼블릭 액세스 차단을 풀고 넘어간다. 버킷을 생성한 다음에는 버킷 정책을 수정해주어야 한다. 버킷 이름 클릭 > 권한 > 버킷 정책 에서 볼 수 있다. 버킷 정책은 JSON 형식으로 되어 있는데, 정책 생성기를 이용해서 쉽게 만들 수 있다. 버킷 ARN을 클릭..

바로 직전 포스팅에서 antd 그리드를 이용해서 브라우저 화면 사이즈에 따라 반응하는 페이지를 만들어 보았다. 정확히 768px에 바뀌는지 보려고 현재 화면의 너비를 리액트 컴포넌트에 띄워주려고 한다. 1. resize 이벤트 resize 이벤트는 document view의 크기가 변경될 때 발생한다. 이벤트가 발생할 때마다 width state에 브라우저의 너비가 저장되도록 했다. useEffect를 이용해서 컴포넌트가 마운트 될 때 해당 함수를 실행한다. const [width, setWidth] = useState(window.innerWidth); const handleResize = () => { setWidth(window.innerWidth); }; useEffect(() => { windo..

교양으로 웹디자인 수업을 들은 후에 요긴하게 쓰는 몇 안되는 것들 중 하나. 그 때는 포토샵으로 일일히 픽셀 재가면서 그리드 레이어를 만들어 사용했었는데, 피그마에선 매우 간단한 방법으로 그리드를 만들 수 있다. Antd에서 제공하는 그리드 시스템으로 반응형 웹을 쉽게 구현할 수 있다. Grid - Ant Design Child elements depending on the value of the start,center, end,space-between, space-around, which are defined in its parent node typesetting mode. ant.design antd에서 Row와 Col 컴포넌트를 불러와 사용한다. ; Col 컴포넌트들은 Row 컴포넌트의 자식이 된다..

이전에 혼자 진행했던 프로젝트를 깃에 올릴 때, 클라이언트 디렉토리와 서버 디렉토리를 하나의 레포지토리에 모아서 올렸다. 나중에 코드를 수정하고 업데이트해야 하거나 보기에 조금 불편했던 경험이 있었다. 클라이언트와 서버 디렉토리를 각각의 레포지토리로 분리를 해서 따로 저장하기로 했다. 임의로 이름을 지어서 쓰자면, project ├── client ├── server 로 된 레포지토리를 각각 project-client ├── .... project-server ├── .... 두 개의 별도의 레포지토리로 분리를 할 예정. 1. 각각의 레포지토리를 생성한다. 나의 경우엔 topster-frontend, topster-backend 두 개를 만들어주었다. 2. git subtree split 분리할 프로젝트..

Node.js Express 서버를 AWS EC2 상에 배포를 해보자. EC2에 git, npm, node.js 설치 등의 사전 세팅은 생략하고 넘어간다. Node.js 파일들과 패키지를 모두 내려받은 후에 파일을 실행시키는 것으로 서버를 돌릴 수는 있다. node index.js 클라이언트에서 내 서버의 api로 요청을 보냈더니, 리액트 프론트가 배포된 url에는 HTTPS 보안이 되어 있지만, 요청을 보내는 내 서버의 url은 그렇지 않다. 반드시 HTTPS 걸린 주소로 요청을 보내야 한다. [Nginx] 도메인 연결, HTTPS 적용 (Let's Encrypt) 참고1 1. 도메인 연결 이전에 가비아에서 구매를 해놓고 안쓰는 도메인이 있어서, 그 도메인에 내 IP를 연결했다. 10분 정도 기다리면 ..

AWS EC2 상에 Nginx로 리액트 프로젝트를 배포했던 경험 정리를 위한 글. 이전에 서브 도메인에 SSL 인증까지 마쳤다. 그걸 그대로 사용할 예정이다. [Nginx] 서브 도메인 설정, HTTPS 적용 참고1 참고2 'dev.9yujin.shop' 그리고 'prod.9yujin.shop' 이렇게 두 개의 서브 도메인을 만들어보자. 1. 가비아 DNS 레코드 수정 가비아에서 먼저 CNAME으로 서버 도메인을 등록해준다. dev와 prod 두개를 생성. 9yujin.tistory.com React 파일 빌드, 서버 업로드 yarn 패키지 매니저를 쓰고 있었다. 프로젝트 파일을 빌드해준다. yarn build 파일질라를 이용해 EC2에 빌드한 파일을 업로드했다. 경로는 /home/ubuntu/test/..