전체 글 (47) 썸네일형 리스트형 Firebase| 로그인 구축하기 우선 firebase 콘솔 페이지에서 Authentication 에서 사용할 구글과 깃허브를 켜줘야한다. 깃허브는 인에이블 페이지에서 주어지는 주소를 Settings-OAuth Apps-New OAuth App을해서 이름을 써주고, 홈페이지 URL(없으면 아무거나 써줘도됨) 작성해주고, 맨 아래 Authorization callback URL에는 firebase에서 제공한 주소를 넣어준다. 그렇게 만들어주면 Client ID와 비밀번호가 주어진다. 그대로 복사해와서 firebase 깃허브 인에이블 창에 붙여넣기 해준다. 그럼 firebase에서 로그인 제공업체 켜기 끝! 이제, 만드려는 프로젝트 폴더에 auth_service.js 파일을 만들어준다. class AuthService{ login(){} }.. Firebase| 시작 전, 초기화 setup하기 파이어베이스를 초기화하는 전용 파일을 만들 것이다. src 폴더에 service폴더를 만들어놓고 파이어베이스 전용 파일을 만든다. 그 다음, cmd에다가 yarn add firebase해서 필요한 파이어베이스를 추가해준다. 설치가 완료 된 후에 package.json파일로 가서보면 이렇게 파이어베이스가 추가되었을 것이다. 그리고 이렇게 파이어베이스에서 주어지는 SDK를 복사해서 우리의 firebase.js 파일에 붙여넣기 해준다. 그런데 이 코드에는 apikey가 있기때문에 공유할 때 문제가 될 수 있다. 그렇기 때문에 env로 key값을 빼주는 작업을 할 것이다. 상위 폴더에 .env파일을 만들어 준다. REACT_APP_FIREBASE_ 그리고 env파일에서는 항상 REACT_APP_이라는 프리픽스를.. PostCSS에서 root로 간편하게 코딩하기 (@value) 프로젝트에서 많이 쓰이는 색상들이 존재하는데 css할 때 이 색상을 하나하나 부르는 것보다 미리 root로 정해줘서 그 값을 부르는게 더 간편하다. 이유는, 만약 색상을 변경해야하는 상황이 온다면 제일 상위 root로 가서 한번만 변경하면 모든 값이 변경되기 때문이다. 먼저 src폴더에서 common이나 base폴더를 만들어준다. 그 안에 ui인지 유틸리티인지 또 폴더로 나누어서 만들어줘도 됨. 그 안에는 colors와 size CSS파일을 만들어준다. @value key: value; 그리고 postCSS에서는 이렇게 value를 사용해서 key와 value로 정의해준다. @value mediaQuery: 62rem; size.css에는 미디어쿼리를 설정해준다. 그럼 나중에 사이즈를 변경할때도 컴포넌트.. Webpack| 최소 설정으로 프론트엔드 개발 환경 구축하기 1. 우선 cmd나 터미널에 설정할 폴더로 들어간다. 2. npm init -y 명령어로 init을 해줘서 package.json파일을 만들어 준다. 3. npm i -D webpack webpack-cli 웹팩 관련된 라이브러리를 이 명령어로 설치한다. "devDependencies": { "webpack": "^5.38.1", "webpack-cli": "^4.7.0" } 그럼 package.json파일안에 devDependencies부분에 보면 "webpack-cli가 설치된 것을 볼 수 있다. 4. "scripts": { "build": "webpack" }, 그리고 scripts 부분에 기존에 있는 test부분을 지우고, build라고 설정을 해준다. 5. 웹팩은 최소한의 옵션을 설정해줘야 하기.. setInterval API setInterval은 주기적으로 계속 호출할 수 있는 API. let timerId = setInterval(myFunction, 2000); 2초마다 주기적으로 나의 함수를 실행시켜줌. clearInterval(timerId); 그리고 clearInterval을 하면 setInterval을 중지시켜준다. 퍼포먼스 개발 툴 사용하기🧨 성능 체크를 하기위해서는 개발툴에서 Performance를 클릭해서 Record를 클릭하고 확인하고 싶은 동작을 수행한다. 좋은 성능은 1초당 60개의 프레임이 계속 보여지는 것이 좋다. 이럴려면 이벤트를 처리하고 브라우저에 표기되는것이 16ms동안 끝나야한다. 이렇게 초록색이 나온것이 좋은 것. 성능이 떨어지면 빨간색 줄이 나온다. 클릭해서 보면 더욱 상세한 정보를 알 수 있다. CSS Triggers 사이트 Blink 는 크롬과 V8, Gecko는 파이어폭스, WebKit은 iOS 사파리, EdgeHTML은 엣지브라우저 에서 쓰인다. 첫번째 칸은 기본값에서 변화될 때, 두번째 칸은 주기적으로 업데이트 될 때를 나타낸다. 최대한 composite만 일어나는게 좋다. Layout이 일어나면 성능 차원에서 좋지 않음. http://csstriggers.com/ CSS Triggers @PROPERTY_DESCRIPTION@ B G W E Change from default B G W E Subsequent updates csstriggers.com React Router란? 쉽게 말해서 어떤 페이지로 연결 할 건지를 결정하는 것. 대부분의 웹 사이트들은 여러가지 페이지로 나뉘어져 있다. 이 다양한 페이지들을 이동할 수 있게 해주는 것이 Router. React는 싱글페이지를 쉽게 만들 수 있는 라이브러리다. 싱글페이지란? 하나의 url로 그 안에서 다른 링크를 클릭했을때 새로운 페이지가 열리지 않고 부분적인 내용만 업데이트 되는것. 이런 싱글페이지의 문제점은 사용자가 원하는 부분을 북마크 할 수 없고 브라우저상에서 뒤로가기 앞으로가기가 추가 되지 않는다. 이런것을 보완하기 위해서 싱글페이지를 유지하면서 url을 붙일 수 있게 해주는 것이 리액트 라우터이다. 이전 1 2 3 4 5 6 다음
