The dev-cafe from kbu715

Memo

Next.js project에 ESLint와 Prettier 설정하기

https://www.kenrhee.com/blog/eslint-and-prettier-for-nextjs

target="_blank" rel="noreferrer noopener"

📵 보안에 위협이 될 수 있기 때문에 referrer와 opener에 대한 정보를 막아줘야 한다. (원래는 새창이 켜지면 이 정보들이 넘어간다고 한다)

찾아 볼 수 있는 것들은 외우지 마라.

redux-thunk 이해하기

비동기 action을 dispatch 할 수 있도록 도와주는 미들웨어

    const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

    function increment() {
        return {
            type: INCREMENT_COUNTER,
        }
    }
    // 원래의 redux에서는 아래가 실행 x. redux-thunk 가능.
    // redux의 확장!
    function incrementAsync() {
        return (dispatch) => {
            setTimeout(() => {
                // Can invoke sync or async actions with `dispatch`
                dispatch(increment());
            }, 1000);
        };
    }

🔎 redux-thunk 사용했을 경우

// login action creator
// dispatch를 여러번 할 수 있게 해준다..
export const loginAction = (data) => {
    return (dispatch, getState) => {
        const state = getState(); // state = initialState
        dispatch(loginRequestAction());
        axios.post('/api/login')
            .then(res => {
                dispatch(loginSuccessAction(res.data));
            })
            .catch(error => {
                dispatch(loginFailureAction(error));
            })
    }
}

대부분의 요청들은 비동기이기 때문에 Request, Success, Failure 이 3단계가 존재한다.

Middleware 이해하기

Middleware 특징

3단 고차 함수 화살표 3개를 가진다
인자들은 다 주어지기 때문에 활용만 하면 된다.

간단한 커스텀 미들웨어를 만들어보자.

const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => {
    // thunk는 type이 func인 action도 받는다.
    // if(typeof action === 'function') {
    //     return action(dispatch, getState);
    // }
    console.log(action);
    return next(action);
}

thunk 대신 saga를 쓰는 이유?

delay를 제공 (몇 초 뒤에 dispatch 실행 가능, thunk는 직접 구현.)
클릭을 두번 한 경우 thunk는 두번 실행되지만, saga는 take latest? 마지막으로 들어온 요청만 실행 할 수 있게 해주는 기능이 있다.
1초에 3번이상 action이 실행되면 차단하는 기능?!이 존재한다. 등등등 saga가 미리 구현해 놓았다.

generator 이해하기

yield 중단점 역할
yield가 테스트할 때 사용하면 좋다.
한줄 한줄 실행하면서 테스트

<무한 반복 활용>

이런식으로도 활용 가능하다.
마치 Event Listener 처럼 활용 할 수 있다. (무한의 event listener)

📌 이 성질을 saga가 활용한 것

takeLatest 클린 2번한 경우(요청 2번)

이미지 참고

프론트에서 처음엔 1개의 글만 보이겠지만 새로고침을 하면 백엔드에 2개의 데이터가 존재하기 때문에 똑같은 글이 2개가 뜨는 문제가 있다.
throttle 로 해결!

immer

npm install immer

불변성을 다룰때 필수템!!!

npm install immer use-immer (immer의 hook ver.)

redux toolkit

리덕스 코드량 줄여주는 툴.

placeholder.com

인피니트 스크롤링

scrollY : 얼마나 내렸는지
clientHeight : 화면 보이는 길이
scrollHeight : 총 길이

react-virtualized

인스타그램 같은 효과

virtualized list

backend

app.get -> 가져오다
app.post -> 생성하다
app.put -> 전체 수정
app.delete -> 제거
app.patch -> 부분 수정
app.options -> 찔러보기? (서버야 요청보내면 받아줄 수 있어?)
app.head -> 헤더만 가져오기

애매하면 post 쓴다.

app.post('/login') 로그인은 post인가 get인가
app.post('/post') 게시글 가져오면서 조회수 1 올린다.

보통 프론트엔드 개발자와 백엔드 개발자가 합의를 한다

swagger https://swagger.io/
api 문서 만들때 많이 쓴다.

시퀄라이즈 초기 세팅

npx sequelize init

시퀄라이즈 관계 설정

hasMany
hasOne
belongsTo
belongsToMany

다 대 다 관계에서는 중간에 테이블이 임의로 생긴다.

post - hashtag => posthashtag

Post 리트윗 관계 설명

npx sequelize db:create

이 명령어 실행 먼저 하고 db sync 해준다.

프로그램 구조를 기억하자

POST PUT PATCH, data 넘길 수 있다.

아래 예시처럼 두번째 인자로 POST, PUT, PATCH는 data를 넘길 수 있다.
GET DELETE 는 안넘긴다.

function signUpAPI(data) {
  return axios.post('http://localhost:3065/user', data);
}

req / res

