PROJECT
1.[REACT] react-route 를 이용할 때 component 로 props data 보내주는 방법
App.js 에 react-router-dom 을 사용해 페이지를 이동시키고 있다.그런데 post(게시글) 에는 번호가 부여되고, postDetail 에는 해당 게시글만 보여야 한다.그래서 App.js 에서 route 하면서이렇게 해서 해당 게시글로 이동하도록 했다.p
2.[SPRING] FOR 를 이용해 SQL문으로는 닿을 수 없는 ENTITY 내부 검색하기
POST ENTITY 는 EMOTION ENTITY 를 여러개 갖고 있다. 그래서 List 이 Post 에 있다.List 는 SQL 에서 인식하지 못한다.word 를 입력하면 title, contents 그리고 emotion 에 있는 emotionword 에 word
3.[PROJECT] SpringBoot 에러 수집 sentry.io 적용하기
가입하고 프로젝트 만들기를 한다.프로젝트 만들기에 들어가면 자기 프로젝트가 어떤 건지 골라야한다.자기에게 맞는 걸 적절하게 사용해주자. spring 과 spring boot 는 다르다.항상 댕청해지지 않도록 조심하자! 🙋♂️붙여 넣고 나서application.pro
4.[PROJECT] Beggining of the Toy Project with TS
일단 프론트엔드 사용 기술 ts react axios 시작이 반이다. 일단 시작 설치 npx create-react-app myapp --template typescript 를 입력한다. 설치는 2분정도 걸린다. 취소 5분임 npm start 하면 여느 리액트
5.[Recharts] bar 를 floating bar 로 만들어 진짜 주식 차트처럼 그리기
내가 원하는 차트 그림은 이게 아니야.내가 원하는 차트는 진짜 주식 차트 처럼하한가 상한가를 가지고 막대의 길이를 조절하고 싶다.내가 가져온 데이터(한국투자증권 주식 API)에 이렇게 모든 게 담겨 있기 때문에주가 아래쪽 바닥에는 거래량까지 표현할 수 있다.사실 거래량
6.[JS] 공개되면 안 되는 secret key 를 .env 파일에 넣어놓기
API 를 이용하기 위해서 받은 APPKEY 와 APPSECRET 이 있다.APPKEY 와 APPSECRET 이 공개된 채로 github 에 올라가면 안 되겠죠😉?.gitignore 옆에 .env 파일을 만든다.env 파일안에 적는다.이때 따옴표는 적지 않도록 하자.
7.[Recharts] 두 차트를 Synchronize 해 진짜 주식 차트처럼 만들기
이 전엔 하나의 차트에 두 개의 그래프를 넣어이 따위로 만들어놓았지만Docs 를 보니 두 차트를 Synchronize 해 하나의 차트처럼 살펴볼 수 있었다.이렇게.이렇게 만들어보자.매우 쉽다.일단 차트를 하나 더 개 만든다.이제 두 차트에 syncId 속성을 추가해준다
8.[AWS] REACT 와 연결할 AWS RDS 만들기
백엔드 없이 프론트엔드만으로 페이지를 완성할 생각이므로 백엔드 없이 리액트와 AWS RDS 를 연결해볼 생각이다. ERROR CAN'T CONNECT TO MY SQL ON AWS RDS (10060) 매우 잘 설명된 stackoverflow 하지만 나는 다른 문
9.[AWS] 자바코드없이 REACT 에서 RDS 에 있는 데이터 가져오기. 진짜 AtoZ
성공해서 이 글을 쓰기 까지 3일이나 걸렸다. 매일 새벽 4시까지 키보드 부셔가면서 502 504 와 씨름했지만. 에러의 원인은 내가 생각하던 것들 전부 아니었다.기본이 매우 중요하다는 걸 깨닫는 3일이었다.우선 나는 백엔드 없이 프론트만으로 페이지를 만들고 싶었기 때
10.[REACT] useState 대신 useMemo 를 사용해보자
조회수 체크를 할 거다.조회수가 높은 top 10을 화면에 출력할 건데조회수가 바뀌었을 때 리스트도 바뀌어야겠지?그래서 상태를 체크하는 useState 를 사용해봤다.조회가 되면,조회되는 항목을 props 로 받아서, useState 가 변화를 감지하고 리스트를 새로
11.[PROJECT] 배포의 시작 - Jenkins 설치하기부터 EC2에 빌드까지
젠킨스 다운로드 중왜 그런지 몰라도 30분걸림 서버도 3번이나 끊김.설치 끝localhost:5000 에 들어가면한 2분 정도 기다려주면 이런게 나오는데빨간글자로 적힌 폴더에 들어가면이렇게 있다.Password 파일을 메모장으로 열면 매우 간단한 비밀번호가 있고 복붙해
12.[PROJECT] ngrok 으로 EC2 주소 바꿔서 github webhook 과 연결하기
ngrok
13.[PROJECT] webhook 에 ngrok 대신 localtunnel 사용하기
nodejs 기반이기 때문에 npm install localtunnel 해준다. 설치하고 lt 를 입력하면 (소문자 엘임), 설명서가 나온다. 설명서를 읽어보고 코드를 넣어주자. 첫번째 --port 는 필수다 두번째 localhost 가 아닌 다른 주소라면(우리는
14.[PROJECT] Jenkins 에 프로젝트 빌드 후 자동으로 배포하기
지금까지 EC2 의 젠킨스가 github에 올라온 프로젝트를 가져와 빌드하는 데 까지 했다. 이제 빌드한 뒤 자동으로 배포하는 기능을 만들어보자. jenkins 에서 Publish Over SSH 라는 플러그인이 필요하다. 시작 👊 > 준비물 : EC2에 있는
15.[PROJECT] stockulator 의 개선을 위한 참고
RDS 에 쌓인 조회수 데이터는 지금 모두 count 0 으로 초기화 되어있다. 코드 개선 1
16.[Docker] EC2 ubuntu 에 Docker와 Docker-compose 설치하기
준비물: AWS EC2 ubuntuubuntu 에 접속해서 먼저 업데이트 해주자.sudo apt updatesudo apt install dockerdocker version 으로 도커의 설치 상태와 버전을 확인해보자.sudo usermod -aG docker $USE
17.[PROJECT] Github Actions 를 이용해 Docker hub 에 이미지 올리기
Github Actions 에서 바로 docker 이미지를 만들어 hub 에 올려놓을 수 있다.그렇게 되면 docker hub 에 있는 이미지를 EC2 가 pull 해서 실행할 수 있을 거다.일단 docker hub 에 이미지를 올리는 것 까지 해보자.일단 나는 nod
18.[CI/CD] Github Actions 와 Runners 그리고 AWS EC2 linux 으로 React 프로젝트 배포하기
치욕의 젠킨스와 docker hub 같은 것들로 배포가 될 듯 말 듯해 끙끙앓았다.😡이것 저것 해보며 내린 결론.EC2 프리티어는 너무 느리고 나약하다.그들은 나의 프로젝트를 감당할 자질이 없다고 판단, test용으로 방금 만든 따끈따끈한 react 프로젝트를 배포해
19.[REACT] KAKAO MAPS API 사용해서 지도 그리기, 현재 위치 받기 with TypeScript
kakao map api 를 이용해 페이지에 지도를 출력할거다.CRA 로 프로젝트를 만들었고 TS 를 사용합니다.참고: Kakao Maps API 를 보고 따라해보자.매우 간단하고 직관적으로 적혀있어서 한번이라도 보면 대강 이해가 된다. 물론 vanilajs 임참고로
20.[CI/CD] FastAPI 배포하기 - AWS EC2, Github Actions, Docker
fastAPI 와 react 를 이용한 서비스를 다 완성했으니 배포를 해야지.AWS EC2 - Linux (당연히 putty 도 필요)Github Respository조금있다 하겠지만 python 설치 모듈을 관리하는 requirements.txt 파일 만들기오타 없는