BEAT A SHOTGUN

지금까지 EC2 의 젠킨스가 github에 올라온 프로젝트를 가져와 빌드하는 데 까지 했다. 이제 빌드한 뒤 자동으로 배포하는 기능을 만들어보자. 우선 환경에 따라 작성해야할 Script 가 매우 다를 수 있으므로, 나는 Springboot, Maven, EC2 에 설치된 건 Linux 다. 그리고 톰캣이 내장된 jar 파일을 사용할 거다. 톰캣까지 있으니. 시작 👊 준비물 : EC2 에 깔린 젠킨스 우리는 빌드까지했으니, 빌드 후 젠킨스가 할 작업을 정해주면 모든 게 끝난다. 일단 순서를 생각해보면, github 에 commit 되면, 업데이트 된 프로젝트를 젠킨스가 가져올 거고(GitHub hook trigger for GITScm polling) 젠킨스는 가져와서 바로 빌드할 거다. 그 뒤에 빌드 ..

시작 👊 일단 로컬에 젠킨스를 받아서 설정해보자. 젠킨스 다운로드 중 왜 그런지 몰라도 30분걸림 서버도 3번이나 끊김. 설치 끝 젠킨스 실행 localhost:5000 에 들어가면 한 2분 정도 기다려주면 이런게 나오는데 빨간글자로 적힌 폴더에 들어가면 이렇게 있다. Password 파일을 메모장으로 열면 매우 간단한 비밀번호가 있고 복붙해서 사이트에 넣어주자. EC2 에서 할 때는 또 다른 경로를 알려줄거다. 그건 조금 있다가 EC2 할 때 다시 알아보자. 우리는 일단 로컬에서 해보고 설절이 잘 되나 보려고하는거니께 일단 ㄱ 그러면 페이지가 바뀌면서 플러그인 설치화면이 나오는데 우린 모르니까 일단 해주자. 생각보다 오래걸림 이거는 우리가 이제 젠킨스에 접속할 때 사용할 아이디와 비밀번호다. 접속할 포..

시작 👊 조회수 체크를 할 거다. 조회수가 높은 top 10을 화면에 출력할 건데 조회수가 바뀌었을 때 리스트도 바뀌어야겠지? 그래서 상태를 체크하는 useState 를 사용해봤다. useState 조회가 되면, 조회되는 항목을 props 로 받아서, useState 가 변화를 감지하고 리스트를 새로 렌더링할 생각이었다. // TopViews.tsx TopViews(props:any){ ... const [topViewList, setTopViewList] = React.useState(); useState(()=>( getTopView(); ),[props]) 이렇게 하면 계속해서 useState 가 돌아가더라. 그래서 언젠가 본 적 있는 useMemo 를 사용해봤다. useMemo // TopView..

시작 👊 성공해서 이 글을 쓰기 까지 3일이나 걸렸다. 매일 새벽 4시까지 키보드 부셔가면서 502 504 와 씨름했지만. 에러의 원인은 내가 생각하던 것들이 아니었다. 전부. 기본이 매우 중요하다는 걸 깨닫는 3일이었다. 우선 나는 자바코드 없이 react 만으로 페이지를 만들고 싶었기 때문에 자바 api 와 데이터베이스 가 없다. mysql 도 사용하지 않았다. 하지만 데이터베이스의 필요성을 느꼈고 RDS 를 만들었지만, RDS 만들기 끝까지 인텔리제이를 켜기 싫었기 때문에 RDS 로 바로 연결할 순 없나? 해서 3일동안 끙끙 앓았다. 특별하게 내가 사용하고 있는 건 나는 TS , http-proxy-middleware 를 사용한다. 그리고 앞으로 express 와 mysql 을 사용할 거다. 이게 ..

백엔드 없이 프론트엔드만으로 페이지를 완성할 생각이므로 백엔드 없이 리액트와 AWS RDS 를 연결해볼 생각이다. RDS 를 만드는 건 쉽다. AWS RDS 들어가서 데이터 베이스 생성 들어가서 나는 MySQL 을 사용할 거기 때문에 선택하고 돈 안 내고 쓰고 싶기 때문에 프리티어 식별자는 우리가 Heide 에서 처음 만들 때 그 이름  여기 `stockviews` 가 바로 식별자다. 아무튼 이름 적고 `사용자 이름`은 데이터 베이스에 접근할 때 사용할 이름. 거기에 비밀번호. 인스턴스 구성은 t2 스토리지는 20GiB 로 해야 한다. 프..

이 전엔 하나의 차트에 두 개의 그래프를 넣어 이 따위로 만들어놓았지만 Docs 를 보니 두 차트를 Synchronize 해 하나의 차트처럼 살펴볼 수 있었다. 이렇게. 이렇게 만들어보자. 매우 쉽다. 시작 👊 일단 차트를 하나 더 개 만든다. ... ... 이제 두 차트에 syncId 속성을 추가해준다. Docs 가 얘기해주는 것 처럼 두 차트의 syncId 에는 같은 값이 들어가야 한다. ... ... 끝🙋‍♂️ 너무 쉬운 건데 Docs 를 안 읽고 대충대충 만드니 엉망진창이 된 거지. 항상 댕청해지지 않도록 조심하자!

시작👊 API 를 이용하기 위해서 받은 APPKEY 와 APPSECRET 이 있다. APPKEY 와 APPSECRET 이 공개된 채로 github 에 올라가면 안 되겠죠😉? .env 파일 .gitignore 옆에 .env 파일을 만든다 .env 파일안에 적는다. 이때 따옴표는 적지 않도록 하자. // example APPKEY="AAA" ❌ APPKEY=AAA ✅ APPKEY와 APPSECRET 이 들어가는 부분에 방금 만든 env 를 넣어주자 process.env.ㅇㅇㅇ이름 끝 🙋‍♂️ npm start 새롭게 해주면 잘 작동한다. 덤 지금처럼 하면 재사용성이 조금 떨어지므로 변수에 담아서 사용해보자. 덤2 url 도 넣을 수 있다. url 도 .env 에 넣은 다음 변수로 받아온 다음 사용해보자

시작 👊 주식 차트를 그리는데 "상한가"로만 표현된다.😟 내가 원하는 차트 그림은 이게 아니야. 내가 원하는 차트는 진짜 주식 차트 처럼 하한가 상한가를 가지고 막대의 길이를 조절하고 싶다. 내가 가져온 데이터(한국투자증권 주식 API)에 이렇게 모든 게 담겨 있기 때문에 주가 아래쪽 바닥에는 거래량까지 표현할 수 있다. 사실 거래량을 표시하는 것은 어렵지 않다. 거래량은 바닥부터 올라오면 되는 그냥 막대그래프 기 때문에 를 하나 더 넣고 데이터를 넣어주면 된다. 결국 내가 원하는 건 🤔 하한가 상한가 를 이용해 막대를 공중에 띄우기 floating 전일 대비 부호 를 이용해 막대그래프 색깔 바꾸기 바닥에 거래량 막대 표시하기 🙂 만들어보자 🙋‍♂️ 1번부터 만들어볼까욤. dataKey 값에는String..