본문 바로가기

분류 전체보기

 (134)
2021-06-24 :: 로그인, 회원가입 만들기1 중복되는 부분에 대해서 custom hook을 제작한다. 쭉 쓰고 완성한 뒤 중복되는 부분을 제거하는 것을 추천한다. 사소한 차이로 중복이 아닌 경우도 있다. SPA submit에서 e.preventDefault() useCallback 자체가 해당 함수를 해싱해두는 것 deps의 값이 바뀔 때만 리랜더링 해준다. 성능 최적화 커스텀 훅 만들기 state와 input의 onChange email과 nickname은 같은 형식을 공유한다. 이 때 custom hook을 만든다. hooks/useInput.ts import {Dispatch, SetStateAction, useState, useCallback } from "react"; const useInput = (initialData: T): [T, ..
2021-06-24 :: 코드 스플리팅과 이모션 웹사이트가 커지면 수백 페이지가 되지만 이를 하나의 js파일로 만든다면 엄청 느려진다. 화면 랜더링이 3초이상 걸리면 안된다. 필요한 컴포넌트를 필요할 때 불러온다. 어려운 점은 어떤 기준으로 컴포넌트를 구분할 것인가? 먼저 페이지 별로 구분한다. 서버사이드 랜더링이 필요없는 애들도 서버와 별개로 작동하도록 스플리팅 해준다. npm i @loadable/component npm i --save-dev @types/loadable__component 이 패키지로 스플리팅을 진행하겠다. 페이지 단위로 대충 코드 스플리팅을 해주고 굳이 더 신경쓰지 말자 css의 여러가지 선택지가 있다 inline cssmodule className과 연결 css in js, emotion 설정이 간단하다, 서버사이드 랜더링 ..
2021-06-23 :: 폴더 구조와 리액트 라우터 폴더구조 프로젝트별로 많이 다르다. 뭘 사용해도 크게 상관없다. oldschool //container //components //pages - 서비스 페이지 //components -페이지의 컴포넌트들 //layouts -페이지들간의 공통 레이아웃 SPA지만 결국 페이지가 다 있다 그냥 페이지 안에 폴더를 만들고 그 안에 index와 style을 둔다. webpack.config.ts alias: { // 경로 간소화 '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path...
2021-06-23 :: 웹펙 데브 서버 세팅하기 만약 변경 사항이 있으면 webpack을 다시 돌려줘야한다. npm run build해야함 수정 하나 수정할 때마다 리로딩 하려면 속터짐 그래서 hot reloading을 사용한다. CRA에서는 원래 설정을 해준다. 서버 관련된 설정이다. npm i webpack-dev-server -D 옵션 -D는 개발용이다. 위 패키지는 proxy server설정에도 이용된다. cors를 해결할 때 쓴다. npm i -D @types/webpack-dev-server npm i @pmmmwh/react-refresh-webpack-plugin npm i raect-refresh 이거 설치하는거 그냥 다 CRA에서 하는거 수동으로 하는거다. 다 외울 필요 없고 필요하면 공식문서 뒤져보자 npm i fork-ts-che..
2021-06-23 :: babel과 webpack 설정하기 ts => babel => js Webpack webpack 공통 패키지 npm i -D webpack @babel/core babel-loader @babel/preset-env @babel/preset-react ts용 패키지 npm i -D @types/webpack @types/node @babel/preset-typescript css관련 패키지 npm i style-loader css-loader 설치시에 오타나면 재빠르게 ctrl+C를 눌러 중단하도록 하자 webpack.config.ts ts에서 변수명 뒤에 : 변수의 타입을 더욱 엄격하게 한다. js로 사용하고 싶다면 :뒤의 변수형태 내용을 삭제하도록 한다. webpack설정을 통해 .env 사용 가능하게 하기 원래 노드 런타임, 백앤드에..
2021-06-23 :: 프론트앤드 세팅하기 프론트앤드 세팅하는데 시간이 제법 소요가 된다. setting 폴더에 기본적인 세팅이 다 되어있다. lecture 폴더에 세팅을 적용하도록 하자. strict 모드, 타입을 더욱 엄격하게 확인한다. javascript 생태계가 점점 더 typescript로 옮겨가고 있다. 맥이 편한 이유는 bash terminal을 사용하기 때문이다. bash를 사용하면 오류가 발생할 확률이 높다. react에서 프로젝트를 시작할 때 항상 npm init으로 시작을 해야한다. => package.json 생성 package.json 파일에서 name을 제외하고는 크게 중요하지 않다. name은 npm의 package이름과 중복되지 않도록 유의하도록 하자. npm 패키지 설치는 명령어 npm i {packageName}으..
MySQL macOS 설치하기 https://thebook.io/080229/ch07-01/ Node.js 교과서 개정 2판: 7장 MySQL - 1 thebook.io 지금까지는 모든 데이터를 변수에 저장했다. 변수에 저장했다는 것은 컴퓨터 메모리에 저장했다는 뜻이고 서버가 종료되면 메모리가 반환되면서 데이터 역시 소멸된다. 이를 방지하기 위해 데이터베이스를 사용한다. 이 장에서 공부할 MySQL은 SQL언어를 사용하는 관계형 데이터베이스 관리 시스템이다. 데이터베이스란? 데이터베이스는 관련성을 가지며 중복이 없는 데이터들의 집합이다. 이러한 데이터베이스를 관리하는 시스템을 DBMS이라고 한다. 보통 서버의 HD, SSD에 데이터를 저장하며, 저장 매체가 고장나거나 사용자가 직접 지우지 않은 이상은 데이터가 보존되므로 서버가 종료되..
2021-06-22 :: React로 스탑워치 만들기 const [timer, setTimer] = useState(0); const [isActive, setIsActive] = useState(false); const countRef = useRef(null); const startTimer = () => { if (!isActive) { setIsActive(true); setTimer(0); countRef.current = setInterval(() => { setTimer((timer) => timer + 1); }, 10); } }; const stopTimer = () => { setIsActive(false); clearInterval(countRef.current); }; timer에 시간이 저장이 되고 아래와 같이 formatting을 ..

티스토리툴바