req/res 는 header(상태, 용량, 시간, 쿠키) 와
body(데이터)로 구성되어 있다.

Header Status

200 성공
300 리다이렉트
400 클라이언트 에러
500 서버 에러

400번대 500번대 이렇게 분류한다.
403 에러는 클라이언트에서 잘못 보내서 생기는 에러

HTTP 상태 코드

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

cookie와 session이 왜 필요한가?

백엔드 서버에서는 로그인 정보를 통째로 갖고있지만 (이 통째로 있는 게 session)

브라우저에서는 그대로 갖고있으면 보안상 위험이 존재하므로

Cookie로 'cxlhy' 와 같은 랜덤한 문자를 보내줘서 보안의 위협을 최소로한다.

백엔드 서버에서도 로그인 정보를 통째로 갖고 있으면 메모리에 부담이 되므로 passport가 id값만 Cookie에 매칭되도록 한다.
나중에는 아예 세션 저장용 DB로 redis를 사용한다.

쿠키를 공유하게 된다면 보안이 더 강화되야 하기 때문에

app.use(cors({
    origin: 'http://localhost:3060', 
    credentials: true, 
}));

origin: '*' 는 위험하다.

로그인 정보 불러와서 새로고침 해도 로그인 된 상태로 남아 있게 했지만

서버 사이드 렌더링으로 미리 불러와서 로그인 된 상태로 만들게 할 필요가 있다.

서버로부터 프론트에 필요한 데이터만 보내주기! 데이터 효율성

offset limit 단점

삭제전 20 19 18 17 16 15 14 13 12 11 / 10 9 8 7 6 5 4 3 2 1
삭제후 20 19 18 17 16 14 13 12 11 / 10 / 9 8 7 6 5 4 3 2 1

중간에 게시글을 추가하거나 삭제하면 꼬여버린다

15번을 중간에 삭제한다면 10번 게시글을 앞에서도 안불러오고 뒤에서도 안불러오는 대참사가 일어날 수 있다!!!

limit / lastId 방식을 많이 쓴다.

morgan

front에서 backend로 요청을 보낼때 log가 콘솔창에 뜬다.

어떤 요청이 왔는지 보여준다.

Router는 실행순서가 중요하다

위에 같은 라우터가 있다면 밑에 라우터는 실행이 안된다.

작성하는 것과 삭제하는 것은 항상 보안을 철저히!

reducer에서 loading 부분은 `SWR` 을 통해 반복을 줄일 수 있다.

araboza...

고차함수를 써준다.

  return (
    <List
      style={listStyle}
      grid={{ gutter: 4, xs: 2, md: 3 }}
      size="small"
      header={<div>{header}</div>}
      loadMore={
        <div style={loadMoreStyle}>
          <Button>더 보기</Button>
        </div>
      }
      bordered
      dataSource={data}
      renderItem={(item) => (
        <List.Item style={listItemStyle}>
          <Card actions={[<MinusCircleOutlined key="minus" onClick={onCancel(item.id)} />]}>
            <Card.Meta description={item.nickname} />
          </Card>
        </List.Item>
      )}
    />
  );

📌📌📌
renderItem와 같이 map 함수 같은 경우에 각각의 item들을 함수에 넘겨줄 때 고차함수를 써줘야한다!!!

// 고차함수는 이렇게 생겼다.
  const onCancel = (id) => () => {
    if (header === '팔로잉') {
      dispatch({
        type: UNFOLLOW_REQUEST,
        data: id,
      });
    } else {
      dispatch({
        type: REMOVE_FOLLOWER_REQUEST,
        data: id,
      });
    }
  };

자기 게시글을 리트윗 하는 것 || 자기 게시글을 남이 리트윗 한거를 내가 다시 리트윗하는 것

이걸 막자

  if (req.user.id === post.UserId || post.Retweet?.UserId === req.user.id)

로컬에서 작업하고 우분투 환경에서 변경사항 가져오는 방법

front

prepare 디렉토리 이동 후 ec2 인스턴스 연결
front 디렉토리 이동 후 sudo git pull
로컬에서 먼저 npm run build 후 에러 체크
에러없으면 sudo npm run build
sudo npx pm2 start npm -- start
sudo npx pm2 monit 모니터링
서버가 이미 돌고 있으면 sudo npx pm2 reload all
서버 끌 때 sudo npx pm2 kill

back

1번동일
back 디렉토리에서 sudo git pull
sudo npm start
or sudo npx pm2 reload all

kbu715 / dev-cafe Goto Github PK

dev-cafe's Introduction

dev-cafe

기술 스택

FRONT

BACK

기능

- 다크모드

- 로그인, 로그아웃, 게시글 작성, 댓글 작성

- 좋아요, 끌어올리기

- 이미지 업로드

- 인피니트 스크롤링

- 유저 관련 글 검색

- 해시태그 검색

To do list

dev-cafe's People

Contributors

Watchers

dev-cafe's Issues