YG - 96년생 , 강아지 있음, 개발자 희망

개발 환경 localhost에서 로그인 시 HttpOnly와 Secure로 설정된 리프레시 토큰 쿠키가 제대로 들어오는지 확인해야 했는데 개발환경이 http라서 확인할 수 없었던 문제가 있었습니다. 그래서 https로 localhost를 설정하는 방법을 알아보게 되었습니다 1. mkcert를 설치합니다 GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd lik A simple zero-config tool to make locally trusted development certificates with any names you'd lik..

보투게더 기술 블로그에 작성한 글을 가져왔습니다 SEO 설정하기 (feat.네이버, 구글) 구글 설정하기 Google Search Console 사이트 접속 https://search.google.com/u/1/search-console?hl=ko 속성 추가 및 도메인 등록 TXT 설정 저흰 가비아여서 가비아에서 TXT 설정을 하겠습니다 ![]( velog.io 구글 설정하기 Google Search Console 사이트 접속 https://search.google.com/u/1/search-console?hl=ko 속성 추가 및 도메인 등록 TXT 설정 저흰 가비아여서 가비아에서 TXT 설정을 하겠습니다 바로 설정이 되지 않아서 기다려줘야합니다 저희는 기다려도 작동이 되지 않아 CNAME으로 다시 설정..

이전 게시글이 선행되면 좋습니다 사이트를 모바일 웹앱으로 실행되도록 하는 방법 (feat.apple-meta-tag) 사이트를 모바일 웹앱으로 실행되도록 하는 방법 1. html의 header에 다음과 같이 넣어주면 됩니다 // 홈 화면에 추가했을 때 보여질 앱의 이름 // 모바일에서 전체화면으로 보이게 할 지 여부 // 상 hell-of-company-builder.tistory.com 프로그레시브 웹 앱(PWA)이란 프로그레시브 웹 앱은 웹 기술을 사용하여 개발된 애플리케이션으로, 사용자가 웹 브라우저에서 접속할 수 있으며 모바일 앱과 비슷한 사용자 경험을 제공합니다. 이러한 웹 앱은 오프라인에서도 작동할 수 있으며, 푸시 알림을 받을 수 있고, 홈 화면에 아이콘을 추가하여 쉽게 접근할 수 있습니다...

사이트를 모바일 웹앱으로 실행되도록 하는 방법 1. html의 header에 다음과 같이 넣어주면 됩니다 // 홈 화면에 추가했을 때 보여질 앱의 이름 // 모바일에서 전체화면으로 보이게 할 지 여부 // 상태 표시줄 배경 색상 설정 2. 아이콘 설정을 해줍니다 아래의 사이트에서 아이콘을 넣고 설정해줍니다. 필요한 대부분의 아이콘 파일과 link, meta 코드를 알려주어 편합니다 https://www.favicon-generator.org/ 보투게더의 코드 아이패드용 스플래시 화면을 설정하고 싶을 땐 따로 설정을 해야 합니다 저희의 경우 아래와 같이 설정해보려고 했으나 아이패드에서는 제대로 나오지 않고 있습니다. 참고 자료의 링크를 참고하여 설정을 해야하는 것으로 이해되었어요 // 작동이 안됨 참고자료..

저는 맥박 형태에서 웨이브로 바꾸려고 시도했는데 바꾸기가 어려웠습니다. 팀원 제로가 만들어줘서 기록해두려고 합니다. 맥박 형태보다 웨이브 형태가 좋은 이유 Bill Chung의 연구에 따르면 스켈레톤 내 애니메이션을 규칙에 맞게 사용하면 사용자가 더 로딩 시간을 더 짧게 느끼게 된다고 합니다. 맥박보다는 웨이브 효과 왼쪽에서 오른쪽으로 움직이는 애니메이션 애니메이션은 Skeleton 컴포넌트에 주의를 끌만큼 빠르지 않아야 함 Everything you need to know about skeleton screens How do we know that skeleton screens actually work? uxdesign.cc CSS 속성 { border-radius: 4px; background-col..

Jest에서 .env 환경 변수 설정하기 저희는 Jest에서 msw를 통해 fetch를 하고 코드가 제대로 돌아가는 지 확인하고 있습니다 api 코드 const BASE_URL = process.env.VOTOGETHER_BASE_URL; export const getUserCategoryList = async () => { const categoryList = await getFetch(`${BASE_URL}/categories`); return transformCategoryListResponse(categoryList); }; jest 코드 import { MOCK_CATEGORY_LIST, MOCK_GUEST_CATEGORY_LIST } from '@mocks/mockData/categoryLis..

1. 젠킨스에 로그인해줍니다. 2. 프론트앤드 아이템에 들어옵니다. 3. 왼쪽 탭의 구성을 누르고 pipeline 탭을 누릅니다. 4. pipeline에서 빌드를 하기 전 .env 설정을 추가해줍니다. touch .env env 파일을 생성합니다. echo 'KEY=VALUE' >>.env '' 문자열의 내용을 .env 파일에 추가한다는 뜻입니다. >와 »의 차이 Linux를 기반으로 한 환경에서 >: 명령어 뒤에 나오는 파일에 쓸 때 사용(=write or overwrite)'>>: 명령어 뒤에 나오는 파일에 추가할 때 사용(=append)' 예시 코드 stage('Git Clone') { steps { git branch: 'dev', url: 'https://github.com/woowacourse..

잘못된 정보가 있다면 댓글로 알려주세요 .env를 통한 환경변수 사용 Votogether 팀 환경에 경우 AWS EC2로 배포하고 있기 때문에 AWS EC2에서는 .env를 배포 환경으로 생성하고, 개발자들이 사용하는 컴퓨터에서는 .env를 개발환경으로 세팅하면 배포 환경별 API를 바꿔가며 사용할 수 있습니다. 이렇게 사용하는 이유는 개발 환경에서는 MSW를, 실제 배포 환경에서는 서버의 API를 이용하도록 하기 위함입니다. 또한 서버의 앤드 포인트를 외부에 알리면 보안 위험이 있을 수 있습니다. (익명의 사용자가 대량의 요청 시도, 서버의 직접적인 공격) 따라서 dotenv를 통해 환경변수 설정을 해보도록 하겠습니다. 개발 환경 .env VOTOGETHER_BASE_URL=http://localhos..