본문 바로가기

전체 글166

[Firebase] 빌드 시 수정된 규칙이 자동으로 적용되게 하기 [Firebase] Cloud Firestore 데이터베이스에 대한 클라이언트 액세스가 4일 후에 만료됩니다 문제 상황 내가 처음 파이어베이스 연결할 때 테스트 모드로 설정해둬가지고 곧 클라이언트 액세스가 만료되니 보안 규칙을 수정하라고 메일이 날아왔다. 우선, (나처럼) 테스트 모드에서 개발 inner-stella.tistory.com firestore 규칙을 콘솔에서 수정했더니, VS code에서 코드 수정 후 빌드를 하면 초기 규칙으로 빌드가 되는 문제가 있었다. 간단한 문제였는데, 이를 해결하려면 로컬 폴더의 firebase.rules 파일에서 규칙을 수정해주면 된다. 2022. 10. 24.

[React] favicon 변경하기 react-create-app으로 프로젝트를 시작하면, 브라우저 탭의 왼쪽에 있는 favicon이 리액트 로고로 뜬다. (아래 그림에서 크롬 로고 위치에 말이다) 내 서비스에 맞는 아이콘을 디자인해서 그것으로 변경하고 싶을 때는 아래와 같이 하면 된다. 1. 아이콘 디자인 하기 일단 디자인 한 아이콘 파일이 있어야 한다. 2. favicon으로 만들기 https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.. 2022. 10. 24.

[Firebase] Cloud Firestore 데이터베이스에 대한 클라이언트 액세스가 4일 후에 만료됩니다 문제 상황 내가 처음 파이어베이스 연결할 때 테스트 모드로 설정해둬가지고 곧 클라이언트 액세스가 만료되니 보안 규칙을 수정하라고 메일이 날아왔다. 우선, (나처럼) 테스트 모드에서 개발을 시작한 경우 보안 규칙 탭에 들어가보면 다음과 같이 작성되어 있는 코드를 확인할 수 있을 것이다. rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.time < timestamp.date(2022, 10, 14); } } } Cloud Firestore 보안 규칙 Cloud Firestore 보안 규칙을 사용하면 인프라를 .. 2022. 10. 10.

[HTML] input 태그 클릭시 자동 줌인되지 않게 하기 올해 초에 만들었던 맛집 검색기를 배포했을 때, 한 개발자분께서 피드백을 주셨었다. input 태그 누르게 되면 폰트사이즈가 작을 때 자동으로 줌인을 시키는 부분이 있는데요 이 부분이 사실 사용자성을 많이 떨어뜨려서 지양하고 있는 부분입니다 참고 부탁드려요! input 태그, 그러니까 검색창을 누르면 자동으로 화면이 확대가 되는 것이었다. font-size가 16이하면 자동으로 확대가 된다고 한다. 피드백을 받고 나서 다시 사용해보니, 확대가 되고 나서 입력을 받은 후에도 계속해서 확대된 상태로 화면이 유지되었다. 따라서 그 때마다 화면을 다시 축소 시켜줘야 했기 때문에 불편했다. 이를 해결하는 방법은 다양하지만, 나는 그냥 폰트 사이즈와 인풋의 크기 자체를 고정시켜주었다. + 다른 방법들 https:/.. 2022. 10. 8.

10월 북마크들 코드 스멜 (Code Smell) 라인개발실록 1. 프레임워크 & 개발 도구 : spring - react - kubernetes - flutter - docker - armeria 2. 언어 : java - python - javascript - kotlin java OOP의 기본, 웹 개발자라면 필수, 객체지향의 정석 어려움. 클래스 개념이 헷갈림. python 정보가 많음. 쉬움. 다양하게 활용 가능함. 기능이 강력함, 처음 개발할 때 접근성 좋음 문법이 별로다. 동적 타입 언어라 별로다. js 웹 개발자 필수. 서버와 클라이언트를 한 언어로 구현. 자유도 비직관적, 호이스팅 싫음, 타입세이프하지 않음, 너무 자유분방, 콜백, 동적타입 kotlin : 자바보다 편함. 깔끔하고 모던하다. typesc.. 2022. 10. 8.

[JS] href 표현식 <a href=“javascript:;”> </a> 자주 사용하던 사이트의 버튼이 작동하지 않아서 dev tool을 켜보았다. 3개의 a 태그가 있고 위에 부터 순서대로 이전버튼, 바로 배포하기 버튼, 바로 저장하기 버튼이다. 이전 버튼은 잘 작동하는데, 바로 배포하기와 바로 저장하기 버튼이 작동하지 않았다. 코드를 보니 자바스크립트 함수가 a href 의 형식으로 지정이 되어 있었다. 버튼을 통해 다른 페이지로 이동하는 경우, 나는 주로 onclick을 통해 이벤트를 걸어놓는 형식으로 작업을 했었다. 그래서 처음보는 형식이라 어떤 방법인지 찾아보았다. 📌 href 표현식 onclick을 줄여서 코딩하는 방법인듯 하다. 내가 생각했던 문제의 원인 위에 코드를 보면, 잘 작동하는 '이전' 버튼에 대한 코드에서는 href='javascript: 뒤에 함수 이.. 2022. 10. 8.

[React] react-scroll 라이브러리 사용법 및 주의사항 https://www.npmjs.com/package/react-scroll react-scroll A scroll component for React.js. Latest version: 1.8.7, last published: 6 months ago. Start using react-scroll in your project by running `npm i react-scroll`. There are 606 other projects in the npm registry using react-scroll. www.npmjs.com 사용 순서 1. 설치하기 npm install react-scroll 2. 불러오기 다 불러올 필요는 없고, 쓸 것들만 불러오면 된다. import * as Scroll from.. 2022. 10. 3.

[CSS] body 윗부분 빈 칸 없애는 법 CSS 작업을 하던 중, 상단 네비게이터 부분의 윗부분이 창 상단과 떨어지는 문제가 있었다. const HeadWrap = styled.div` ... top: 0; ... `; top을 0으로 주면 위에 붙게 할 수 있다. 생각보다 간단한 문제였다. 2022. 10. 1.

[CSS] 클릭 이벤트가 있으면 커서 모양 바꾸기 개인 포트폴리오 사이트를 만든 후 코드 리뷰 과정에서 클릭 이벤트가 있는 부분 위에 마우스가 올라가면 커서 모양이 바뀌면 더 좋을 것 같다는 피드백을 받았다. 아무래도 커서 모양이 그대로 유지되다 보니, 그 부분을 클릭했을 때 외부 링크로 연결된다는 것을 잘 모를 수 있겠다는 생각이 들었다. 리액트로 작업해서 CSS에는 styled-components를 사용했는데, 그냥 CSS에도 적용되는 것인지는 잘 모르겠다. const Menu = styled.p` ... &:hover { cursor: pointer; } `; 위와 같이 추가해주면, 메뉴 스타일을 지정해준 컴포넌트 위에 마우스 호버시 커서 모양이 손가락 모양으로 바뀐다! 2022. 10. 1.

이전 1 ··· 9 10 11 12 13 14 15 ··· 19 다음

티스토리툴바