Mi Lugarcito

npm i babel-plugin-styled-components // front npm i swr // hook!! 로드할때 편함!! 서버사이드 렌더링도 된다, front npm i moment // front - 날짜 라이브러리 npm run build //front npm i @next/bundle-analyzer npm i cross-env // .env 파일 개발/배포모드 , 윈+맥 다 돌아가게 하기 위해서 server side randering 처음 브라우저 접속햇을때 한번에 바로 벡엔드 서버로 가서 유저 정보 및 게시글 정보 받아와서 화면에 뿌려줌 즉, 요청 1번만 하면 되서 초기 로딩 속도가 빨라지는듯한, 컨텐츠가 빨리 보여지는 듯한 느낌을 준다. 서버사이드 랜더링의 주체는 프론트 서버가 ..

front : 3000/ back : 3065 npm init // package.json -> npm install or npm i -> download npm i express // server npm i sequelize sequelize-cli mysql2 // server npx sequelize init //server npx sequelize db:create // server node app //server npm i -D nodemon@2 //server npm i bcrypt // password, server npm i cors // server, middleware 설치하기 npm i passport passport-local //이메일, 아이디 로그인 npm i express-se..

likejirak.tistory.com/48 [총정리] useEffect(), useMemo(), useCallback() Hook 유의사항 Hook은 순서가 매우 중요 최상위 바깥에 선언해서 실행순서가 일정하게 하는 것이 중요 if문에 넣는것 금지 -> if(조건) useState(값) hook안에 hook을 쓰는것 금지 -> useEffect안에 useState를 likejirak.tistory.com velog.io/@lllen/useEffect [react] useEffect / useMemo / useCallBack / React.memo 두 번째 인수 배열에 넣은 값들이 바뀔 때 useEffect가 실행된다.배열에 값을 안넣으면 어떤 값이 바뀌든 useEffect는 한번만 실행하고 종료한다는 ..

npm i next@9 //front npm i react react-dom //front npm i prop-types// front npm i eslint -D // front npm i eslint-plugin-import -D //front npm i eslint-plugin-react -D // front npm i eslint-plugin-react-hooks -D //front npm i antd styled-components @ant-design/icons // front npm i @ant-design/icons // front npm i next-redux-wrapper //front npm i redux//front npm i react-redux // front npm i redu..

Prop ? 부모 컴포넌트 -> 자식 컴포넌트로 무언가를 보낼때 (위->아래로만 상속이 가능하며 변경 불가능함) State ? 그냥 컴포넌트 자체 안에서 데이터를 전달할때, 변경가능함 (데이터가 변할때 rerendering 된다!) render ? 안에 들어가있는 jsx(html)요소들을 DOM 에다가 알맞게 넣어서 화면 보여주는것 ONLY React React 실행 순서 : constructor 실행 -> render -> (update) -> componentDidMount React 끝내기 : 바로 componentWillUnmount USING React HOOK React 실행 순서 : constructor 실행 -> render -> (update) -> useEffect (componentD..

Proxy 란? - 아이피를 프록시 서버에서 임의로 바꿔 버릴수 있다. 그래서 인터넷에서는 접근하는 사람의 아이피를 모르게 된다. - 보내는 데이터도 임의로 바꿀 수 있다. - 방화벽 기능, 웹필터 기능, 캐쉬 데이터, 공유 데이터 제공 가능 Proxy 서버 사용하는 이유? - 회사/집 인터넷 사용 제어 - 캐쉬를 이용해 더 빠른 인터넷 이용 제공 - 더나은 보안 제공 - 이용 제한퇸 사이트 접근 가능

github.com/jaewonhimnae/boilerplate-mern-stack jaewonhimnae/boilerplate-mern-stack Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX - jaewonhimnae/boilerplate-mern-stack github.com npm init npm i express --save npm i mongoose@5.4.20 --save mongodb+srv://admin:1234@simpleblog.uhhst.mongodb.net/myFirstDatabase?retryWrites=true&w=majority 여기에서 id_rsa, id_ras.pub이 없다면 ssh가 없는것이다. docs.g..

github.com/jaewonhimnae/boilerplate-mern-stack jaewonhimnae/boilerplate-mern-stack Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX - jaewonhimnae/boilerplate-mern-stack github.com npm install //back npm install //client server / config / dev.js module.exports = { mongoURI:'mongodb+srv://admin:1234@myproject.uuqzp.mongodb.net/myFirstDatabase?retryWrites=true&w=majority' } server 에서 ..

webpack.config.ts에서 설정하는 historyApiFallback:true는 아주 중요하다! 폴더 구조 npm i react-router react-router-dom npm i -D @types/react-router @types/react-router dom //페이지 단위로 코드 spliting 하기 //알아서 코드 spliting, 알아서 코드 불러온다. npm i @loadable/componentnpm i @loadable/component //style npm i @emotion/react

BACKEND setting cd back -> npm i backend 폴더 안에 .env COOKIE_SECRET=sleactcookie MYSQL_PASSWORD=1234 BACKEND db setting npx sequelize db:create npm run dev했다가 ctrl + c로 끄기(테이블 생성) npx sequelize db:seed:all(기초 데이터 넣기) npm run dev localhost:3095에서 서버 돌아가는 중 백엔드 개발자가 API.md와 typings/db.ts를 남겨둔 상황 Front Setting..... TIP : npm init 할때 name명을 설치한 package 명이랑 다르게 하기 alecture 폴더 비우기 alecture 들어와서 cd alect..