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

이전 게시글이 선행되면 좋습니다 사이트를 모바일 웹앱으로 실행되도록 하는 방법 (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..

Webpack을 이용해 React 프로젝트를 설정하게 되었습니다. 생각보다 간단하지만은 않아서 환경 설정하는 과정을 기록해두려고 합니다. 모든 세팅이 끝난 Wepack-React 보일러플레이트 저장소 GitHub - Gilpop8663/webpack-react-boilerplate: react-18, webpack5, typescript, storybook, jest, msw, @tanstack/react-query_v4, s react-18, webpack5, typescript, storybook, jest, msw, @tanstack/react-query_v4, styled-components, eslint, dotenv, whatwg-fetch - GitHub - Gilpop8663/webpack..

팀원과 협업을 할 때 dev 브런치를 pull 해오는 상황에 앞선 커밋 기록이 있다고 합칠 수 없다는 오류 메세지였습니다. 해결하려면 깃의 전역 설정을 바꿔줘야 합니다. 깃 설정 목록 보기 git config --list 저의 경우 pull.ff only가 적용되어 있어서 이 설정을 삭제해주었습니다. 깃 설정 삭제하기 git config --unset --global pull.ff 하지만 이러한 옵션이 하나도 없다면 충돌날 가능성이 많아지므로 추가적인 옵션 설정을 해주었습니다. rebase를 하지 않는 옵션 추가 git config pull.rebase false 참고자료 https://b41.kr/2022/02/14/git-fatal-%EC%A0%95%EB%B0%A9%ED%96%A5%EC%9D%B4-%..