캐나다 개발자

// 작성문법 React: REACT_APP_여기에작성 Next: NEXT_PUBLIC_여기에작성 // 부를때 process.env env, config 파일 - 변경시 프로젝트 재시작

프론트엔드 성능측정 이유 아래 사진과 같이 성능에 따라서 유저들이 증가/감소 할수 있기 때문 프론트엔드에서 측정할수 있는 성능 - 로딩 - 첫 요소가 로드 될때까지 걸리는 시간 - 사용자한테 의미있는 요소가 첫 로드되는 시간 - 주요 컨텐츠가 로드되는 시간 로딩시간은 2.5초 까지가 good 4초 넘어가면 형펀없음 - 렌더링 - 사람이 자연스럽다 느끼는 초당화면수: 60 - 계산해보면 한 화면이 그려지는시간: 16/ms 미만 - 메모리 - 메모리 누수를 막아야한다. - 예)전역변수, 해제되지않은 타이머, 클로저 등 성능측정하는법: - 실시간 모니터링 도구, 리액트 프로파일러, 크롬 라이트하우스 등 성능측정시 고려할 것들 - 측정 환경 통일, 서비스 타켓 고려 - 크롬 익스텐션 종료하고 실행 - 실제 모바..

npm i --save react-chartjs-2 chart.js https://www.npmjs.com/package/react-chartjs-2 Bar import React from "react"; import { Bar } from "react-chartjs-2"; function BarChart({ chartData }) { return ; } export default BarChart; App import React from "react"; import BarChart from "./Components/BarChart"; import RadarChart from "./Components/RadarChart"; import LineChart from "./Components/LineChart"..

npm install axios yarn add axios Axios란 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP비동기 통신 라이브러리이다. 기능 브라우저 환경 XMLHttpRequests 요청 생성 Node.js 환경 http 요청 생성 Promise API 지원 요청/응답 차단(Intercept) 요청/응답 데이터 변환 취소 요청 JSON 데이터 자동 변환 사이트 간 요청 위조(XSRF)보호를 위한 클라이언트 사이드 지원 기본 사용방법 // Async await을 통한 방법 import axios from 'axios'; async function getUser() { try { const response = await axios.get('/userinfo'); cons..

Progressive Web Application 새롭고 강력한 소프트웨어 앱을 만드는 방식 html+css+js로 만든 웹앱을 웹브라우저의 API와 결합해서 크로스플랫폼에서 동작하는 어플리케이션을 만들수 있다. 안드로이드나 IOS처럼 특정 플랫폼에서 동작하는 native 어플리케이션은 사용자에게 다양한 기능을 제공하는 역량은 크지만, 그 플랫폼에서만 사용가능하다는 단점 웹앱은 플랫폼 상관없이 브라우저만 있으면 사용가능하다는 장점, 하지만 진짜 어플리케이션들처럼 플랫폼 자체를 사용할 수는 없다. PWA는 웹앱처럼 사용자들이 접근이 용이하고, 플랫폼도 사용 가능하다. - 스티브잡스가 제일먼저 생각했지만, 웹스토어 선택 - 그러다가 크롬개발자가 만듬 uber, youtube, spotify 등등이 pwa 기..

1. 가입 https://ngrok.com/ ngrok - Online in One Line Zero Trust Add SSO, Mutual TLS, IP Policy, and webhook signature verification. ngrok.com 2. 다운 3. 실행 4. 사이트 가입할때 아래같은 글 아래에 autoken 있다. 그 토큰을 ngrok를 실행하고 복붙한다 2. Connect your account Running this command will add your authtoken to the default ngrok.yml configuration file. This will grant you access to more features and longer session times. Run..

같은 local에서 테스트 할 경우에서만 해결가능하다. Webpack.config에서 proxy를 서버로 이어주면 된다. devServer: { historyApiFallback: true, port: 3090, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, proxy: { '/api/': { target: 'http://localhost:3095', changeOrigin: true, }, }, },

비밀번호와 비밀번호를 체크하는 input이 있을경우 두개의 state값을 비교해서 값이 같고 다름을 비교했었다. const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); useEffect(()=>{ if(password !== passwordCheck){ //... logic } }) 강의보면서 알게된 새로운 방법 const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); // 비밀번호만 체크해 주는 State const [mismatchError, setMi..

https://www.youtube.com/watch?v=MArE6Hy371c 상태관리란? 주어진 시간에 시스템을 나타내는 것 Redux VS SWR VS React Query 셋 다 상태관리다 Redux - Saga 혹은 Thunk가 있어야지 비동기 처리 가능, 코드가 길다 SWR 하고 React Query는 위를 해결하고자 나왔다 1. SWR이 React Query보다 훨씬 가볍다 2. SWR은 가비지컬렉션이 없다. 3. SWR은 mutation hook을 지원하지 않는다. React Query 렌더링 퍼포먼스를 높이기 위해 데이터를 최적화한 점과 자동으로 가비지 컬렉션을 지원 server state가 가지는 많은 차이점들을 대응할 수 있도록, 잘 정리된 내장 함수들과 훌륭한 캐싱 기능을 제공 이들은..

Emotion의 장점 component로 만들어 재사용 중복되는 className 해결 (Global namespace) 자바스크립트에서 쓰이는 상수, props, 함수 공유하기 상속에 의한 영향이 없도록 격리 (Isolation) 미사용 코드 처리 (Dead Code Elimination) Styled Components 보다 조금 가볍다고 한다. npm install @emotion/styled @emotion/react 일단 전체적으로 Styled-Components 처럼사용 가능하다. import styled from '@emotion/styled'; export const Header = styled.header` text-align: center; font-family: Slack-Larsse..