TIL 210524

CSS Tips

flexbox 사용시 제일 마지막 item만 제일 오른쪽에 위치하고 싶을 때 (아래 두번째 처럼) 중앙 item에 flex : 1 이라는 style을 추가하면 된다.

div:nth-child(2) {
  flex: 1;
}

이미지, 참고 출처

flex: 1 로 value 가 하나로 표현될 때는 flex: <number> 1 0 으로 number 값을 뜻한다. 가장 첫번째 자리는 flex-grow 값을 나타내고 이는 item의 메인 크기(부모)안에서 남는 영역이 있을때, 해당 item이 얼마나 grow할 수 있을지 알려주는 값이다. default 값은 0.

MDN:flex-grow

firebase emulator 와 Web Extension

현재 extension 개발 시에는 firesbase dev 환경 config를 사용하도록 되어있는데 개발 환경에서는 dev 의 Auth가 아니라, Auth emulator를 사용하도록 하고 싶었다. 하지만 Auth emulator가 익스텐션의 domain을 인식하지 못해 계속 unauthorized-domain error를 발생시켜 emulator 환경을 사용하지 못하게 되었다. 리포팅된 firebase-jdk 버그

저번주에 적용한 코드 watch 감지 -> 자동 build 도 무슨 이유에서인지 정상적으로 작동하지 않아 결국 반영하지 못했다. 코드 변경을 감지해서 build 후 re-load까지 하는건 eject 후 webpack config를 수정해야 하는 듯 보였는데 꽤나 복잡하고 시간이 걸려 결국 우선순위에서 다시 밀려났다.😢 개발에서 개발 환경 세팅도 매우 중요한데, 블로그 글대로 해도 안되는 경우가 많아서 어려운거 같다.