개발 개맛집

firebase를 공부하다 firebase.json에 대한 정리 글이다. .json 의 개념부터 보자 JSON은 속성-값 쌍 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 을 위해, 넓게는 XML을 대체하는 주요 데이터 포맷이다 -참고 위키백과 firebase.json의 활용 1. firebase deploy를 하려면 firebase.json 파일이 필요하다. 2. firebase.json은 firebase init으로 자동 생성된다. 3. firebase.json은 내 프로젝트가 어떤 디렉토리를 통해 배포할 지 설정한다. 4. 앱 1-1 왜 firebase.json이 필요한가? - firebase..

웹 제작을 하며 서버 연결, 회원가입, 인증 보안 등의 문제로 겉핥기 식으로 하던 Firebase를 상세하게 파헤쳐 보려 한다. 나와 같이 프로젝트 형식으로 Firebase를 이용하는 사람이나, Firebase를 깊은 곳까지 궁금해하는 사람들에게 도움이 되었으면 좋겠다. Visual Studio Code, Node.js, window os를 기본으로 작성되었습니다. 리액트 패키지를 설치하고 난 후 정리 글입니다. 리액트를 설치하고 터미널에서 cd(change directory로 생성된 최상위 파일로 이동한 뒤 파이어 베이스를 실행해야 한다. 1. 파이어 베이스 설치 전체 Firebase tool다운 명령어 npm install -g firebase-tools - vsc(Visual Studio Code)..

하루 4시간 자면서 마감 기간을 지키기위해 달렸던 지난 나날.. 짧은 기간동안 빡세게 배우면서 내가 느낀 것들을 정리한 내용이다. 시행착오는 없을 수가 없다... 한 화면을 구성할 때 font-size = rem -> 모바일 및 웹에서 글자 크게 보기 설정을 해뒀거나, 작게 보기 설정 시 핸드폰 설장에 맞게 크기 변화 padding, margin = em -> 상위(root)의 사이즈에 맞게 변화한다. (비약적인 예시로: 상위의 font-size: 4 rem이고, padding: 1em이라면 우리 눈에 1cm가 준다, 상위의 font-size: 2 rem이고, padding: 1em 일 경우 0.5cm가 줄어들며 이는 반응형에 유리하다. image = px px=절대값 으로 어떠한 모니터 사이즈에도 일정..

웹을 제작하다가 모니터 내에 헤더를 포함하고, 딱 맞게 화면 구성을 하고 싶었습니다. 스크롤 시 다음 section으로 보이게 하는것이 요구사항이었습니다. 여기서 스크롤 한 번만 하면 아래 footer가 보이게 하는 것이죠 다시 본론으로 와서 모니터에 화면이 꽉 차게 구성하는 방법은 1. header의 height를 알아낸다 2. main화면에 넣을 이미지든 동영상이든 이를 묶고 있는 상위의 root태그를 찾는다. 4. calc ☆를 이용하여 계산해 준다. (calc는 계산기로 이용하는 CSS function입니다.) 5. 부모태그에 중괄호를 열고 넓이는 %, 높이는 100vh(모든 모니터에 100%로 보여주겠다) calc를 이용하여 header의 height를 빼준다. (보통 다른 웹사이트는 80px,..

웹 사이트 제작 중에 파일 이미지를 변경해야 하는 일이 생겼다. 밤에 제작하느라 뇌가 굳어버려서 한참을 고민했는데 손쉽게 해결하는 방법을 발견하여 글을 적게 되었다. 디자이너 혹은 프런트 개발 연습을 위해 웹 사이트를 만드는 사람에게 도움이 되었으면 좋겠다. 내가 만들고 있는 웹 사이트의 Vision과 Mission이미지이다. 첫번째 시도 body에 검정 배경을 주어 img마다 background-color: white 를 주었다. 그러나 사진과 같이 흰 배경이 마음에 들지 않았다. 한참을 찾아보니 fill: 속성을 이용하여 수정 하는 방법이 있었는데 내가 원하는 색을 줄 수 있다곤 하지만 적용에 실패했다 두 번째 시도 반전 속성 filter: invert(100%); 이것을 이용하면 내가 원하는 검정배..

flex-grow 컨테이너를 꽉 채우기 위해 늘어난다. flex-grow를 사용하지 않으면 페이지가 작아지던 커지던 일정한 사이즈를 유지하지만, flex-grow를 사용하면 페이지에 맞춰 그에 해당하는 사이즈를 유지한다. item1에 flex-grow:3 item 2에 flex-grow:1 item3에 flex-grow:1 적용된 모습 item 1은 3배만큼 커진다. flex-shrink 페이지가 작아지면 어떻게 적용할지 지정한다. 페이지가 줄어들 때 flex-shrink: 숫자만큼 주어 줄어들 경우 어떠한 사이즈로 줄어들지 정해준다. 기본값은 0이다. 페이지가 줄어들 때 flex-shrink:3으로 준 item1은 3배로 줄어든다. flex-basis 아이템들이 공간을 얼마나 차지해야 하는지 세부적으로..

justify-content: 중심축에서 아이템들을 어떻게 배치할지 결정한다. 1. justify-content: flex-start: 왼쪽을 기준으로 배치 2. justify-content: flex-end 오른쪽을 기준으로 배치 flex-direction: row-reverse와 유사하지만 배치 순서가 바뀌지 않는다는 차이점이 있다. 3. justify-content: center 가운데 배치 4. justify-content: space-around 각 박스마다 spacing이 들어가 있다 ▶ 1번과 10번이 벽 쪽에 붙어있다. 5. justify-content: space-evenly 각 박스마다 동일한 spacing이 들어가 있다. ▶ 1번과 10번도 똑같이 떨어짐 6. justify-conte..

Flex Box를 배우려고 한 이유 Flex Box는 Box와 Item들을 행과 열로 자유롭게 배치할 수 있는 CSS의 꽃이라고 할 수 있다. 웹사이트의 레이아웃을 구성하는데 대부분을 Flex Box를 사용하면 좋다고 멘토님께 들었다. 그전에 내가 만든 웹사이트는 Flex Box를 쓰지 않고 죄다 position, float를 이용하여 때려 넣었는데 그러다 보니 하나의 아이템 수정 시 다른 부분이 틀어지는 일도 많았고, 코드 양도 많았다. 멘토님께서 Flex Box를 쓰면 코드를 줄일 수 있고, 자유롭게 배치할 수 있는 이점이 있어서 무조건 필수적으로 알아야 한다고 했다. 그래서 정리해보는 Flex Box 내용이다. Flex Box의 이해 1. container 박스에 적용되는 속성이 존재한다. 2. 각..