프론트 앤드 개발자의 공부는 멈추지 않는다.
1.Service worker를 간단하게 사용해자
저번 면접을 통해 PWA의 존재에 대해 알게 되었었다.PWA를 간단하게 말해보자면, PWA는 앱과 웹의 장점들만 합친걸로 html,css,js등을 클라이언트 캐시에 저장해둬 앱처럼 사용할 수 있도록 하는 것이다.PWA의 장점은 정말 앱처럼 사용할 수 있다. Twitte
2.원형 프로그스바를 React에서 만들어보자
한번도 그래프, 차트 같은 것을 만들어 본적이 없지만 저장소의 용량을 표현하기 휘해 사용해보았다.나의 목표:다른 본부에서 사용하고 있는 라이브러리가 있는 것같지만, 나는 그 본부 소속이 아니므로 사용하지 못하고.. 찾아본 결과, CircularProgressbarWit
3.라인 그래프를 React에서 그려보자
자, 오늘은 라인 그래프를 그려야한다. 목표는 아래와 같다.저번 포스팅에서 말한대로 나는 그래프를 그려본 적이 없으므로, 오늘도 차근차근 배우면서 작성해보자구.위의 그래프는 react-highcharts 라이브러리 에서 ReactHighcharts를 import해서 사
4.사이트 헤더 고정하기
대부분의 웹 사이트들은 헤더를 고정시켜, 언제든 헤더의 메뉴를 바꿀 수 있도록 한다. 이 부분에 대해서는 저번에 스크롤 업 버튼에서 사용한 scroll function에 추가했다.header component에 id를 'header'라고 설정한 후, window가 on
5.스크롤을 감지해 헤더를 숨기고 보여주기
헤더를 고정시키는 작업까진 완수했지만, 헤더를 고정시킴으로 인해 단점들이 생겨났었다. 예를 들어, 메뉴를 눌렀을 때, 해당 장소로 이동하긴 하는데 타이틀이 있어야할 곳에 헤더가 가려버린다는 것이다. 이렇게 아니라 아래처럼 보여야한다.헤더는 고정하고싶고, 타이틀은 보여주
6.React Typescript에서 firebase 연동하기
https://firebase.google.com/?hl=ko 접속한다.시작하기 버튼을 누른다.프로젝트 추가 버튼을 누른다.프로젝트 이름 입력한다.계속 버튼을 누른다.Google 애널리틱스 구성에서 Default account for firebase 누른 후,