개발자 여러분의 카페를 소개해주세요
DEV-CAFE구경하기
- React
- React Hooks
- Redux
- Redux Saga
- Styled Components
- Next.js 서버사이드 렌더링
- Express
- Node.js
- Sequelize(MySQL)
- AWS EC2
- AWS S3
- AWS Lambda
- 타입스크립트 구현
- 지역별 카테고리화
- 소셜 로그인
- 지도 API 위치 검색
개발자 여러분의 최애 카페를 소개해주세요 💻☕
개발자 여러분의 카페를 소개해주세요
DEV-CAFE구경하기
https://www.kenrhee.com/blog/eslint-and-prettier-for-nextjs
📵 보안에 위협이 될 수 있기 때문에 referrer와 opener에 대한 정보를 막아줘야 한다. (원래는 새창이 켜지면 이 정보들이 넘어간다고 한다)
찾아 볼 수 있는 것들은 외우지 마라.
비동기 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 특징
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);
}
이런식으로도 활용 가능하다.
마치 Event Listener
처럼 활용 할 수 있다. (무한의 event listener)
📌 이 성질을 saga가 활용한 것
이미지 참고
프론트에서 처음엔 1개의 글만 보이겠지만 새로고침을 하면 백엔드에 2개의 데이터가 존재하기 때문에 똑같은 글이 2개가 뜨는 문제가 있다.
throttle 로 해결!
npm install immer
불변성을 다룰때 필수템!!!
npm install immer use-immer (immer의 hook ver.)
리덕스 코드량 줄여주는 툴.
인스타그램 같은 효과
virtualized list
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
이 명령어 실행 먼저 하고 db sync 해준다.
아래 예시처럼 두번째 인자로 POST, PUT, PATCH는 data를 넘길 수 있다.
GET DELETE 는 안넘긴다.
function signUpAPI(data) {
return axios.post('http://localhost:3065/user', data);
}
req/res 는 header(상태, 용량, 시간, 쿠키) 와
body(데이터)로 구성되어 있다.
200 성공
300 리다이렉트
400 클라이언트 에러
500 서버 에러
400번대 500번대 이렇게 분류한다.
403 에러는 클라이언트에서 잘못 보내서 생기는 에러
https://developer.mozilla.org/ko/docs/Web/HTTP/Status
백엔드 서버에서는 로그인 정보를 통째로 갖고있지만 (이 통째로 있는 게 session)
브라우저에서는 그대로 갖고있으면 보안상 위험이 존재하므로
Cookie로 'cxlhy' 와 같은 랜덤한 문자를 보내줘서 보안의 위협을 최소로한다.
redis
를 사용한다.app.use(cors({
origin: 'http://localhost:3060',
credentials: true,
}));
서버 사이드 렌더링으로 미리 불러와서 로그인 된 상태로 만들게 할 필요가 있다.
삭제전 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번 게시글을 앞에서도 안불러오고 뒤에서도 안불러오는 대참사가 일어날 수 있다!!!
front에서 backend로 요청을 보낼때 log가 콘솔창에 뜬다.
어떤 요청이 왔는지 보여준다.
위에 같은 라우터가 있다면 밑에 라우터는 실행이 안된다.
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.