React로 NodeBird SNS 만들기

React로 NodeBird SNS 만들기

(32개의 수강평)

750명의 수강생
조찬영 프로필

React의 비동기통신에 대한 질문입니다. 조찬영 1일 전

컴포넌트에서 리덕스의 글로벌 state가 아닌 useState로 생성한 state만을 업데이트 할때

redux saga를 사용하지 않고 컴포넌트 안에서 axios와 setState를 사용해 업데이트를 하는것은 가능하다고는 알고 있는데 

redux saga를 이미 사용하는 프로젝트에서 개별적인 state 업데이트를 위해 컴포넌트 안에서 axios를 사용하는 것은 괜찮은가요??

가능하다는것은 알고 있지만 표준이나 코드 스타일에서 올바르다고 하는 개발 방법이 맞는지,

코드의 유지보수가 어려워지거나, 선호하지 않는 개발 방법인지 궁금해서 질문 드렸습니다.

3
hyelee lee 프로필

팔로잉 목록 가져오는데 질문입니다. hyelee lee 1일 전

안녕하세요 다름이아니라 노드버드 기반으로 토이프로젝트 만드는중 문제가 생겨 질문드립니다.

db.User.belongsToMany(db.User, { through: 'Follow', as: 'Followers', foreignKey: 'followingId'});
db.User.belongsToMany(db.User, { through: 'Follow', as: 'Followings', foreignKey: 'followerId'});
router.get('/followings', async (req, res, next) => {
try {
const user = await db.User.findOne({
where: { id: req.user.id },
});
const followings = await user.getFollowings({
attributes: ['id', 'userName', 'email'],
});
res.json(followings);
} catch (e) {
console.error(e);
next(e);
}
});

attributes 와 where 빼고 동일한 코드입니다.

이렇게 들어가 있구요.

근데 자꾸 const user 에 user 를 객체형태로 반환해버립니다... saga에서 result 를 찍어봤습니다. 왜 그런걸까요? ㅠㅠ

 

13
-- 프로필

다시 질문 드립니다! -- 1일 전

