반응형

전체 글 119

Vue3 Tutorial ( Single File Component 방식 )

https://v3-docs.vuejs-korea.org/tutorial/#step-8 Vue2, Vue3에서 data 사용 가능하지만,Vue3에서는 setup이 권장된다. vue3 ( setup ) 문법 setup 함수 내에서 Composition API를 사용해 상태와 로직을 정리, 반응형 상태를 만들기 위해 ref, reactive를 사용하고,  this를 사용하지 않는다.   data ( Option API ) 장점1. 간단하고 직관적2. methods, computed, watch 등 다른 옵션을 사용하기 편하다. setup ( Composition API ) 장점1. this가 필요없다.2. 코드 재사용성 증가3. 타입스크립트 친화적 ---------------------------------..

Vue3 2024.12.02

기획 ( 3주차, 4주차 )

개발인원 : 5명주제 : 커플 데이트 코스 추천 어플1차 목표 : 10월 1일 ~ 12월 23일까지 (총13주) 크리스마스 시즌 타겟 1차 완성 3, 4주차 회의회의를 통해 기능과 프로세스 정리가 끝났고 DB 설계도 거의 완료했다. 이번에 모일 때는 각자가 생각하는 디자인을 대략적으로 그려왔고디자이너가 합쳐서 결과를 만들기로 했다

기획 ( 1주차, 2주차 )

개발인원 : 5명주제 : 커플 데이트 코스 추천 어플1차 목표 : 10월 1일 ~ 12월 23일까지 (총13주) 크리스마스 시즌 타겟 1차 완성 1, 2주차 회의기술스택 : React-Native, SpringBoot, Spring Security, JPA, MySql ( 환경설정 완료 )협업툴 : Jira(백로그), GitHub ( 일주일에 한번 코드리뷰 )  회의 중 우리가 만들려는 것과 비슷한  유사 어플을 발견했고 유사 어플의 단점을 찾아서 우리 앱에서 장점으로 바꿔보고자 했음 단점- 직접 코스 짤 때 선택지가 점점 늘어남- UI가 야놀자, 여기어때랑 똑같음- 커플 이외에도 친구, 가족 타겟- 취향 & 장소 추천 ( 우리는 연인만을 위한 추천 중점 )  개발과정 ( 안드로이드스튜디오 쓴다고 가정 ..

SEO 검색엔진 최적화

알바를 하러갔다가 사장님이 내가 개발자인걸 알고 회사 홈페이지 검색엔진 최적화를 부탁받았다. php, 그누보드를 사용해서 만든 홈페이지였고 파일질라를 통해 서버에 올라가있는 것을 확인했다 문제 1. 구글 검색 시 검색이 안됌 원인 ( 구글서치콘솔을 통해 확인 )1. https 오류  해결방법 1. 사이트맵 재생성 ( 루트디렉토리 아래에 sitemap.xml을 만들고 서버에 올림 )2. robots.txt에 사이트맵 명시      추가로 수정한 부분 ( 메타태그 삽입 )  이후 URL 검사 시 구글에 등록, 페이지 색인 생성, https 제공확인 완료  SEO META in 1 CLICK 이란 크롬 확장프로그램을 쓰면 SEO에 맞지않는 사항을 확인 가능하다.  색인요청에 최소 일주일이 걸려서 일주일 이상 ..

에러 2024.10.09

[AWS error] 404 Not Found Code: NoSuchKey Message: The specified key does not exist. 해결법

aws s3에 배포 후 엔드포인트로 접속이 잘된다근데 새로고침을 누르면 이렇게 404 에러가 떴다 특히, 토스페이먼츠로 결제를 구현했는데 결제 성공하면 떠야하는 페이지에서 계속 404 NoSuchKey 에러가 떴다 해결방법 해당 사용 중인 S3 버켓의 속성 => 정적 웹사이트 호스팅 => 편집 버튼 => 바이블처럼 되어있는 error.html을 index.html로 대체   에러 해결해결방식을 조금 유추해보면 에러가 떴을 때 index.html로 다시 리다이렉트 해버려서 잘되는것처럼 보이는 임시방편으로 생각된다.   참고 블로그https://algoisanswer.tistory.com/11

에러 2024.08.26

AWS 배포 ( Docker 설치 )

1. ec2 생성ubuntu 242. t3.large 3. keypair 생성 ppk ( 나는 pem으로 만든게 있어서 그대로 사용함 )보안그룹 퍼블릭 활성화생성4. putty이용해서 접속 ( cmd or powershell에서 접속해도됌  - 키페어 실행 )https://jongsky.tistory.com/49  따라서 Docker 설치 파일질라 다운 ( npm build한 front 밑에 프론트 넣으면 됌 )5. ec2생성 후 security group설정. - default를 any로 허용.

CI CD 및 AWS 2024.08.17

결제하기 ( 토스페이먼츠 )

⚡️ 개발환경Front - React.jsBack - SpringBoot, Spring Security, JPADB - MySqlServer - Tomcat 9Tool - sts, VScodeBuild - maven⚡️ 시나리오React에서 API서버로 UI출력 및 결제요청 호출API 서버로부터 Redirect 받은 정보 Spring 서버로 전달 및 요청전달받은 정보이용 Spring에서 Toss API 서버로 결제 승인 요청반환받은 승인 결과 DB 저장저장된 DB를 React로 응답응답된 결과를 React로 UI 출력 1. 토스페이먼츠 API 키 발급  2. 리액트 root 폴더 아래에 .env 파일 생성 후 클라이언트 키 삽입 ( 나는 .env 파일에 클라이언트 키가 인식이 안돼서 하드코딩해서 넣음 )..

반응형