본문 바로가기

분류 전체보기277

[AWS] Git Actions를 이용한 Docker Image 배포 자동화(CI/CD) 하는 방법 이전 글 참고 https://dongsu96.tistory.com/132 -> 수작업 배포를 해봤으니 git actions를 이용한 자동 배포 하는 법을 알아보자. 자동 배포 하는법 github에서 해당 repository 들어간 후에 actions 탭 클릭 name: Deploy sls app on: push: branches: - master jobs: deploy: runs-on: ubuntu-latest env: SERVERLESS_ACCESS_KEY: ${{ secrets.SERVERLESS_ACCESS_KEY }} AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACC.. 2023. 12. 19.
[Javascript] find() 함수와 filter() 함수의 공통점과 차이점 find() find() 함수는 주어진 콜백 함수의 조건을 만족하는 배열의 첫 번째 원소만 반환한다. 만약 조건을 만족하는 원소가 없으면 undefined를 반환한다. find() 함수는 단일 값을 찾을 때 사용한다. const numbers = [1, 2, 3, 4, 5]; const evenNumber = numbers.find(num => num % 2 === 0); console.log(evenNumber); // 출력: 2 filter() filter() 함수는 주어진 콜백 함수의 조건을 만족하는 모든 배열 원소를 포함한 새로운 배열을 반환한다. 만약 조건을 만족하는 원소가 없으면 빈 배열을 반환한다. filter() 함수는 여러 값을 찾거나, 조건에 맞는 모든 원소를 추출하고자 할 때 사용한다.. 2023. 12. 18.
[React] URL 파라미터 문법 설명 -> 이런식으로 만들면, 100개가 있다면 100개의 라우트를 만들어야 하지만, -> URL 파라미터 문법을 이용하면 한줄로 해결 가능하다. -> "/:변수명" 입력했을 때 컴포넌트를 보여줘라 라는 뜻이다. import { useParams } from 'react-router-dom' function Detail(){ let {id} = useParams(); console.log(id) return ( 2023. 12. 18.
[React] useNavigate() 설명, 404 페이지 만드는 법, nested routes, outlet 페이지 이동기능을 컴포넌트 대신 useNavigate() 훅을 사용할 수 있다. function App(){ let navigate = useNavigate() return ( (생략) { navigate('/detail') }}>이동버튼 ) } -> navigate(-1) = 뒤로 1번 가기, 2 넣으면 앞으로 2번 가기도 가능하다. 404 페이지 -> 의 path에 *을 넣으면, 모든 경로를 뜻한다. -> 위 Route 경로 이외의 경로를 들어간다면 element 요소를 보여준다. 서브경로 만들 수 있는 nested routes /about/member로 접속하면 회사멤버 소개하는 페이지 /about/location으로 접속하면 회사위치 소개하는 페이지를 만들고 싶을 때, -> 이렇게 해도 되겠지만,.. 2023. 12. 18.
[React] React Router 쓰는 법 react-router-dom React는 SPA(Single Page Application)이므로 html 파일을 하나만 사용한다. React Router를 사용하면 페이지 간의 전환 및 라우팅을 쉽게 처리 할 수 있다. 주로 외부 라이브러리인 react-router-dom를 사용한다. 사용법 npm install react-router-dom@6 -> 먼저, 터미널에 react-router-dom 라이브러리 설치한다. (위 코드는 6버전) import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); -> index.js 파일로 가서 import .. 2023. 12. 18.
[Restful API] Restful API 방식으로 서버 개발 총 정리 순서 기획(화면기획서) DB테이블설계 API개발(서버개발) 1. MySQL Workbench 접속 해당 서비스용 계정을 만들기 위해 admin 계정으로 접속해서 DB와 유저를 만든다. ※ DB는 utf8 / utf8_unicode_ci로 만든다. use mysql; create user '유저네임'@'%'identified by '비밀번호'; grant all on DB이름.* to '유저네임'@'%'; 홈으로 돌아가 만든 DB와 유저를 입력해 새로운 커넥션 만들고 화면기획서에 맞게 테이블 생성한다. ※ 테이블에 컬럼을 만들때 안드로이드 개발과의 일관성 위해 컬럼은 헝가리안 표기법 사용한다. 헝가리안 표기법 = 자바의 카멜 표기법과 동일 -> 한칸 띄우거나 _ 쓰지않고 대문자 사용 ex) createdA.. 2023. 12. 18.
[Restful API] 네이버 검색 API 사용해보기 네이버 검색(뉴스) API 사용하기 네이버 Papago API 사용 참고) https://dongsu96.tistory.com/146 뉴스 검색 API 레퍼런스 참고) https://developers.naver.com/docs/serviceapi/search/news/news.md#%EB%89%B4%EC%8A%A4 -> 설명서 캡쳐(1) -> 설명서 캡쳐(2) -> 설명서 캡쳐(3) 요청 화면(Postman) -> 위 API 레퍼런스를 참고하여 postman에 요청한다. -> 잘 응답한 모습. 검색에 해당하는 query 부분은 description의 태그 안에 들어있다. 2023. 12. 18.
[Restful API] 이미지와 내용을 포스팅하는 API 만들기 -> postman에서 http method는 post, Body의 form-data에 File으로 파일 세팅, Text로 내용을 세팅해논다. def post(self) : file = request.files.get("photo") content = request.form.get("content") if file is None : return {"error" : "파일이 없습니다."}, 400 current_time = datetime.now() new_file_name = current_time.isoformat().replace(":", "_") + ".jpg" file.filename = new_file_name s3 = boto3.client("s3", aws_access_key_id = Con.. 2023. 12. 18.
[Restful API] 사진을 보내면 해당 사진에 어떤 물체가 있는지 알려주는 API 만들기 (Object detection API, Rekognition) Object detection API = 해당 사진에 어떤 물체가 있는지 알려주는 API이다. -> google Vision API, Amazon Rekognition 등이 있다. 아마존의 Rekognition를 이용) -> postman에서 http method는 post, url 설정, Body에 form-data엔 Key와 Value(보낼 이미지 파일)을 세팅해논다. def post(self) : file = request.files.get("photo") if file is None : return {"error" : "파일이 존재하지 않습니다."}, 400 current_time = datetime.now() new_file_name = current_time.isoformat().replace.. 2023. 12. 18.
[Restful API] 이미지를 S3에 업로드하는 API 만들기 AWS의 S3을 생성한 후(참고 : https://dongsu96.tistory.com/131 ) 이미지를 내면 AWS의 S3에 업로드하게 하는 API 만들기 -> postman에서 Body의 form-data에 File 형식으로 바꿔서 Key값과 Value(사진)을 세팅해논다. def post(self) : file = request.files.get("photo") if file is None : return {"error" : "파일을 업로드 하세요."}, 400 # 파일명을 회사의 파일명 정책에 맞게 변경 # 파일명은 유니크 해야 한다. current_time = datetime.now() new_file_name = current_time.isoformat().replace(":", "_") +.. 2023. 12. 18.

티스토리툴바