안녕하세요! 아래 아래 게시글(https://www.inflearn.com/questions/30818)에 질문 드렸는데

글을 못보신것 같아 다시 질문 정리하여 올립니다!

useRef를 이용해 이벤트 발생 시 input에 focus를 하는 기능을 만들고자 하는데요.

해당 input이 초기에는 존재하지 않다가, 이후 텍스트를 클릭하면 나타나도록 짰는데 (조건문 사용)

이 때에 코드상으로 input에 ref를 설정해줬음에도 ref에 focus를 줬을 때 input을 잡지 못하는 문제점이 있습니다 ㅠㅠ

(input이 처음부터 존재하도록 코드를 수정해보았더니 그 때엔 제대로 잘 동작합니다)

useCallback에서 변화가 생김을 감지할 배열 목록에 해당 ref를 넣어줘도 

새로 생성된 input을 ref로 잡지 못하고 focus에서 오류가 생깁니다!

이렇게 초기 컴포넌트에 추가된 새로운 노드를 ref로 읽어오지 못할 때에는 어떻게 해야 하나요?

(자세한 코드는 (https://www.inflearn.com/questions/30818)에 서술해두었습니다.. 도움 주시면 감사하겠습니다!!)

2
김로인 프로필

제로초님 김로인 1일 전

제로초님 useEffect를 쓰던중 궁금한 javascript문법이 있어서 남깁니다 

예를 들어 const aa = console.log("반가워")라고 했을 때 

aa를 부르지도 않았는데 console.log() 가 찍히게 되고 

그래서 생각 한게 이벤트 루프 돌때 자바스크립트 안에서 처리 가능 한 부분이라서 스택에 바로 처리를 하게 되서 되는가 싶기도 한데 

그래서 이제 const aa = console.log("반가워")

console.log(aa) // undefined

를 했을때 스택에서 const aa = console.log("반가워")이부분이 실행 되고 사라진 뒤에 console.log(aa)에서 찾았을때 

undefined가 나 오는건지 

이럴 경우 return을 하면은 해결은 되던데 

왜 이렇게 되는건지 이론 적으로 확실 하게 설명을 못하 곘더라구여 ㅠㅠ

답변 부탁 드리겠습니다

1
-- 프로필

실습하던 중 질문 드립니다! -- 1일 전

제로초님 안녕하세요! 해당 강의를 듣고 포트폴리오를 만들고 있는 학생입니다.

투두리스트를 만들던 중, 이미 저장된 투두 텍스트를 클릭할 시 수정모드로 바뀌어

텍스트에서 인풋폼으로 바뀌고, 해당 인풋폼에 포커스가 맞추어지는 기능을 넣고자 합니다.

state인 editingMode를 텍스트를 클릭할 경우 true로 바꾸고,

editingMode가 true라면 span태그가 아닌 수정 가능한 input태그를 보여주는 방식으로 진행하고자 합니다.

input폼에 포커스가 맞추어지도록 하기 위해서 useRef를 이용하여 current.focus()를 사용하였는데요.

input이 없었다가 나중에 나타나는거여서 그런지 ref인 todoInput의 값이 undefined로 뜨네요 ㅠㅠ

useCallback을 이용해서 변하는 배열에 todoInput.current를 넣어주었는데도

계속 todoInput이 undefined로 떠서 어떤 식으로 진행을 해야 하는지 조언을 얻고자 질문글 드립니다 ㅠㅠ

해당 코드입니다! (투두리스트의 todoItem 컴포넌트입니다)

import React, {useState, useCallback, useRef} from 'react';
import { useDispatch } from 'react-redux';
import { checkTodoAction } from '../reducers/todo';

const TodoItem = ({item, index}) => {
const dispatch = useDispatch();
const [editedTodo, setEditedTodo] = useState('');
const [editingMode, setEditingMode] = useState(false);
const todoInput = useRef();

const checkTodo = useCallback(() => {
dispatch(checkTodoAction);
},[]);

const editModeStart = useCallback(() => {
console.log(todoInput);
setEditingMode(true);
todoInput.current.focus();
}, [todoInput.current]);

const editTodo = useCallback((e) => {
setEditedTodo(e.target.value);
}, []);

const editModeEnd = useCallback(() => {
setEditingMode(false);
// dispatch(editTodoAction);
}, []);

return (
<>
<li>
<button onClick={checkTodo}>{item.checked? '체크취소' : '체크'}</button>
{editingMode?
<input type="text" value={editedTodo || item && item.content} ref={todoInput}
onChange={editTodo} onBlur={editModeEnd}/>
:
<span
style={item.checked? {textDecorationLine:'line-through'}: {textDecorationLine:'none'}}
onClick={editModeStart}
>{item.content}</span>
}
</li>
</>
);
}

export default TodoItem;

문제가 되는 코드는 editModeStart 함수와 input태그입니다. 조언 주시면 감사하겠습니다!

1
생글탱글 프로필

저 워크벤치 확인이 안됩니다ㅠ 생글탱글 1일 전

터미널에서 db쿼리문 확인되었는데 워크벤치에서는 메인화면만 뜨고 자동으로 연동이 되지 않는 것 같습니다. 그래서 파일열기를 하려는데 어떤 파일을 열어야 하는지 모르겠습니다

2
JJeong 프로필

프론트엔드 서버에 대한 개념을 잘 모르겠습니다 JJeong 1일 전

웹서버에 대한 개념이 약한지라 구글링을 해봤지만 잘 이해가 안갑니다 ㅠ 

프론트엔드 서버와 백엔드 서버를 둘로 나누면, 프론트엔드 서버는 페이지 렌더링에 필요한 자바스크립트 파일을 브라우저에게 전송하고, 백엔드 서버는 페이지에서 필요한 데이터 생성 및 전송을 담당하는 역할을 한다... 이렇게 찾고 개념을 대충 이해했는데요.

근데 웹을 만들 때 결국 프론트엔드 서버에서 백엔드 서버에게 api 호출해서 필요한 데이터를 다 받아오는데, 그럼 결국 클라이언트와 통신하는 것은 프론트엔드 서버인건가요? 클라이언트<->프론트엔드서버<->백엔드서버<->DB 이런식으로요... 그리고 프론트엔드서버+백엔드서버를 합쳐 웹서버라고 하는 것이 맞나요? 

2
반가우면반갑다고해 프로필

Next.js 실무에서 많이 쓰이는지 궁금합니다. 반가우면반갑다고해 2일 전

리액트로 코드스플리팅, 서버사이드렌더링을 구현하는 과정을 공부하고있는데요.. 

친절한 설명이 뒷받침되는데도 불구하고 너무 어렵네요..

리액트로 코드스플리팅, 서버사이드렌더링을 구현하는 과정을 알게되니깐 next.js가 왜 마법이라고 불리우는지 알것같습니다.

next.js는 리액트 라우터와 호환이 되지않는다는게 엄청 치명적인 단점인데다, 기존의 프로젝트에  서버사이드렌더링,코드스플리팅을 적용해야하는 ( <=  이 경우를 회사에서 일할때 유지보수의 일종이라라고 생각하면될까요?)

경우에 next.js를 사용하는게 불가능하다고 알고있는데.. 실무에서 next.js가 많이쓰이나요?

흔히 React 공고에서 "react 잘 다루는 분" 이 문구가 next.js도 포함되어있는걸까요?

2
김의중 프로필

ssh 키를 입력했는데, 아마존 데이터베이스 서버에 접속이 되지 않아요. 김의중 2일 전

The authenticity of host 'ec2-18-190-119-159.us-east-2.compute.amazonaws.com (18.190.119.159)' can't be established.

ECDSA key fingerprint is SHA256:YUdN7COo9JscaM4Gj/uaKZehD+mK1nK3HE8GKnRxujo.

Are you sure you want to continue connecting (yes/no)? yes

Warning: Permanently added 'ec2-18-190-119-159.us-east-2.compute.amazonaws.com,18.190.119.159' (ECDSA) to the list of known hosts.

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Permissions 0644 for 'react-nodebird.pem' are too open.

It is required that your private key files are NOT accessible by others.

This private key will be ignored.

Load key "react-nodebird.pem": bad permissions

ubuntu@ec2-18-190-119-159.us-east-2.compute.amazonaws.com: Permission denied (publickey).

➜  react-nodebird git:(master)

탄력적 ip 연결하고, pem key 디렉토리에서 ssh 키 입력후 yes 를 하였는데 아마존 db 센터에 접속이 되지 않고, 다시 git 명령어가 나오네요 왜 이럴까용 ㅜㅜ

2
둥치탁치 프로필

LOAD_HASHTAG_POSTS_FAILURE 둥치탁치 3일 전

태그는 잘 따와서 주소도 잘 붙여주는데 서버로 가는게 문제인거 같아요...
LOAD_HASHTAG_POSTS_FAILURE 가 뜨는데 어디서 확인해야 되나요?

3
learn 프로필

config 오류인가요..? learn 4일 전

이 부분은 어디서 오류가 난 걸까요? config.js로 바꿨는데 

1
hhhh 프로필

ssr redux 질문드립니다. hhhh 5일 전

서버에서 가지고 있는 redux는 각 사용자에게 고유하게 할당 된 건인가요?

그게 맞을 거 같긴 한데,,

그렇다면 그 역할은 next-redux-wrapper가 해주는 개 맞는지 궁금합니다.

1
-- 프로필

6.15 리트윗API만들기에서 내주신 과제 (해당하는 포스트가 있는지 여부를 미들웨어로 만들기) -- 5일 전

안녕하세요!

6.15 리트윗 API 만들기에서 백엔드 라우터 post.js에서 중복되어 나오는

const post = await db.Post.findOne({where:{id:req.params.id}});
if(!post){
return res.status(404).send('존재하지 않는 포스트입니다.');
}

해당 코드를 미들웨어로 만들어 연결해보라는 숙제를 내주셔서 해보았습니다!

제대로 동작은 되는데 제가 한 방식이 옳은 방식인지 모르겠어서 체크해주셨으면 하는 마음에 글을 올립니다.

back/routes/middleware.js 에서 새로 작성한 postExists 부분

const db = require('../models');
exports.postExists = async(req, res, next)=>{
try{
const post = await db.Post.findOne({where:{id:req.params.id}});
if(!post){
return res.status(404).send('존재하지 않는 포스트입니다.');
}
req.post = post;
next();
}catch(e){
console.error(e);
return next(e);
}
}

 back/routes/post.js에서 postExists를 불러와 사용하는 부분 (다른 부분도 같은 방식으로 했기 때문에 like 부분만 적겠습니다!)

const {isLoggedIn, postExists} = require('./middleware');
router.post('/:id/like', isLoggedIn, postExists, async(req, res, next)=>{
try{
const post = req.post;
await post.addLiker(req.user.id);
res.json({userId: req.user.id});
}catch(e){
console.error(e);
next(e);
}
});

post 가 넘어가지 않아 req.post로 해당 데이터를 넘겨서 post.js에서 다시 선언한 후 이를 사용하였는데요.

구글 검색결과를 참고하여 저런 방식으로 하였는데, res를 통해 넘기는 것이 아닌 req에 넣어주는 것이 맞는건가요?

조언해주시면 감사하겠습니다!

1
hhhh 프로필

여쭤볼게 있습니다. hhhh 5일 전

getinialProps에서 키값을 컴포넌트에 준 후, 컴포넌트에서 api 호출하는 방식으로 개발하시는 것 같은데,,

그렇게 렌더링 된 컴포넌트는 서버에서 렌더링 되는 것이 아니라, 클라이언트에서 렌더링 되는 것이 맞는 건가요?

next를 사용하는 큰 이유가 ssr인데, 정답은 없겠지만, 아래와 같이 개발하는 것이 더 나은 것이 아닌지 궁금합니다.

https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

Page.getInitialProps = async ctx => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

3
learn 프로필

오류가 있어서 github에 있는 코드를 가져왔는데 learn 5일 전

github chapter4부터 가져와서 5-8 회원가입 back server하고 연결하는 걸 다시 하고 있는데 회원가입이 안된다고 뜨는데 어느 부분이 문제일까요..? 

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스