캐나다 개발자

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..

# Day 03 목표 # Study - 알고리즘 - 백준 2839번 (完) - JS 면접공부 (完) - PWA 배포 공부 및 구현 (完) - TS 2~2.4 - React Query 공부, 이것저것 구현 (完) - 우아한테크세미나 리액트쿼리 보기 (完) - 백재님 리액트쿼리 이모션 강의 (完) # Project - 파이어베이스 환경변수 설정 (完) - 로그인 회원가입 로그아웃 기능테스트 종료 (完) - 로그인 회원가입 로그아웃 기능 Query로 변경 (完) - 소셜로그인 Redirect쪽 페이지 생성 (完) - 로딩, 에러 페이지 틀 (完) - 정규식세팅 (完) - 쿠키세팅 (完)

https://www.acmicpc.net/problem/2839 2839번: 설탕 배달 상근이는 요즘 설탕공장에서 설탕을 배달하고 있다. 상근이는 지금 사탕가게에 설탕을 정확하게 N킬로그램을 배달해야 한다. 설탕공장에서 만드는 설탕은 봉지에 담겨져 있다. 봉지는 3킬로그 www.acmicpc.net vs code에서 진행했다 단순 수학이었다. const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs.readFileSync(filePath).toString().split(" "); // 백준 문제풀어보는곳 const solution = () => { ..

같은 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..

# Day 02 목표 전체적인 구조 # Study - Emotion vs Styled-component - SWR vs Toolkit vs React Query 이해 - CORS 와 PROXY - SWR 맛보기 - 프로젝트 전체세팅, 로그인, 회원가입 기능 완료(SWR or Toolkit) # Project - Prettier, Eslint 사용한 초기세팅 - 폴더구조 및 라우터 - .env 환경변수 정리 계획 - 오전 - Emotion vs Styled-component - SWR vs Toolkit vs React Query 이해 - CORS 와 PROXY - SWR 맛보기 - 오후 - Prettier, Eslint 사용한 초기세팅 - 폴더구조 및 라우터 - .env 환경변수 정리 - 프로젝트 전체세..

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..