티스토리

캐나다 개발자
검색하기

블로그 홈

캐나다 개발자

devkevin0408.tistory.com/m

또롱또 님의 블로그입니다.

구독자
5
방명록 방문하기
공지 2023/06/23 - 블로그 다시 ⋯ 모두보기
728x90

주요 글 목록

  • React, Next - .env 파일 rules // 작성문법 React: REACT_APP_여기에작성 Next: NEXT_PUBLIC_여기에작성 // 부를때 process.env env, config 파일 - 변경시 프로젝트 재시작 공감수 0 댓글수 0 2022. 7. 3.
  • Frontend - 성능 측정 프론트엔드 성능측정 이유 아래 사진과 같이 성능에 따라서 유저들이 증가/감소 할수 있기 때문 프론트엔드에서 측정할수 있는 성능 - 로딩 - 첫 요소가 로드 될때까지 걸리는 시간 - 사용자한테 의미있는 요소가 첫 로드되는 시간 - 주요 컨텐츠가 로드되는 시간 로딩시간은 2.5초 까지가 good 4초 넘어가면 형펀없음 - 렌더링 - 사람이 자연스럽다 느끼는 초당화면수: 60 - 계산해보면 한 화면이 그려지는시간: 16/ms 미만 - 메모리 - 메모리 누수를 막아야한다. - 예)전역변수, 해제되지않은 타이머, 클로저 등 성능측정하는법: - 실시간 모니터링 도구, 리액트 프로파일러, 크롬 라이트하우스 등 성능측정시 고려할 것들 - 측정 환경 통일, 서비스 타켓 고려 - 크롬 익스텐션 종료하고 실행 - 실제 모바.. 공감수 0 댓글수 0 2022. 7. 1.
  • React -Chartjs 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".. 공감수 0 댓글수 0 2022. 6. 29.
  • React - Axios 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.. 공감수 0 댓글수 0 2022. 6. 28.
  • PWA란? Manifest란? Progressive Web Application 새롭고 강력한 소프트웨어 앱을 만드는 방식 html+css+js로 만든 웹앱을 웹브라우저의 API와 결합해서 크로스플랫폼에서 동작하는 어플리케이션을 만들수 있다. 안드로이드나 IOS처럼 특정 플랫폼에서 동작하는 native 어플리케이션은 사용자에게 다양한 기능을 제공하는 역량은 크지만, 그 플랫폼에서만 사용가능하다는 단점 웹앱은 플랫폼 상관없이 브라우저만 있으면 사용가능하다는 장점, 하지만 진짜 어플리케이션들처럼 플랫폼 자체를 사용할 수는 없다. PWA는 웹앱처럼 사용자들이 접근이 용이하고, 플랫폼도 사용 가능하다. - 스티브잡스가 제일먼저 생각했지만, 웹스토어 선택 - 그러다가 크롬개발자가 만듬 uber, youtube, spotify 등등이 pwa 기.. 공감수 0 댓글수 0 2022. 6. 26.
  • Ngrok으로 배포 - 임시로 배포할때 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.. 공감수 0 댓글수 0 2022. 6. 26.
  • React - CORS 오류 클라에서 처리 - proxy 설정 같은 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, }, }, }, 공감수 0 댓글수 0 2022. 6. 25.
  • React - 회원가입 비밀번호와 비밀번호를 체크하는 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.. 공감수 0 댓글수 0 2022. 6. 25.
  • React - REACT QUERY + 우아한테크세미나 정리 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가 가지는 많은 차이점들을 대응할 수 있도록, 잘 정리된 내장 함수들과 훌륭한 캐싱 기능을 제공 이들은.. 공감수 0 댓글수 0 2022. 6. 25.
  • React - Emotion 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.. 공감수 0 댓글수 0 2022. 6. 25.
  • React - Loadable Components를 통한 코드 스플리팅 Loadable Components는 코드 스플리팅을 편하게 하도록 도와주는 서드파티 라이브러리 이 라이브러리의 이점은 서버 사이드 렌더링을 지원한다(React.lazy와 Suspense는 아직 서버 사이드 렌더링을 지원안함). 또한, 렌더링하기 전에 필요할 때 스플리팅된 파일을 미리 불러올 수 있는 기능도 있다. 설치 // 일반 npm i @loadable/component yarn add @loadable/component // 타입 npm i --save-dev @types/loadable__component 사용방법 예시 import React from 'react'; import loadable from '@loadable/component'; import { Route, Routes, Navi.. 공감수 0 댓글수 0 2022. 6. 25.
  • Prettier 적용 안될때 1. Format on Save 확인 > vscode 설정에서 format on save를 입력하고 나오는 설정에 체크되어 있는 지 확인한다. 2. Default Formatter 확인 > 간혹 에디터의 default로 설정되어 있는 formatter가 null 이거나 설정이 잘못되어 있는 경우가 있다. 설정이 esbenp.prettier-vscode 로 설정되어 있는 지 확인해야 한다. 18 공감수 1 댓글수 1 2022. 6. 25.
  • React - Prettier, Eslint // 프리티어 설치 yarn add -D prettier // 에스린트 설치 yarn add -D eslint-plugin-prettier eslint-config-prettier 코드에서 안쓰는 변수나 함수를 잡아주는 extension // .eslintrc // 프리티어의 추천을 따르겠다. { "extends": ["plugin:prettier/recommended", "react-app"] } prettier(코드를 정렬해주는도구) // .prettierrc // 프리티어 내부 코드 { "printWidth": 120, "tabWidth": 2, "singleQuote": true, "trailingComma": "all", "semi": true } ), 공감수 0 댓글수 0 2022. 6. 24.
  • React - ProtectedRoutes (Private Router) // Outlet - 렌더링하는 영역을 구현하는 Directive import { Outlet } from "react-router-dom"; import Signin from '../../Pages/Signin' const useAuth = () =>{ const token = localStorage.getItem("Authorization") return token; } const ProtectedRoutes = () =>{ const isAuth = useAuth(); return isAuth !== null ? : } export default ProtectedRoutes; // 아래처럼 감싸주면 된다. 공감수 0 댓글수 0 2022. 6. 22.
  • React vs Vue 출처: https://nyol.tistory.com/148#:~:text=%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%8A%94%20%EB%B7%B0%EC%97%90,%EC%95%8A%EC%9D%84%EA%B9%8C%EB%9E%80%20%EC%83%9D%EA%B0%81%EC%9D%B4%20%EB%93%A0%EB%8B%A4. REACT VUE UI 라이브러리 VS 프레임워크 UI 라이브러리 - 필요한 라이브러리를 매번 설치 프레임워크 - 기본적으로 많은 기능이 내장 코드 형태 JSX형태로 코드를 작성해야한다 (js만 사용가능) Template, script, css 는 무조건 태그로 감싼 후 코드를 적용 가능. 컴포넌트 분리와 재사용 컴포넌트의 생성 및 재사용 (props, components).. 공감수 0 댓글수 0 2022. 6. 21.
  • React - Restful API 사용 하다 배운점 메소드 - patch, put, delete, post, get 1. get, delete는 body부분을 비워줘도 된다 2. patch, puth, post는 바디부분에 빈 값이라도 있어야 한다. 3. method(api주소, {바디}, {헤더}) 순서 // 헤더 - 인증이 필요할때 아래처럼 사용 가능(MyToken 은 쿠키에서 가져옴) const msg = await api.delete(`api/articles/${payload}`,{ headers: { 'Authorization': `Bearer ${myToken}`, } }); // patch의 경우 body 부분을 최소 빈 객체로라도 묶어서 보내준다. const data = await api.patch(`/api/articles/${id}/do.. 공감수 0 댓글수 0 2022. 6. 16.
  • React - 핵심모듈, a vs Link, NavLink 1. 리액트의 핵심 모듈 두가지 // 리액트 컴포넌트를 HTML Element에 연결 import ReactDOM from 'react-dom' //리액트 컴포넌트 만들기 import React from 'react' 2. a 태그와 Link Router의 차이 a태그는 이동되면 이동되면서 서버로부터 파일들을 새로 다시 가져온다. Link는 페이지가 이동되면서 서버로부터 파일을 안가져오고, 있는 파일중에 필요한 파일만 골라서 렌더링을 해준다. 3. NavLink - 태그가 눌리면 active라는 클래스가 붙는다. 그래서 그 클래스에 스타일을 주면 내가 어떤 링크를 클릭했는지 알수 있다. // App.jsx import {NavLink} from 'react-router-dom' import './App... 공감수 0 댓글수 0 2022. 6. 14.
  • React - useParam으로 경로 값 꺼내기 useParam을 사용하면 현재 경로를 가져올수 있다. 가져온 경로는 객체안의 배열로 감싸져 있다. 주로 필요한건 value값이라 value를 아래처럼 꺼내줄 수 있다. const navigation = useParams(); const emptyValue = Object.values(navigation); console.log(emptyValue[0]); 공감수 0 댓글수 0 2022. 6. 12.
  • React - 중첩 라우팅 라우팅을 하다보면 연결된 주소안에서 또 라우팅을 해야할 경우가 있다 최상단 경로에 와일드 카드로 주소를 주고(아래) 그 다음경로부터는 아래처럼 준다. 만약 어딘가에서 Link나 Navigate 할일이 있으면, 아래처럼 평소같이 들어가면 된다, ID: 0{id} {category} {title} {content} {time} 공감수 0 댓글수 0 2022. 6. 12.
  • React - 에러처리가 실험하고 싶을때, 강제로 에러주는법 에러를 줘야하는 타이밍에 아래처럼 throw new Error("에러메세지") 하면 된다. export const loadUsers = createAsyncThunk(LOAD_USER, async()=>{ const datas = await getDocs(collection(db, "newUser")); throw new Error("error"); const data_list = []; datas.forEach((doc)=>{ data_list.push({id: doc.id, ...doc.data()}); }); return data_list; }) 공감수 0 댓글수 0 2022. 6. 8.
  • React Redux Immer 설치 npm i immer yarn add immer 사용 import produce from 'immer'; 왜 리액트에서 불변성을 지켜야하나? https://hsp0418.tistory.com/171 리액트에서 불변성을 지켜주는 이유는 리액트가 상태 업데이트를 하는 원리 때문입니다. 리액트는 상태값을 업데이트 할 때 얕은 비교를 수행합니다. 즉 객체의 속성 하나하나를 비교하는게 아니라 참조값만 비교하여 상태 변화를 감지합니다. 이런 이유로 배열이나 객체를 업데이트 할때 setState([...state, newState]), setState({...state, [key]: value}) 이런식으로 배열이나 객체를 새로 생성해서 새로운 참조값을 만들어서 상태를 업데이트 합니다. 이런 행위가 불변성을 지.. 공감수 0 댓글수 0 2022. 6. 6.
  • React - Cookie https://doqtqu.tistory.com/303 설치 npm install universal-cookie --save yarn add universal-cookie --save Cookie는 왜 사용? 브라우저에 값을 저장하기 위해서. 저장된값은 수정, 삭제 그리고 가져와서 사용도 가능하다. 예) 로그인 된 사람에게 우리는 미니프로젝트 1주차에 토큰을 지급했다. 그 토큰이 유저들의 웹 브라우저 쿠키에 저장되어 있어서 그 사람이 모든 페이지를 이용 가능했다. 만약 쿠키에 로그인 된 사람의 정보(토큰 혹은 그 어떤거)가 저장이 안되있으면, 로그인 후, 메인페이지 구경하다가 다른 페이지를 보러갔는데 또 로그인 하라는 문제가 발생한다. Cookie.js // 설치된 패키지 import import Coo.. 공감수 0 댓글수 0 2022. 6. 5.
  • React - Redux Dev Tool https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko npm i redux-devtools-extension ComposeWithDevTools로 감싸준다. import { createStore,applyMiddleware} from "redux"; import rootReducer from './modules' import thunk from "redux-thunk"; import { composeWithDevTools } from 'redux-devtools-extension'; const middlewares = [thunk]; const enhancer = composeWithDe.. 공감수 0 댓글수 0 2022. 6. 4.
  • React Password Progress Bar yarn add bootstrap zxcvbn 더보기 PasswordStrengthMeter.jsx -> 이 컴포넌트 쓰려면 비밀번호를 props로 넘겨줘야함. import React from 'react' import zxcvbn from 'zxcvbn' export default function PasswordStrengthMeter({password}) { const testResult = zxcvbn(password); const score = testResult.score * 100/4; const funcProgressColor = () =>{ switch(testResult.score){ case 0: return '#828282' case 1: return '#EA1111' case 2: .. 공감수 0 댓글수 0 2022. 6. 2.
  • React - Hover할때 Other children select 항해 99의 기술매니저님이신 예매니저님은 정말 대단한거같다.. 실력도.. 끈기도.. import React, { useState } from "react"; import styled from "styled-components"; const App = () => { const [target, setTarget] = useState(0); // 마우스오버 된 대상 const [mouseIn, setMouseIn] = useState(false); // 모든 컴포넌트에서 마우스 오버 여부 확인 const onMouseOverHandler = (event, item) => { setTarget(item); // 마우스를 오버했을 때 해당 item의 값으로 target 변경 setMouseIn(Boolean(ev.. 공감수 0 댓글수 0 2022. 6. 2.
  • React Scroll motion yarn add react-scroll-motion import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, Move, MoveIn, MoveOut, Sticky, StickyIn, ZoomIn } from "react-scroll-motion"; const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn()); const FadeUp = batch(Fade(), Move(), Sticky()); {/* 기본 */} Let me show you scroll animation 😀 {/* 줌인->줌아웃 */} I'm FadeUpScrollOut ✨ {/* 페이드업 */} I'm FadeUp ⛅️ .. 공감수 0 댓글수 0 2022. 6. 2.
  • React - TypeScript: React에서 사용해보기 타입스크립트 적용된 프로젝트 설치 npx create-react-app ts-react-tutorial --template typescript 1. 컴포넌트에 type 적용해보기 App.tsx import './App.css'; import Greeting from './components/Greeting'; function App() { const name:string = "kim jun ho" // 이름 = string const height:number = 120; // 키 = number return ( // props로 받는쪽에서 string, number를 지켜줘야지 props가 무사히 넘어간다 ); } export default App; Greeting.tsx import React from.. 공감수 0 댓글수 0 2022. 5. 31.
  • React TypeScript - Interface 평소에 객체 만들때처럼 만들면 Typescript가 type을 줄수 없다. const obj = { name: "aa", age: 0, } 그래서 Interface라는 친구를 사용해서 type을 준다. 타입스크립트 Interface 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 직접 인스턴스를 생성할 수 없고 모든 메서드가 추상 메서드이다. -> 이게 무슨말이냐면, interface를 내가 데이터처럼 누구 보여주려고 못쓴다. -> 이 인터페이스는 그냥 겉옷같은녀석이라, 다른 객체한테입혀서 보내줘야한다 추상 클래스의 추상 메서드와 달리 abstract 키워드는 사용할 수 없다. TS에서만 interface를 지원한다.. 공감수 0 댓글수 0 2022. 5. 31.
  • React - TypeScript 기본 - 세팅 ~ 어떻게 타입을 입히는지 타입스크립트는 자바스크립트 문법을 그대로 이용할수 있지만, 타입 부분을 조금 업그레이드 해서 쓸수있는 JS의 업그레이드 버젼. JS문제점 5 - "3" 하면 "3"을 알아서 숫자로 바꿔서 계산해준다 - Dynamic Typing (편해보이지만, 프로젝트가 커지면 원하는 값이 없을때 에러찾기가 힘들다) TS 5 - "3" 에서 error를 띄워준다. 설치 npm install -g typescript 파일뒤에 js나 jsx 말고 ts를 붙히면 타입스크립트 파일이 된다. index.ts config 파일 생성 tsconfig.json 파일안에 넣을거 { "compilerOptions" :{ "target" : "es5", "module" : "commonjs", } } 브라우저는 ts파일을 못읽고 js파일을.. 공감수 0 댓글수 0 2022. 5. 31.
  • React - 제어 컴포넌트 vs 비제어 컴포넌트 비제어 컴포넌트는 ref 를통해 form element에 접근한다. 그래서 input value에 접근할때가 최종적인 버튼을 누르는 상황에만 접근한다. 그래서 화면을 재 렌더링 하는 순간이 버튼을 누르는 그 순간이지만, 사용자의 입력의 가장 최신값에는 접근이 힘들다. 반면에 제어 컴포넌트는 사용자의 입력에 따라 state가 동기화 된다. 대표로 onChange()가 있고, input 유효성 검사를 할 때 용이하다. 항상 최신 값을 유지하는 특성에 따라, 현재 input의 value가 유효한지 안한지에 대해 검사를 실시간으로 한다. 그런데, 사용자 입력이 있을 때 마다 재 렌더링이 되어서, 불필요한 재 렌더링이 될 수도 있다. 공감수 0 댓글수 0 2022. 5. 31.
    728x90
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.